引导选项卡+基于模型值的下拉所选项目

Question

我有一个（可能很简单）问题。 我很难解释我到底想要做什么。

我有一个页面循环遍历项目列表并为每个项目创建一个新选项卡。 我正在使用引导选项卡 （这行得通） 我知道这是可怕的 MVC -> 但我对 Web 开发相当陌生 - 这就是为什么我觉得我在池 atm 的深处。

  @foreach (var item in Model.Items)
        {
            <li role="presentation">
                <a href="#@item.EndDate.ToString("M").Replace(" ", "")" aria-controls="@item.EndDate.ToString("M").Replace(" ", "")" role="tab" data-toggle="tab">@item.EndDate.ToString("d")</a>
            </li>
        }
    @using (Html.BeginForm())
    {
    <div class="tab-content col-md-10">

        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        @foreach (var item in Model.Items)
        {
            <div role="tab-pane" class="tab-pane" id="@item.EndDate.ToString("M").Replace(" ", "")">
                <div class="col-md-5">
                    <div>
                        @Html.LabelFor(mx => item.Assignment)
                    </div>
                   etc...

在每个选项卡中，我都有一些文本框和一些其他内容以及一个下拉列表，它基本上是其他内容的选择器。下拉菜单如下所示。

<div>
   @{
        var listItems = new List<ListItem> { new ListItem { Text = "Calendar", Value = "Calendar" }, new ListItem { Text = "Email", Value = "Email" } };
    }
    @Html.DropDownListFor(x => item.Type, new SelectList(listItems), "-- Select Type --", new { @id = item.ItemId +"_TypeSelector", @class="TypeSelector" })
    @Html.ValidationMessageFor(x => item.Type)
</div>

我的问题；

下拉菜单没有根据模型值选择正确的值。

提前谢谢..

Answer 1

在foreach 循环中呈现您正在执行的操作将使您的控件具有重复的名称，因此您将无法回发并绑定到该集合。您可以通过使用for 循环或使用自定义EditorTemplate 来正确处理此问题。不幸的是，@Html.DropDownListFor() 无法正常工作，服务器无法在循环中查看绑定 (refer this answer)，因此在您的情况下，您需要使用 EditorTemplate

您生成选项的方式也没有多大意义，这意味着您每次迭代都会创建一个新的SelectList。这应该在控制器中创建并作为视图模型中的属性或通过ViewBag 传递，如下所示

List<string> items = new List<string>(){ "Calendar", "Email" };
ViewBag.ItemList = new SelectList(items);

假设属性 Items 是 typeof Item 其中包含属性 Type 然后，在 Views/Shared/EditorTemplates 中创建一个 EditorTemplate

Item.cshtml

@model Item
<div role="tab-pane" class="tab-pane">
  <div class="col-md-5">
    <div>
      @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["ItemList"]), "- Select Type -", new { @class="TypeSelector" })
      @Html.ValidationMessageFor(m => m.Type)
    </div>
    // other properties of Item as required
  <div>
</div>

在主视图中

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(true)
  <div class="tab-content col-md-10">
    @EditorFor(m => m.Items, new { ItemList = ViewBag.ItemList })
  </div>
}

这会将SelectList 传递给EditorTemplate，并将为每个Item 呈现一个<select>，这些Item 被正确命名并且可以在回发时绑定。

<select name="Items[0].Type" id="Items_0__Type" class="typeselector">
<select name="Items[1].Type" id="Items_1__Type" class="typeselector">

如果属性Type的值为"Calendar"，则视图中会选择第二个选项；如果是"Email"，则选择第三个选项；否则将选择第一个（标签）选项。