复杂嵌套部分视图Ajax发布到MVC 5控制器

Question

TL; DR：我只需要弄清楚为什么我不能序列化（）部分视图的父div并接收模型。手动编写此代码将永远需要，因为有许多父部分，我必须使用相同的逻辑。

更多信息：我已尝试使用EditorTemplate进行绑定，但不幸的是，就我搜索过而言，没有简单的方法可以将它们用作变量列表。

开始：

模型

public class ContactModel 
{                
    public List<ContactDetailModel> Contacts { get; set; }
    ....


public class ContactDetailModel
{
    public ContactView Contact { get; set; }
    public PhoneModel PhoneModel { get; set; }
    ...

public class PhoneModel
{
    public int ContactId { get; set; }
    public int IsPrimaryPhoneNumberId { get; set; }
    public List<PhoneView> Phones { get; set; }
    public List<EmailPhoneTypeView> EmailPhoneTypes { get; set; }
...

选择＆amp;从这个局部视图发布输入，我实现了一个变量类，以及它的相对模板前缀，以保持局部视图的MVC绑定。

@{
 var phoneClass = "phone" + @Model.Contacts[index].Contact.ContactId;
 var phoneTemplatePrefix = "Contacts[" + index + "].PhoneModel";
 }

这是在循环内部运行，根据需要增加索引以保持绑定。

<div class="@phoneClass">
     @Html.Partial("_ContactPhone", Model.Contacts[index].PhoneModel, new ViewDataDictionary() { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = phoneTemplatePrefix } })
</div>

我试图发布的部分内容。 （PhoneModel）的强类型部分

@{var addNavigationClass = "AddContactPhone" + Model.ContactId;}

for (var phoneIndex = 0; phoneIndex < Model.Phones.Count(); phoneIndex++)
{
    @Html.HiddenFor(model => model.Phones[phoneIndex].ContactPhoneId)
    @Html.DropDownListFor...
    @Html.TextBoxFor(model => model.Phones[phoneIndex].PhoneNumber)
    <a href="#" class="removeMemberPhone">Trash</a>
    @Html.RadioButtonFor(model => model.IsPrimaryPhoneNumberId, Model.Phones[phoneIndex].ContactPhoneId) Primary</label>
}

在视图的点击功能

中

var model = $('.phone' + '@Model.ContactId' + ' :input').serialize();
console.log('model', model);

$.ajax({
   url: '/Contact/AddPhone',
   type: 'POST',
   data: model,
   success: function (data) {
     console.log(data.length);
    }
    ....

日志的输出

model Contacts%5B1%5D.PhoneModel.Phones%5B0%5D.ContactPhoneId=3907&Contacts%5B1%5D.PhoneModel.Phones%5B0%5D.EmailPhoneTypeId=1&..........

我的模型在我的控制器中没有任何值（我在上面的代码中将ContactPhoneModel缩写为PhoneModel）...

Answer 1

这是比实际代码更多的伪代码，你需要稍微整理一下。

由于您没有回发整页，因此在绑定到集合时跳过Mvc模型绑定器箍似乎有点过分。如果是我这样做，我会将您的点击处理程序更改为以下内容：

var model = {};
$('.phone' + '@Model.ContactId' + ' :input').each(function(){
    model[/[^\.]+$/.exec($(this).prop("name"))[0]] = $(this).val();
};
console.log('model', model);

$.ajax({
   url: '/Contact/AddPhone',
   type: 'POST',
   data: model,
   contentType: "application/json; charset=UTF-8",
   success: function (data) {
      console.log(data.length);
    }

我会考虑使用评论中提到的editortemplates，它们会消除管理索引之类的一些痛苦

Answer 2

这里有一些我写过的(unrefined, and early) code，它将采用格式正确的serializeArray（）数据，并将数组作为一个好的帖子重新定位到MVC控制器。

前2行将显示如何在项目中调用它。