Генерация различных идентификаторов клиентов в ASP.NET MVC3 при повторении списка элементов

Question

У меня есть представление ASP.NET MVC3 Razor, которое отображает редакторы для списка клиентов в аккордеоне jQuery UI. На данный момент все идентификаторы на стороне клиента для похожих свойств клиентов одинаковы в отображаемом 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 не является уникальным идентификатором.

Есть ли способ сказать велению 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

Вместо записи некрасивых циклов в представлении:

<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>
...

Теперь шаблон редактора Customer будет автоматически выполняться для каждого элемента свойства коллекции Customers в вашей модели.Единственное требование - соблюдать соглашение об именах: оно должно находиться в папке ~/Views/Shared/EditorTemplates и называться как тип элемента коллекции.Так, например, если свойство имеет значение IEnumerable<CustomerViewModel>, шаблон редактора должен называться CustomerViewModel.cshtml и, очевидно, иметь строгую типизацию CustomerViewModel.

Вот и все.Теперь вы не только очистите свой взгляд, но и будете использовать собственные имена.

Answer 2

Используйте цикл 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[].