Question

我是asp.net mvc和web技术的初学者。现在我陷入了困境。我有一个创建用户页面。当admin用户想要添加新用户时，他被重定向以创建具有空数据类的用户页面。在该页面中，数据类已填满。现在我想使用POST方法将该模型的数据返回给控制器。

我想要实现的是将整个模型作为JSON对象直接发布回控制器，它始终为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>

我的控制器代码：

[HttpPost]
public JsonResult SubmitNewUserData(User userData)
{
    if (userData != null)
    {

    }
    return Json(true);
}

userData此处始终为null。请帮我把这个模型发回给这个控制器。谢谢。

Answer 1

您尚未说明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()"并使用Unobtrusive Javascript处理.submit()事件

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

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

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

Answer 2

在您为表单命名后，您只需要这样做：

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

使用ajax将整个模型发回控制器

2 个答案: