我以前使用过带有静态值的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">   Creating a world wide network, bringing people together by not having any distinction by race, caste or religion?</option>
<option value="FL">   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">   Others</option>
<option value="OfBT" disabled>Social Service</option> <!-- Disabled Header -->
<option value="Others">   Helping the old folks get a place to stay?</option>
</select>
我希望动态地完成同样的操作,我在MVC架构中的操作的视图页面中使用@Html.DropDownListFor。
我使用的表格结构如下。摘要属于一个集合,我看到的标题将是集合名称。属于该集合名称下的实体列表将位于该标头下。集合名称/标头将保持禁用状态,仅用于说明。可以在下拉列表中选择/启用与该集合名称相对应的实体。我使用的是MVC 4架构。
数据库表结构的图像
上面描述的表格结构的下拉列表屏幕截图
您可以这样做:
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>
最后,我得到了我想要的自定义下拉列表。:)