重复项目列表时,在ASP.NET MVC3中生成不同的客户端ID

Ron*_*erg 2 asp.net-mvc razor asp.net-mvc-3

我有一个ASP.NET MVC3 Razor视图,它为jQuery UI手风琴中的客户列表呈现编辑器.目前,在呈现的html中,类似客户属性的所有客户端ID都是相同的.出于显而易见的原因,我想改变这一点.

我的主要观点如下:

<div id="accordionKlanten">
@foreach (var customer in Model.Customers)
{
    <h3><a href="#">@customer.Name</a></h3>
    <div>@{ Html.RenderPartial("CustomerData", customer); }</div>
}
</div>
Run Code Online (Sandbox Code Playgroud)

在我CustomerData看来(大大简化):

@using (Ajax.BeginForm("UpdateCustomer", ajaxOptions))
{
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)
    <input type="submit" value="Opslaan" />
}
Run Code Online (Sandbox Code Playgroud)

这一切都很完美:我可以发布到我的UpdateCustomeraction方法,绑定模型对象并返回一个部分视图,该视图将呈现给客户端.

但是,当我有三个客户时,这会在我的html中呈现三个输入字段id="Name".出现问题的一个原因是它<label for="Name">...</label>不起作用,因为Name它不是唯一的id.

有没有办法告诉ASP.NET MVC3渲染不同id的(虽然保持name属性完整,因为这些属性用于绑定到模型)?

为了完整起见,这里涉及两种行动方法:

// Returns view that renders editor for each customer.
public ActionResult Index()
{
    var customers = _customerService.GetCustomers();
    return View(new CustomersViewModel { Customers = customers });
}

// Updates a customer and returns a partial view.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateCustomer(CustomerDto customer)
{
    // Update customer in database.
    return PartialView("CustomerData", customer);
}
Run Code Online (Sandbox Code Playgroud)

Dar*_*rov 7

而不是在视图中编写丑陋的循环:

<div id="accordionKlanten">
@foreach (var customer in Model.Customers)
{
    <h3><a href="#">@customer.Name</a></h3>
    <div>@{ Html.RenderPartial("CustomerData", customer); }</div>
}
</div>
Run Code Online (Sandbox Code Playgroud)

使用编辑器模板:

<div id="accordionKlanten">
    @Html.EditorFor(x => x.Customers)
</div>
Run Code Online (Sandbox Code Playgroud)

并在相应的编辑器模板(~/Views/Shared/EditorTemplates/Customer.cshtml)中:

@model Customer
<h3>
    <a href="#">@customer.Name</a>
</h3>
<div>
    @Html.EditorFor(x => x.FirstName)
</div>
<div>
    @Html.EditorFor(x => x.LastName)
</div>
...
Run Code Online (Sandbox Code Playgroud)

现在,Customer将为Customers模型上的collection属性的每个元素自动执行编辑器模板.唯一的要求是遵守命名约定:它应该位于~/Views/Shared/EditorTemplates文件夹中,并且应该将其命名为集合项的类型.因此,例如,如果属性是IEnumerable<CustomerViewModel>,则应该命名编辑器模板,CustomerViewModel.cshtml并且显然是强类型的CustomerViewModel.

就这样.现在,您不仅要清理视图,还要使用正确的名称.