如何将使用局部视图创建的动态复杂对象绑定到视图模型中的集合属性

Question

我无法将使用局部视图动态创建的子复杂对象的集合绑定到viewmodel qazxsw poi属性。

我已经使用我在这个博客IEnumerable上找到的技术成功地将使用局部视图动态创建的对象绑定到视图模型。我遵循相同的技术，但我无法将集合绑定到视图模型中的https://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/属性。

IEnumerable

我通过ajax调用这个action-method来添加动态联系人详细信息元素，并将部分视图作为html返回，并且它工作正常。

[BindRequired]
public class EmployeeViewModel
{
   other properties....
   public IEnumerable<ContactDetailViewModel> EmployeeContact { get; set; }
}

[BindRequired]
public class ContactDetailViewModel
{
   // I use this as my indexer for dynamic elements
   public string RecordId { get; set; } = Guid.NewGuid().ToString();

   public string Telephone { get; set; }

   public string EmailAddress { get; set; }

   public string ContactDescription { get; set; }
}

使用以下内容将初始联系人详细信息添加到主视图中，请按照此链接

[Route("[action]", Name = "BlankEmployeeContactDetail"), HttpGet("AddBlankContactDetail")]
public PartialViewResult AddBlankContactDetail()
{
            return PartialView("_ContactInformation", new     ContactDetailViewModel());
}

下载主视图和部分视图cshtml文件。还值得一提的是，当我包含这个局部视图时，模型绑定对于所有其他属性都失败了，但是当我将它注释掉时它会起作用。我很困惑，非常感谢你能帮助我的任何帮助。

https://1drv.ms/u/s!AkRSHVUtFlKhuHaxH96Ik4ineATE

这是我试图将发布的数据绑定到的控制器操作方法：

<section id="widget-grid" class="">
   <div class="row contactContainer">
     @{ await Html.RenderPartialAsync("_ContactInformation", new ContactDetailViewModel()); }
   </div>
</section>

Answer 1

为了绑定，输入名称很多遵循映射到您绑定到的内容的特定约定。虽然你的问题不清楚，我最好的猜测是你试图最终绑定到

[Route("[action]"), HttpPost, AllowAnonymous, ValidateAntiForgeryToken]
        public IActionResult Register([FromForm] EmployeeViewModel model, [FromQuery] string returnUrl = null)
{
    if (ModelState.IsValid)
    {

    }

    return View(model);
}

的一个实例，这意味着你的联系信息输入需要像：EmployeeViewModel这样的名字，但当你传递一个EmployeeContact[0].Telephone的实例作为部分视图的“模型”，名称将只是ContactDetailViewModel，更糟糕的是，这些相同的名称将一遍又一遍地重复，即您创建的每个联系人信息集都将有一个名为Telephone的输入。

无论长短，您都需要整个模型的上下文来生成正确的输入名称。你有几个选择。

由于您是通过AJAX请求检索字段集，因此可以传递“前缀”以与该请求一起使用。换句话说，您可以跟踪索引值，计算您添加的这些部分的数量，然后发送新部分的请求

Telephone

然后，在您的局部视图中：

prefix: 'EmployeeContact[' + (i + 1) + ']',

这有点hacky，老实说可能很容易出错。更好的选择是采取完全不同的方法。而不是回调以获取局部视图，只需将其定义为模板一次：

@{ await Html.RenderPartialAsync("_ContactInformation", new ContactDetailViewModel(), new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = ViewBag.Prefix } } ); }

然后，使用像Vue，React，Angular等库，您可以设置一个绑定到特定JavaScript数组的“foreach”结构，该数组使用此模板来呈现该数组中的项目。然后，添加一组新输入就像向数组中添加新项一样简单。您将不得不做一些工作来根据数组中项的索引自定义输入名称，但所有这些客户端框架都有办法做到这一点。这样做的另一个好处就是每次要添加新节时都不必发出AJAX请求。