Jquery 复杂嵌套局部视图Ajax Post到MVC5控制器

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; }
...

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

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

在视图的单击功能中

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）

---

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

由于您没有发回整个页面，因此在绑定到集合时跳过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，它们将减轻管理索引和类似内容的一些痛苦，这里是我编写的一部分，它将获取格式正确的serializeArray（）数据，并重新建立数组的基础，以便在MVC控制器上发布一篇好文章

---

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

您应该使用

EditorTemplates

而不是partials来确保表单控件的命名正确。您的视图似乎是基于

ContactModel

的，但是您发回了

ContactPhoneModel

，因此表单数据的名称与模型属性的名称不匹配，因此无法绑定。您也有一个属性

public PhoneModel PhoneModel

，但我假设它应该是

public ContactPhoneModelPhoneModel

？@StephenMuecke正如我前面所说的

EditorTemplates

不适用于我用此视图实现的变量类型列表。另外，我也注意到了模型名称的差异，我已经尝试将它们缩写，并将编辑帖子以修复它们。这当然不会：）并且您应该使用

编辑器或模板

。您视图中的模型是

ContactPhoneModel

，这意味着您的表单数据需要是

ContactPhoneId=3907

而不是

Contacts[1]。PhoneModel.Phones[0].ContactPhoneId=3907

无论如何都不会工作，因为索引器必须从零开始并且是连续的。@StephenMuecke我只是说我没有找到一种方法来用一个额外的

phoneModel

更新编辑器模板（在许多堆栈的帖子中推荐，这是部分视图）。日志返回了

Contacts[1]

，因为这是我点击添加

phoneModel

的第二个联系人。这真的很酷，我已经测试过了，“修改”只适用于这一部分，然而，使用这种方法，仅仅通过管理代码来获取数据，绑定任何“部分”模型将变得越来越困难。我很感激你花了这么多时间回复我的邮件和代码。

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

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);
    }