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方法在表單submit上運行，以便將序列化表單發送到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;
});