在 MVC 中有自定义 Html.DropDownListFor,禁用/启用的实体很少?

Having a custom Html.DropDownListFor in MVC, with few entities disabled/ enabled?

我之前使用过带有静态值的下拉列表,并且能够手动禁用列表中的某些项目(因为我希望每组项目 headers)。一旦我从数据库中获取列表,我希望动态地做同样的事情。

下面是我用来包含此功能的静态代码。

<select class="combobox form-control" id="sel" name="iArea">
  <option value="" disabled selected style="display:none">Select an option</option>
  <option value="" disabled>Health</option>  <!-- Disabled Header -->
  <option value="WP">&nbsp&nbsp Creating a world wide network, bringing people together by not having any distinction by race, caste or religion?</option>
  <option value="FL">&nbsp&nbsp Tracking down loved one's in a crowded or emergency situation at a cost effective manner?</option>
  <!-- Enabled List for a header above -->
  <option value="Others">&nbsp&nbsp Others</option>
  <option value="OfBT" disabled>Social Service</option>  <!-- Disabled Header -->
  <option value="Others">&nbsp&nbsp Helping the old folks get a place to stay?</option>
</select>

我想动态地完成相同的操作,我在 MVC 架构中的操作视图页面中使用了@Html.DropDownListFor。

我使用的table结构如下。摘要属于一个集合,我正在查看的 header 将是集合名称。属于这个集合名称的实体列表将属于 header。 set name/ header 将保持禁用状态,仅用于说明。该集合名称对应的实体可以是下拉列表中的selected/enabled。我正在使用 MVC 4 架构。

Image of Database Table structure

Drop Down List screenshot for the table structure described above

你可以这样做:

IEnumerable<GroupedSelectListItem> item;
item = new List<GroupedSelectListItem> { 
    new GroupedSelectListItem() { Value="volvo", Text="Volvo", GroupName="Swedish Cars", GroupKey="1", Disabled=true },
    new GroupedSelectListItem() { Value="saab", Text="Saab",GroupName="Swedish Cars", GroupKey="1" }, 
    new GroupedSelectListItem() { Value="mercedes", Text="Mercedes", GroupName="German Cars", GroupKey="2" },
    new GroupedSelectListItem() { Value="audi", Text="Audi", GroupName="German Cars", GroupKey="2",Selected=true }};

然后:

@Html.DropDownGroupList("Cars", item, "-- Select Car --", 
            new Dictionary<string, object>() { 
                { "data-val", "true" }, 
                { "data-val-required", "The Car field is required." } 
            })

要得到这样的东西:

<select data-val="true" data-val-required="The Car field is required." id="Cars" name="Cars" class="valid">
        <option value="">-- Select Car --</option>
        <optgroup label="Swedish Cars" value="1" disabled="">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars" value="2">
            <option value="mercedes">Mercedes</option>
            <option selected="selected" value="audi">Audi</option>
        </optgroup>
    </select>

@StephenMuecke,我最终通过循环在 MVC 视图中创建了我的 HTML 代码。但是如果没有你们的指导,我是不可能的,我是一个初学者。我在这里解释了这个概念;列表部分将从数据库中获取。这非常有效,但我想如果下拉列表的数据很多,它可能会影响性能。

控制器中的动作部分

UserData.InnovateSection = new List<DropDownList>{new DropDownList { label = "Health", value = "Creating a world wide network, bringing people together by not having any distinction by race, caste or religion?" },
                        new DropDownList { label = "Health", value = "Tracking down loved one's in a crowded or emergency situation at a cost effective manner?" },
                        new DropDownList { label = "Social Service", value = "Others" }};
                var headers = (from it in UserData.InnovateSection
                               select it.label).Distinct().ToList();
                var headersLength = headers.Count;
                int i = 0, k;
                UserData.Innovate = new System.Text.StringBuilder();
                while (i < headersLength)
                {
                    k = 0;
                    foreach (var item in UserData.InnovateSection)
                    {
                        if (headers[i] == item.label && k == 0)
                        {
                            UserData.Innovate.Append("<optgroup label = " + "\"" + item.label + "\"" + ">");
                            k = 1;
                        }
                        if (headers[i] == item.label)
                        {
                            UserData.Innovate.Append("<option value= " + "\"" + item.value + "\"" + ">" + item.value + "</option>");
                        }

                    }

                    UserData.Innovate.Append("</optgroup>");
                    i++;
                }
                return View(UserData);

正在呈现的视图中的 HTML 代码

<select class="combobox form-control" id="sel" name="IdeaArea">
  <option value="" disabled selected style="display:none">Select an option</option>
     @Html.Raw(@Model.Innovate) <!-- Model created goes inside the Raw tag to convert string to HTML DOM -->
</select>
  

最后,我得到了我正在寻找的自定义下拉菜单。 :)