JSON 将数据发布到 mvc 控制器

Question

我有一个包含 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 将数据（在本例中为所有复选框）回发到“更新”控制器？

Answer 1

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

每个输入上的 name 属性需要与 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 POST 上将表单数据转换为 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;
};

Answer 2

设置一个jquery方法在表单提交上运行，将序列化的表单发送到Begin Form中的控制器

$('formSelector').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.Success == true) {

                }
                else {
                    $('#Error').html(result.Html);
                }
            }
        });
    }
    return false;
});