在 MVC 中有自定义 Html.DropDownListFor,禁用/启用的实体很少?
Having a custom Html.DropDownListFor in MVC, with few entities disabled/ enabled?
我之前使用过带有静态值的下拉列表,并且能够手动禁用列表中的某些项目(因为我希望每组项目 headers)。一旦我从数据库中获取列表,我希望动态地做同样的事情。
- 期待为数据库中的列表添加 header 功能。
- header 和列表将从数据库中获取。
下面是我用来包含此功能的静态代码。
<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。
我使用的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>
最后,我得到了我正在寻找的自定义下拉菜单。 :)
我之前使用过带有静态值的下拉列表,并且能够手动禁用列表中的某些项目(因为我希望每组项目 headers)。一旦我从数据库中获取列表,我希望动态地做同样的事情。
- 期待为数据库中的列表添加 header 功能。
- header 和列表将从数据库中获取。
下面是我用来包含此功能的静态代码。
<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。
我使用的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>
最后,我得到了我正在寻找的自定义下拉菜单。 :)