c# - MVC Razor - 将 HTML 元素序列化为 C# 集合

Question

大家早上好!

我的 C# MVC 应用程序中有以下对象

public class FamilyMember 
{
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public string Age { get; set; }
   public string Relationship { get; set; }
}

而且我还有一个包含上述类的集合的对象

public class Authorization {
   public ICollection<FamilyMember> FamilyMembers { get; set; }
}

现在所有这些信息都使用循环显示在 View 上:

<ul class="family-list small-text" id="family-list">
@for (int i = 0; i < familySize; i++)
{
    var member = Model.FamilyMembers.ElementAt(i);
    <li class="family-member">
        <label style="display: none;" for="FirstName" class="grey-text family-label">First Name:</label>
        <input style="display: none;" type="text" class="family-member-input" id="FirstName" name="FamilyMember.FirstName" value="@member.FirstName" />
        <label style="display: none;" for="LastName" class="grey-text family-label">Last Name:</label>
        <input style="display: none;" type="text" class="family-member-input" id="LastName" name="LastName" value="@member.LastName" />
        <label style="display: none;" for="Age" class="grey-text family-label">Age:</label>
        <input style="display: none;" type="text" class="family-member-input" id="Age" name="Age" value="@member.Age" />
        <label style="display: none;" for="Relationship" class="grey-text family-label">Relationship:</label>
        <input style="display: none;" type="text" class="family-member-input" id="Relationship" name="Relationship" value="@member.Relationship" />
    </li>
}

其中 @familySize 是 FamilyMember 集合的 Count。

现在此 View 上有一个名为 Save 的按钮，单击该按钮后，使用 jQuery .serialize() 方法序列化上述列表以及更多输入元素。然后将此方法的输出发送到 AJAX 调用，该调用调用我在 MVC 项目中设置的操作方法:

var saveConfirmed = function () {
    saveTransfereeAjax(transfereeForm.serialize(), saveTransfereeSuccess, saveTransfereeFailure);
};

var saveTransfereeAjax = function (data, success, error) {
    console.log(data);
    bootbox.dialog({
        message:
            '<div class="text-center"><img src="/Content/Images/load-spinner.gif" alt="loader" /> <p>Processing...</p></div>'
    });
    $.ajax({
        data: data,
        dataType: "text",
        type: "POST",
        url: "/api/savetransferee",
        success: success,
        error: error
    })
};

transfereeForm 是我认为要序列化的表单。

这是由 AJAX 调用发送到的操作方法。

public IHttpActionResult Save(Authorization authorization)
{
    //process authorization
}

一旦我点击操作方法，表单中的所有内容似乎都已正确序列化，但不是 FamilyMember 集合的成员。

对于我 View 中的每个 FamilyMember 对象的属性，我是否需要任何特定的名称属性，以便将每个属性序列化到 FamilyMember 集合中？例如:

<input type='text' name='FamilyMember[i].FirstName' id='FamilyMember[i].FirstName' value='@member.FirstName' />

i 表示我正在遍历的 FamilyMember 集合的当前索引。

Answer 1

我相信如果您使用 HTML 帮助程序，您将获得正确的 ID 和名称。您还必须使用数组而不是集合:

 public FamilyMember[] FamilyMembers { get; set; }

@for (int i = 0; i < Model.FamilyMembers.Length; i++) { 
        <li class="family-member">
          @Html.TextBoxFor(m => Model.FamilyMembers[i].FirstName, new {style = "display:none;"})
        </li>
      }

这将导致代码:

<input id="FamilyMembers_0__FirstName" name="FamilyMembers[0].FirstName" style="display:none;" type="text" value="Name0">

Witch 会产生这个序列化值: FamilyMembers%5B0%5D.FirstName=姓名0&FamilyMembers%5B1%5D.FirstName=姓名1&FamilyMembers%5B2%5D.FirstName=姓名2

此外，使用 serializeArray 将其序列化为 json 可能会更好，请查看以下问题:Convert form data to JavaScript object with jQuery

编辑:这里是如何使用 serializeArray 并继续使用 iCollection

首先需要正确设置名称。

 @{ var i = -1;}
    <ul class="family-list small-text" id="family-list">
      @foreach (var familyMembers in Model.FamilyMembers)
      {
        i++;
        <li class="family-member">
          @Html.TextBoxFor(m => familyMembers.Age, new {Name = "familyMembers[" + i + "].Age", style="display:none;" })
        </li>
      }
    </ul>

然后你需要将其序列化为JSON，并以JSON格式发布

function objectifyForm(formArray) {//serialize data function
  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}
var data = objectifyForm($('form').serializeArray());
$.ajax({
  data: data,
  dataType: "text/json",
  type: "POST",
  url: "/api/savetransferee",
  success: success,
  error: error
});