c# - ASP.NET MVC - 比 For 循环和部分 View 更好的允许子对象编辑的 UX 方法

Question

我有一个具有数字属性的联系人对象，包括一个地址列表的子对象。

public class Contact
{ 
  public int? Id { get; set; }
  public string Name { get; set; }
  public IReadOnlyList<IAddress> Addresses
  {
      [Lazy Load Code to populate and return list]
  } 
  [...]
}

我想允许用户编辑地址而不必编辑(或发布)整个联系人对象。目前在 UI 中，我列出了地址，每个地址旁边都有一个编辑按钮:

我使用的是作为 Bootstrap3 一部分的模态语法，并且隐藏了包含表单和字段的 DIV，以编辑地址。当用户单击编辑时，会出现一个模态窗口，允许用户编辑地址。模型绑定(bind)和验证在此表单中工作。

它工作得很好，但我在实现过程中遇到了一些潜在问题。我想对 Address 对象使用内置验证和模型绑定(bind)，但我不想回发整个对象只是为了编辑一个地址。

所以我最终不得不创建一个 for 循环来写出隐藏的 DIV，调用局部 View 并将地址作为模型传递:

@for (int i = 0; i < Model.Addresses.Count; i++)
{
        address = (Address)Model.Addresses[i];
        @Html.Partial("_AddressModal", address);
}

不幸的副作用是模型绑定(bind)无法唯一标识将 ModelState 应用到哪个地址，因此模型绑定(bind)将它应用于隐藏 DIV 中的所有地址，而不是更新的地址。这是因为它们具有完全相同的属性名称。

我有一个解决方法，它是 earlier question 的一部分.基本上它不会写入 ModelState 除非对象无效。对于无效场景，我不显示基本上隐藏问题的地址列表。否则每个编辑按钮都会显示相同的表单内容。

我想知道是否有更好的 UX 方法允许用户编辑列表中的子地址之一？

我的目标是找到一种使用 ASP.NET MVC 的更好方法:

1. 遵循 PRG(后重定向获取)模式
2. 不要重定向到单独的页面/ View 进行编辑，这会迫使用户再次导航回联系人编辑表单
3. 避免因拦截器而出现弹出窗口
4. 该解决方案允许对地址对象使用模型绑定(bind)和验证

Answer 1

你想要的是:

1 联系人表格每个地址的另一种形式

在您的 Controller 中，您将有一个需要联系人作为参数(没有地址)的操作和另一个需要地址的操作。

样板代码:

    [HttpPost]
    public RedirectToRouteResult EditAddress(int id, ContactAddressBindingModel address) {
        // ...
    }

    [HttpPost]
    public RedirectToRouteResult EditContact(int id, ContactBindingModel contact)
    {
        // ...
    }

    public class ContactViewModel : ContactBindingModel
    {
        public IReadOnlyList<IAddress> Addresses { // ...}
    }
    public class ContactBindingModel
    {
        public int? Id { get; set; }
        public string Name { get; set; }
    }
    public class ContactAddressBindingModel : IAddress
    {
        public int? Id { get; set; }
        public string City { get; set; }
        public string Country { get; set; }

    }

在 View 中:

<form action="EditContact">
<!-- contacts inputs etc -->
</form>

// in razor you can do EditorFor(m => m.Addresses) instead of foreach
// and have partialview, or whatever you like.

@foreach (Model.Addresses) { 
<form action="EditAddress">
<!-- address inputs etc -->
</form>
}