.Net MVC通过AJAX将JSON传递给控制器

时间:2017-03-23 17:05:19

标签: jquery json ajax asp.net-mvc

以下是我的模特:

public class Inspection
{
    public string InspectionId { get; set; }
    public string Description { get; set; }
}

public class InspectionReasons : Inspection
{
    public string ReasonId { get; set; }
    public string ReasonDesc { get; set; }
    public string NotUsedInUpdate { get; set; }
    public bool CheckedFlag { get; set; }
}

我从动态构建的表中获取此数据并通过AJAX调用更新它:

table.rows().every(function (rowIdx, tableLoop, rowLoop) {
    var data = this.data();
    var row = this.node();
    var checked = $(row).find('input').prop('checked');

    reasons.push({
        InspectionId: data['id'],
        Description: data['desc'],
        ReasonId: data['reasonId'],
        ReasonDesc: data['reasonDesc'],
        CheckedFlag: checked,
        NotUsedInUpdate: ""
    });
});

$.ajax({
    type: 'POST',
    url: '/InspectionReason/UpdateInpsectionReasons',
    dataType: 'json',
    data: {
        reasons: JSON.stringify(reasons)
    }
});

这是我的行动:

[HttpPost]
public JsonResult UpdateInpsectionReasons(List<InspectionReasons> reasons)
{
    UpdateReasons(reasons);
    return Json(string.Empty);
}

当我调试List<InspectionReasons> reasons为空时。我已经提醒了我的客户端原因对象,它是有效的JSON。属性是否需要与模型中显示的顺序相同?如果他们这样做,继承的属性是否低于其他属性?我看到很多例子像这样工作,但我似乎无法让我的工作。

1 个答案:

答案 0 :(得分:1)

Ajax缺少 contentType 。例如,contentType: "application/json; charset=utf-8",

$.ajax({
    type: 'POST',
    url: '@Url.Action("UpdateInpsectionReasons", "InspectionReason")',
    dataType: 'json',
    data: JSON.stringify(reasons),
    contentType: "application/json; charset=utf-8",
    success: function(result) {
        console.log(result);
    }
});

工作代码

public class InspectionReasonController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult UpdateInpsectionReasons(List<InspectionReasons> reasons)
    {
        return Json(reasons);
    }
}

视图

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <button id="btnSubmit" type="button">Submit</button>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        var reasons = [];

        $("#btnSubmit").click(function () {
            reasons.push({
                InspectionId: "Test InspectionId",
                Description: "Test Description",
                ReasonId: "Test ReasonId",
                ReasonDesc: "Test ReasonDesc",
                CheckedFlag: true,
                NotUsedInUpdate: "Test NotUsedInUpdate"
            });

            $.ajax({
                type: 'POST',
                url: '@Url.Action("UpdateInpsectionReasons", "InspectionReason")',
                dataType: 'json',
                data: JSON.stringify(reasons),
                contentType: "application/json; charset=utf-8",
                success: function(result) {
                    console.log(result);
                }
            });
        });
    </script>
</body>
</html>