asp.net-mvc-3 - MVC Razor View : How to render a list of text boxes for a List in the model?

Question

我有一个 List<Task>在我的模型中。此列表包含 2 个任务(比方说)

public List<Task> Tasks { get; set; }

public class Task    {
    public Task()
    {
        Title="";
        Total= 0;
    }

    public string Title{ get; set; }

    public int Total{ get; set; }
}

现在在我的 Razor View 中，我想为每个 Tasks 渲染 2 个文本框在List<Tasks>我的模型。

我没有循环，只是放置了直接的文本框，例如:

@Html.TextBoxFor(m => m.Tasks[0].Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Tasks[0].Total, new { @maxlength = "2"})
<br>
@Html.TextBoxFor(m => m.Tasks[1].Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Tasks[1].Total, new { @maxlength = "2"})

这会很好地呈现表单，但在 FF 中单击提交按钮不会执行任何操作。但是它在 IE9 中发布正常。

查看源代码显示生成的 html 是这样的:

<input id="Tasks_0__Title" maxlength="50" name="Tasks[0].Title" type="text" value="" />
<input data-val="true" data-val-number="The field Total must be a number." data-val-required="The Total field is required." id="Tasks_0__Total" maxlength="2" name="Tasks[0].Total" type="text" value="" /> 

此 HTML 看起来不正确。它有 name="Tasks[0].Total"这看起来很奇怪。

我应该怎么做才能从 List<> 访问文本框值发布后在我的 Controller 中？

谢谢

编辑:我只保留一排进行测试。这是我在 FF 中看到的 html。

<input id="Tasks_0__Title" type="text" value="" name="Tasks[0].Title" maxlength="50">
<input id="Tasks_0__Total" type="text" value="" name="Tasks[0].Total" maxlength="2" data-val-required="The Total field is required." data-val-number="The field Total must be a number." data-val="true">

当我点击提交按钮时，这不会发布。

现在如果我改变 name="Tasks[0].Title" to name="Tasks_0__Title" and name="Tasks_0__Total" 在 FIREBUG 中，它发布得很好。

如果我完全删除名称，它也可以在 FF 中正常发布

Answer 1

您应该使用 Tasks[0].Total 和 Tasks[1].Total 而不是 Items:

@Html.TextBoxFor(m => m.Tasks[0].Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Tasks[0].Total, new { @maxlength = "2"})
<br/>
@Html.TextBoxFor(m => m.Tasks[1].Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Tasks[1].Total, new { @maxlength = "2"})

name="Tasks[0].Total" 并不奇怪。这正是输入应该如何命名，以便模型绑定(bind)器在 POST 操作中取回值。参见 this blog post对于处理列表和字典时默认模型绑定(bind)器使用的有线格式。

话虽如此，我建议您使用编辑器模板 => 而不是在您的 View 中编写这 5 行代码，将它们替换为:

@Html.EditorFor(x => x.Tasks)

然后在相应的编辑器模板 (~/View/Shared/EditorTemplates/Task.cshtml) 中，它将为 Tasks 集合中的每个元素自动呈现:

@model Task
@Html.TextBoxFor(m => m.Title, new { @maxlength = "50"})
@Html.TextBoxFor(m => m.Total, new { @maxlength = "2"})    
<br/>

现在您可以让编辑器模板担心正确的命名约定等......

就您的 POST 操作而言:

[HttpPost]
public ActionResult Foo(MyViewModel model)
{
    // model.Tasks should be correctly bound here
    ...
}