在MVC中有一个自定义的Html.DropDownListFor，几乎没有禁用/启用实体

本文关键字：几乎没有 实体 启用 DropDownListFor MVC 有一个 自定义 Html | 更新日期: 2023-09-27 18:21:30

我以前使用过带有静态值的dropdownlist，并且能够手动禁用列表中的某些项（因为我想要每组项的标题）。一旦我从数据库中获得列表，我希望动态地做同样的事情。

  • 期待着为数据库中的列表提供标题功能
  • 标题和列表将从数据库中获得

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

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

我使用的表格结构如下。摘要属于一个集合，我看到的标题将是集合名称。属于该集合名称下的实体列表将位于该标头下。集合名称/标头将保持禁用状态，仅用于说明。可以在下拉列表中选择/启用与该集合名称相对应的实体。我使用的是MVC 4架构。

数据库表结构的图像

上面描述的表格结构的下拉列表屏幕截图

在MVC中有一个自定义的Html.DropDownListFor，几乎没有禁用/启用实体

您可以这样做：

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>

最后，我得到了我想要的自定义下拉列表。：）

相关文章：