Question

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

我有一个页面循环遍历项目列表并为每个项目创建一个新选项卡。我正在使用Bootstrap选项卡（此作品）我知道这是可怕的MVC - ＆gt;但对于网络开发来说，这是一个相当新的东西 - 这就是为什么我觉得我处于游泳池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...

在每个标签中，我有一些文本框和一些其他东西和一个下拉列表，它基本上是其他东西的选择器。 Dropdown如下所示。

<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的类型为Item，其中包含属性Type，请在EditorTemplate

中创建Views/Shared/EditorTemplates

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，并为每个<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"，则会在视图中选择第二个选项;如果是{{1}}，那么将选择第三个选项;否则将选择第一个（标签）选项。

Bootstrap选项卡+根据模型值下拉所选项目

1 个答案: