复杂嵌套局部视图 Ajax Post 到 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; }
...

对于来自这个局部视图的 select & post 输入，我实现了一个变量 class，它的相关模板前缀保持局部视图的 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>

我正在尝试的部分 post。（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);
    }

我会考虑使用评论中提到的编辑器模板，它们会减轻管理索引等的痛苦

Answer 2

这是我写的一些 (unrefined, and early) code，它将采用正确格式的 serializeArray() 数据并将数组重新设置为良好的 post 到 MVC 控制器。

前 2 行将显示如何在您的项目中调用一次。

复杂嵌套局部视图 Ajax Post 到 MVC 5 控制器

Complex Nested Partial View Ajax Post to MVC 5 Controller

ajax

jquery

nested

asp.net-mvc-partialview

asp.net-mvc-5