當在項目列表上重複生成時，在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。

就是這樣。現在不僅你已經清理了你的視圖，而且還會使用專有名稱。