Question

我有一个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>

在我的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

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

<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[]。

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

2 个答案: