使用jQuery和Ajax向MVC控制器提交JSON对象

Question

我正在尝试从表单向我的MVC控制器提交一些值。

以下是我的控制器：

 //Post/ Roles/AddUser
    [HttpPost]       
    public ActionResult AddUser(String json)
    {
        Log.submit(json);            
        return View();
    }

这是 JavaScript 代码：

<script>
function submitForm() {

    var usersRoles = new Array;
    $("#dualSelectRoles2 option").each(function () {
        usersRoles.push($(this).val());
    });
    console.log(usersRoles);

    jQuery.ajax({
        type: 'POST',
        url: "@Url.Action("AddUser")",
        contentType: "application/json; charset=utf-8",
        datatype: 'json',
        data: JSON.stringify(usersRoles),
        success: function (data) { alert(data); },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });
}

当我在控制器上调试时，我的参数变成了null？ console.log(usersRoles) 给了我数据。

我做错了什么？

如何在控制器中接收一个JSON对象？

- Zapnologica

Answer 1

根据您的代码，我看到您正在尝试将数组传递给POST操作。在这种情况下，请按照以下有效代码 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    function submitForm() {
        var roles = ["role1", "role2", "role3"];

        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("AddUser")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(roles),
            success: function (data) { alert(data); },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

<input type="button" value="Click" onclick="submitForm()"/>

控制器操作将是 -

    public ActionResult AddUser(List<String> Roles)
    {
        return null;
    }

当您点击按钮时 -

- ramiramilu

---

我花了一段时间尝试让这个模型绑定方法工作，但我的控制器参数始终为空。我发现我有一个JavaScript错误，它只添加了一个仅有单列的项目。务必确保您传递的JSON与模型完全匹配。如果不匹配，您将只会得到一个空参数，而没有任何线索或消息。 - Nick.McDermaid

Answer 2

使用模型绑定来代替接收json字符串更好。例如：

[HttpPost]       
public ActionResult AddUser(UserAddModel model)
{
    if (ModelState.IsValid) {
        return Json(new { Response = "Success" });
    }
    return Json(new { Response = "Error" });
}

<script>
function submitForm() {    
    $.ajax({
        type: 'POST',
        url: "@Url.Action("AddUser")",
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: $("form[name=UserAddForm]").serialize(),
        success: function (data) {
            console.log(data);
        }
    });
}
</script>

- Shibbir Ahmed

---

我该如何创建UserAddModel？ - Zapnologica

但我正在提交一个 JSON 对象，而不是多个变量？ - Zapnologica

不确定为什么你要那样做。无论如何，你能展示一下HTML吗？usersRoles数组里面有什么？ - Shibbir Ahmed

尝试从您的ajax函数中删除contentType并使用data: {"json": JSON.stringify(usersRoles)}。 - Shibbir Ahmed

Answer 3

我做错了什么？

你需要将HTML转换为JavaScript对象，然后作为第二步通过JSON.Stringify转换为JSON。

如何在控制器中接收JSON对象？

视图：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://raw.githubusercontent.com/marioizquierdo/jquery.serializeJSON/master/jquery.serializejson.js"></script>

var obj = $("#form1").serializeJSON({ useIntKeysAsArrayIndex: true });
$.post("http://localhost:52161/Default/PostRawJson/", { json: JSON.stringify(obj) });

<form id="form1" method="post">
<input name="OrderDate" type="text" /><br />
<input name="Item[0][Id]" type="text" /><br />
<input name="Item[1][Id]" type="text" /><br />
<button id="btn" onclick="btnClick()">Button</button>
</form>

控制器：

public void PostRawJson(string json)
{
    var order = System.Web.Helpers.Json.Decode(json);
    var orderDate = order.OrderDate;
    var secondOrderId = order.Item[1].Id;
}

- David Ulvmoen