javascript之使用ajax将整个模型发布回 Controller

我是 asp.net mvc 和网络技术的初学者。 现在我被困在某个时候了。我有一个创建用户页面。当管理员用户想要添加新用户时，他被重定向到创建具有空数据类的用户页面。在该页面中，数据类已填满。现在我想使用 POST 方法将该模型的数据返回给 Controller 。

我想要实现的是将整个模型作为 JSON 对象直接发布回 Controller 并且它始终为 null。

在创建新用户时点击:

[HttpGet] 
public ActionResult CreateUser() 
{ 
    var newUser = new User(); 
    return View(newUser); 
} 

我的CreateUser查看代码:

@model WebApplication7.Models.User 
@{ 
    Layout = null; 
} 
 
<!DOCTYPE html> 
 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>CreateUser</title> 
    <h2>Create new user</h2> 
</head> 
<body> 
    <div> 
        <table> 
            <tr> 
                <td>Username : </td> 
                <td> 
                    @Html.TextBoxFor(model => model.userName, new { @class = "", id = "txtUsername", @maxlength = 6 }) 
                </td> 
            </tr> 
 
            <tr> 
                <td>Password : </td> 
                <td> 
                    @Html.TextBoxFor(model => model.passWord, new { @class = "", id = "txtUsername", @maxlength = 6 }) 
                </td> 
            </tr> 
 
            <tr> 
                <td>First Name : </td> 
                <td> 
                    @Html.TextBoxFor(model => model.firstName, new { @class = "", id = "txtUsername", @maxlength = 6 }) 
                </td> 
            </tr> 
 
            <tr> 
                <td>Last Name : </td> 
                <td> 
                    @Html.TextBoxFor(model => model.lastName, new { @class = "", id = "txtUsername", @maxlength = 6 }) 
                </td> 
            </tr> 
 
            <tr> 
                <td>Display name : </td> 
                <td> 
                    @Html.TextBoxFor(model => model.displayName, new { @class = "", id = "txtUsername", @maxlength = 6 }) 
                </td> 
            </tr> 
 
            <tr> 
                <td>Email : </td> 
                <td> 
                    @Html.TextBoxFor(model => model.emailID, new { @class = "", id = "txtUsername", @maxlength = 6 }) 
                </td> 
            </tr>     
            <tr> 
                <td> 
                <input type="button" name="btnClear" value="Submit" class="btn-Clear" onclick="Submit()" /> 
                    </td> 
            </tr> 
        </table> 
    </div> 
</body> 
</html> 

提交功能代​​码:

<script> 
    function Submit() { 
        $.ajax({ 
            type: "POST", 
            url: "/UserManagement/SubmitNewUserData", 
            data: JSON.stringify({ userData: model }), 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (msg) { 
                ServiceSucceeded(msg); 
            }, 
            error: function () { 
                return "error"; 
            } 
        }); 
    } 
</script> 

我的 Controller 代码:

[HttpPost] 
public JsonResult SubmitNewUserData(User userData) 
{ 
    if (userData != null) 
    { 
 
    } 
    return Json(true); 
} 

此处的userData 始终为空。请帮我将该模型发回该 Controller 。谢谢。

请您参考如下方法:

你没有指出model的值是什么是，但为了工作，它需要

var model = { 
    userName: $('#userName').val(), 
    passWord: $('#passWord').val(), 
    ... // etc for each property of User 
}; 

假设你删除所有你new { id = "txtUsername" }生成无效(重复)名称属性的属性。

一个更简单的解决方案是将所有表单控件包装在 <form> 中标记然后使用 .serialize();正确序列化所有表单控件。然后脚本将是

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("SubmitNewUserData", "UserManagement")', // always use Url.Action() to generate your url's 
    data: $('form').serialize; 
    dataType: "json", 
    success: function (msg) { 
        ServiceSucceeded(msg); 
    }, 
    error: function () { 
        return "error"; 
    } 
}); 
return false; // cancel the default submit 

要进一步改进，请删除您的 onclick="Submit()"并处理 .submit()事件使用 Unobtrusive Javascript

$('form').submit(function() { 
    if (!$(this).valid()) { 
        return; 
    } 
    $.ajax({ 
       .... 
    }); 
    return false; 
}); 

if (!$(this).valid()) {将允许您处理客户端验证，您应该通过包含 @Html.ValidationMessageFor(..) 来完成 helper ，包括相关的jquery.validate.js和 jquery.validate.unobtrusive.js脚本，并将验证属性添加到您的模型属性，以便您获得客户端和服务器端验证。

旁注:应使用 @Html.PasswordFor() 生成密码字段.还不清楚为什么您使用 ajax 而不是标准提交(为什么您希望用户停留在同一页面上并再次编辑它？