ASP.NET MVC 模型在编辑器模板中绑定 IList

Question

我正在尝试绑定属于较大视图模型一部分的列表，而无需借助自定义模型绑定程序。当我使用编辑器模板构建输入列表时，生成的名称的格式不正确，无法让默认活页夹正常工作。

而不是像我期望的那样 Items[3].Id 是 Items.[3].Id。如果我在没有编辑器模板的情况下构建列表，它将按预期工作。

我是否做了一些明显错误的事情，或者这只是 Html.Hidden 和 Html.TextBox 的怪癖？

public class ItemWrapper
{
  [UIHint("ItemList")]
  public IList<Item> Items { get; set; }
}

public class Item
{
  public Guid Id { get; set; }
  public string Name { get; set; }
  public int Value { get; set; }
}

Index.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

  <h2>Index</h2>

  <% using(Html.BeginForm()) 
  {%> 
    <%:Html.EditorFor(m => m.Items) %>
  <%}%>
</asp:Content>

ItemList.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IList<Mvc2Test.Models.Item>>" %>

<h4>Asset Class Allocation</h4>
<% if(Model.Count > 0) { %>
<table>
  <tbody>
    <% for(int i = 0; i < Model.Count; i++) 
    {%>
      <tr>
        <td><%: Model[i].Name%></td>
        <td>
          <%: Html.HiddenFor(m => m[i].Id) %>
          <%: Html.TextBoxFor(m => m[i].Value) %>
        </td>
      </tr>
    <%}%>
  </tbody>
</table>
<%
}%>

输出

<tr>
  <td>Item 4</td>
  <td>
    <input id="Items__3__Id" name="Items.[3].Id" type="hidden" value="f52a1f57-fca8-4bc5-a746-ee0cef4e05c2" />
    <input id="Items__3__Value" name="Items.[3].Value" type="text" value="40" />
  </td>
</tr>

编辑（操作方法）

public ActionResult Test()
{
  return View(
    new ItemWrapper
    {
      Items = new List<Item>
      {
        { new Item { Id = Guid.NewGuid(), Name = "Item 1", Value = 10 } },
        { new Item { Id = Guid.NewGuid(), Name = "Item 2", Value = 20 } },
        { new Item { Id = Guid.NewGuid(), Name = "Item 3", Value = 30 } },
        { new Item { Id = Guid.NewGuid(), Name = "Item 4", Value = 40 } }
      }
    });
}

编辑#2

HttpPost 操作

[HttpPost]
public ActionResult Test(ItemWrapper w)
{
    if(w.Items == null)
        Response.Write("Items was null");
    else
        Response.Write("Items found " + w.Items.Count.ToString());
    return null;
}

Index.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h4>Does Not Work</h4>
<% using(Html.BeginForm("Test", "Home")) 
{%> 
        <%:Html.EditorFor(m => m.Items) %>
        <input type="submit" value-"Go" />
<%}%>

<h4>Does Work</h4>
        <% using(Html.BeginForm("Test", "Home")) 
        {%> 
    <table>
        <tbody>
            <% for(int i = 0; i < Model.Items.Count; i++) 
            {%>
            <tr>
                <td><%: Model.Items[i].Name%></td>
                <td>
                    <%: Html.HiddenFor(m => Model.Items[i].Id) %>
                    <%: Html.TextBoxFor(m => Model.Items[i].Value) %>
                </td>
            </tr>
            <%}%>
        </tbody>
    </table>
             <input type="submit" value-"Go" />
        <%}%>

</asp:Content>

Answer 1

我已经理解你的问题了，我也可能有一个解决方案:)！

首先，让我向您解释一下我通过检查 框架的源代码 学到的东西（检查总是一个好主意开源项目的源代码，以更好地理解某些事物的工作原理）。

1-) 当使用简单强类型 html 帮助器时（即除 EditorForHtml.xxxFor(...) 方法） strong> 和 DisplayFor），在定义要渲染的模型属性的 lambda 表达式中，生成的 html 元素的名称等于“model=>”后面的任何字符串，减去“=>”之前的内容，也就是说：

• 字符串“model”（如果模型是集合
• ）或否则字符串“model.”（注意末尾的“.”）。

因此，例如这个：

<%: Html.TextBoxFor( m=>m.OneProperty.OneNestedProperty)%>

将生成这个 html 输出：

<input type="text" name="OneProperty.OneNestedProperty" ../>

而这个：

<%: Html.TextBoxFor( m=>m[0].OneProperty.OneNestedProperty)%>

将生成这个：

<input type="text" name="[0].OneProperty.OneNestedProperty" ../>

==>这部分解释了为什么在使用 EditorFor 时会得到这个“奇怪”的 html 输出。

2-) 当使用复杂强类型帮助器（EditorFor 和 DisplayFor）时，相同的先前规则将应用于关联的分部视图（ItemList .ascx 在你的情况下），并且此外，所有生成的 html 元素都将以“==>”之后的内容前缀，如中所述1-)。

这里的前缀是“Items.”，因为您的类型化视图 (Index.aspx) 中有这个：

<%:Html.EditorFor(m => m.Items) %>

==>这完全解释了输出，以及为什么默认活页夹不再适用于您的项目列表

解决方案是分解[HttpPost]中的ItemWrapper参数方法，进入他的属性，然后将绑定属性与每个复杂属性的前缀参数一起使用，如下所示：

    [HttpPost]
    public string Index(string foo,[Bind(Prefix = "Items.")]IList<Item> items)
    {
        return "Hello";
    }

（假设 ItemWrapper 也有一个名为 Foo 的字符串类型的简单属性）

为了避免冲突，在 post 方法中列出属性时，我强烈建议您根据每个属性的名称来命名您的参数（无论是案例）就像我一样。

希望这会有所帮助！

Answer 2

一个更懒惰的解决方案是使用 jQuery 来“修复”此类实例。
只需在页面（或部分页面）加载后运行以下函数：

function makeHiddenInputBindable() {
    $('input[type="hidden"]').each(
        function (i) {
            $(this).attr('name', function () {
                return this.name.replace(/\.\[/g, "[");
            })
        }
    );
}