使用 ASP.NET 6.0 MVC 應用程序中的 jQuery AJAX 將數據插入數據庫

Question

我將我的項目的用戶輸入部分作為模式（彈出），所以我需要將數據傳輸到后端（控制器）而不刷新頁面。 由於這個原因，我選擇使用ajax，但是我有一個問題。

這是我的寄存器 Controller。

[HttpPost]
    public JsonResult Register(RegisterViewModel formData)
    {
        var user = new UserRegisterDto
        {
            FirstName = formData.FirstName,
            LastName = formData.LastName,
            Email = formData.Email,
            Password = formData.Password,
            PhoneNumber = formData.PhoneNumber,
            UserType = Data.Enums.UserTypeEnum.user
        };

        var response = _userService.AddUser(user);
        return new JsonResult("Data is Saved");
    }

這是我的 ajax 代碼

$('#btnRegister').click(function() { debugger
        var user = {
            FirstName:  $('#inputUserFirstName').val(),
            LastName: $('#inputUserLastName').val(),
            Email: $('#inputUserEmail').val(),
            Password: $('#inputUserPassword').val(),
            PasswordConfirm: $('#inputUserPasswordConfirm').val(),
            PhoneNumber: $('#inputUserPhoneNumber').val()
        };

        $.ajax({
            type: 'Post',
            url: '/Auth/Register',
            data: JSON.stringify(user),
            contentType:'application/json; charset=utf-8;',
            dataType: 'json',
            success: function() {       
                alert("saved");
            },
            error: function() {
                alert("no saved");
            }
        });

調試的時候看到controller里面的formData參數沒有得到任何數據。

我找不到我犯錯的地方。

Answer 1

您將需要JSON.stringify()您的數據以在請求中傳輸它。

您的請求應如下所示：

$.ajax({
        type: 'Post',
        url: '/Auth/Register',
        data: JSON.stringify(user),
        contentType:'application/json; charset=utf-8;',
        dataType: 'json',
        success: function() {       
            alert("saved");
        },
        error: function() {
            alert("no saved");
        }
    });

對於 controller 我會這樣做：

[Route("Auth/Register")]
[HttpPost]
    public IActionResult Register([FromBody] RegisterViewModel formData)
    {
        var user = new UserRegisterDto
        {
            FirstName = formData.FirstName,
            LastName = formData.LastName,
            Email = formData.Email,
            Password = formData.Password,
            PhoneNumber = formData.PhoneNumber,
            UserType = Data.Enums.UserTypeEnum.user
        };

        var response = _userService.AddUser(user);
        return Json(new { @Success = true});
    }