JSON将数据发布到MVC控制器-C#/.NET问题

JSON post data to mvc controller(JSON将数据发布到MVC控制器)

本文介绍了JSON将数据发布到MVC控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我获得了一个包含Person和Address的实体类。

public class Person
{
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public List<Address> Addresses { get; set; }
}

public class Address
{
   public string ZipCode { get; set; }
   public string City { get; set; }
   public string State { get; set; }
   public string Country { get; set; }
}

在我的视图中，我显示了几个复选框。

@model DataContext.Models.Persons

@{
    ViewBag.Title = "Person list";
}

@using (Html.BeginForm("Update", "Test", FormMethod.Post))
{

    <div id="personContainer">
        @foreach(var t in Model.Person)
        {
            <input type="checkbox" value="@t.ID" name="@t.FirstName ">@t.FirstName <br />
        }
    </div>
    <p>
        <input type="submit" id="save">
    </p> 
}

我的控制器如下所示：

[HttpPost]
public JsonResult Update(Person p)
{

   return Json( new { redirectTo = Url.Action("Index") });
}

我要发布的数据必须是强类型的。如何使用JSON将数据(在本例中为所有复选框)回发到"UPDATE"控制器？

推荐答案

您需要为视图模型的每个属性提供一个输入。

每个输入上的名称属性需要与MVC识别它的属性名称相同。

例如：

@model Person

@using (Html.BeginForm("Update", "Test", FormMethod.Post))
{
    @Html.HiddenFor(model => model.ID)

    <input type="checkbox" value="@model.FirstName" name="FirstName ">@model.FirstName <br />
    <input type="checkbox" value="@model.LastName" name="LastName ">@model.LastName <br />
    @Html.EditorFor(model => model.Addresses)

    <input type="submit" id="save">
}

对于地址，创建一个编辑器模板，剃须刀引擎将意识到该属性是一个可枚举的。

它会将可枚举数添加到名称属性，如下所示：

<input id="addresses_0__city" type="text" value="City" name="addresses[0].city">

请注意，该名称具有数组样式。

要创建编辑器模板，请在您的"共享"视图文件夹(或相关视图文件夹)中创建一个名为"EditorTemplates"的文件夹。
创建名为Address(与类型相同)的分部视图。

为每个地址添加要查看的HTML：

@model Address

@Html.CheckBox("ZipCode", false, new { value = Model.ZipCode}) @Model.ZipCode
<br />
@Html.CheckBox("City", false, new { value = Model.City}) @Model.City
<br />
@Html.CheckBox("State", false, new { value = Model.State}) @Model.State
<br />
@Html.CheckBox("Country", false, new { value = Model.Country}) @Model.Country
<br />

这将起作用，但它不会将表单发布为JSON。如果您需要专门发布为JSON，您可以在AJAX发布中将表单数据转换为JSON：

$.ajax("/Test/Update",
{
    type: "post",

    data: JSON.stringify($('form').serializeObject()), // converting to JSON
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (data) {}      
    error: function () {}
});

要JSON.stringify，首先使用以下命令将表单转换为对象形式：

$.fn.serializeObject = function () {
    var obj = {};
    var arr = this.serializeArray();

    $.each(arr, function () {
        var splt = this.name.split(".", 2);
        if (splt.length === 2) {
            if (obj[splt[0]] === undefined) {
                obj[splt[0]] = {};
            }
            obj[splt[0]][splt[1]] = this.value || '';
        }
        else if (obj[this.name] !== undefined) {
            if (!obj[this.name].push) {
                obj[this.name] = [obj[this.name]];
            }
            obj[this.name].push(this.value || '');
        }
        else {
            obj[this.name] = this.value || '';
        }
    });
    return obj;
};