MVC Razor视图：如何在模型中呈现List <Task>的文本框列表？

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视图，我想呈现两个文本框为每个Tasks在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<>在发布后从控制器中访问文本框值？

谢谢

编辑： 我只是保留一行进行测试。这是我在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"不奇怪。这正是输入的命名方式，以便模型绑定程序在POST操作中取回值。有关处理列表和字典时默认模型联编程序使用的有线格式，请参见此博客文章。

话虽如此，我建议您使用编辑器模板=>而不是在视图中编写这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
    ...
}