大家早上好!
我的 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
集合的当前索引。
最佳答案
我相信如果您使用 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
});
关于c# - MVC Razor - 将 HTML 元素序列化为 C# 集合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49386476/