Блог

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

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

 <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 свойства collection в вашей модели. Единственное требование — соблюдать соглашение об именовании: оно должно быть расположено в ~/Views/Shared/EditorTemplates папке и должно быть названо в соответствии с типом элемента коллекции. Так, например, если свойство равно IEnumerable<CustomerViewModel> , шаблон редактора должен иметь имя CustomerViewModel.cshtml и, очевидно, быть строго типизированным для CustomerViewModel .

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

Используйте for цикл вместо foreach loop в вашем основном представлении.

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

Вам нужно будет настроить это, чтобы использовать a List<Customer> или an Customer[] .