引导标签+下拉选择基于模型值项 [英] Bootstrap tabs + Dropdown selected item based on model value

问题描述

我有一个（可能是简单的）问题。
我有一个很艰难的时期解释正是我试图做的。

I have a (probably simple) problem. I have a really hard time explaining what exactly I'm trying to do.

我有一个页面循环通过项目的列表和创建的每个项目一个新的标签。
即时通讯使用引导标签
（这部作品）
我知道这是可怕的MVC - >但即时通讯相当新的Web开发 - 这就是为什么我觉得像在游泳池大气压的深水IM

I have a page looping through a list of items and creating a new tab for each item. Im using Bootstrap tabs (this works) I know this is horrible MVC -> but im fairly new to web development - which is why i feel like im in the deep end of the pool 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...

在每个选项卡，我有一些文本框和一些其他的东西，一个DropDownList这基本上是别的东西的选择。下拉看起来像下面。

In each tab, I have some textboxes and some other stuff AND a dropdownlist which basically is a selector for something else. the Dropdown looks like below.

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

我的问题;

根据模型值下拉列表没有选择正确的值。

The dropdown does not select the correct value based on the model value.

在此先感谢..

推荐答案

渲染你收集于的foreach 循环，你正在做会给你的控制重名，因此，你将无法回发并绑定到集合。您可以通过使用为循环或使用自定义的 EditorTemplate 正确处理这个问题。不幸的是 @ Html.DropDownListFor（）不正确的服务器操作以查看在循环中绑定（<一个href=\"http://stackoverflow.com/questions/26742155/dropdownlistfor-will-not-show-the-correct-selection/26752086#26752086\">refer这个答案），所以你的情况，你需要使用 EditorTemplate

Rendering you collection in a foreach loop as you are doing will give your controls duplicate names and therefore you will not be able to post back and bind to the collection. Your can handle this correctly by using a for loop or using a custom EditorTemplate. Unfortunately @Html.DropDownListFor() does not work correctly for server to view binding in a loop (refer this answer), so in your case, you need to use an EditorTemplate

您正在生成您的选择也并没有太大的意义，并表示要创建一个新的的SelectList 与每个迭代的方式。这应该在控制器中创建并作为或通过 ViewBag 如下：

The way you are generating your options also does not make much sense and means you are creating a new SelectList with each iteration. This should be created in the controller and passed as a property in your view model or via ViewBag as follows

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

假设属性项目是typ​​eof运算项目包含属性键入然后，创建一个 EditorTemplate 在查看/共享/ EditorTemplates

Assuming property Items is typeof Item which contains property Type then, create an EditorTemplate in Views/Shared/EditorTemplates

Item.cshtml

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 ，将呈现一个＆LT;选择＆GT; 每个项目这是正确命名，并且可以在后背部的约束。

This passes the SelectList to the EditorTemplate and will render a <select> for each Item which are correctly named and can be bound on post back.

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

如果属性的值键入是日历，那么第二个选项将在视图中选择;如果电子邮件，那么第三个选项被选中;否则第（标签）选项将被选中。

If the value of property Type is "Calendar", then the second option will be selected in the view; if its "Email", then the third option will be selected; otherwise the first (label) option will be selected.

这篇关于引导标签+下拉选择基于模型值项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！