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

Question

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

我的主要观点如下：

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

在我CustomerData视图（大大简化）：

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

这一切都完美的作品：我可以张贴到我UpdateCustomer操作方法中，模型对象被绑定，返回的部分视图返回给客户端。

但是，当我有三个客户，这将呈现在我的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); 
} 

Answer 1

使用for循环，而不是foreach循环在你的主视图。

@for (var i = 0; i < Model.Customers.Count; i++) 
{ 
    <h3><a href="#">@customer.Name</a></h3> 
    <div>@{ Html.RenderPartial("CustomerData", Model.Customers[i]); }</div> 
} 

你将不得不调整这使用List<Customer>或Customer[]。

Answer 2

相反的观点写丑的循环：

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

使用的编辑器模板：

<div id="accordionKlanten"> 
    @Html.EditorFor(x => x.Customers) 
</div> 

，并在相应的编辑器模板（~/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> 
... 

现在编辑器模板将自动执行，以供eac使用您的模型上的Customers集合属性的h元素。唯一的要求是遵守命名惯例：它应该位于~/Views/Shared/EditorTemplates文件夹中，并且应该将其命名为收集项目的类型。因此，例如，如果属性为IEnumerable<CustomerViewModel>，则编辑器模板应该被命名为CustomerViewModel.cshtml，并且显然可以强制输入为CustomerViewModel。

就是这样。现在不仅你已经清理了你的视图，而且还会使用专有名称。