Select ASP.NET 核心 MVC 中的标记助手
Select Tag Helper in ASP.NET Core MVC
我需要一些关于 ASP.NET Core 中的 select 标签助手的帮助。
我有一个员工列表，我正尝试将其绑定到 select 标签助手。我的员工处于 List<Employee> EmployeesList 和 selected 值将进入 EmployeeId 属性。我的视图模型如下所示：
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<Employee> EmployeesList {get; set; }
}
我的员工 class 长这样：
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
}
我的问题是如何告诉我的 select 标签助手在下拉列表中显示 FullName 时使用 Id 作为值？
<select asp-for="EmployeeId" asp-items="???" />
非常感谢您对此提供帮助。谢谢。
我为此创建了一个接口和一个 <options> 标签助手。因此，每次我必须填充 <select> 控件时，我不必将 IEnumerable<T> 项转换为 IEnumerable<SelectListItem>。
而且我觉得效果很好...
用法是这样的：
<select asp-for="EmployeeId">
<option value="">Please select...</option>
<options asp-items="@Model.EmployeesList" />
</select>
要使其与标签助手一起使用，您必须在 class:
中实现该接口
public class Employee : IIntegerListItem
{
public int Id { get; set; }
public string FullName { get; set; }
public int Value { return Id; }
public string Text{ return FullName ; }
}
这些是所需的代码：
界面：
public interface IIntegerListItem
{
int Value { get; }
string Text { get; }
}
<options> 标签助手：
[HtmlTargetElement("options", Attributes = "asp-items")]
public class OptionsTagHelper : TagHelper
{
public OptionsTagHelper(IHtmlGenerator generator)
{
Generator = generator;
}
[HtmlAttributeNotBound]
public IHtmlGenerator Generator { get; set; }
[HtmlAttributeName("asp-items")]
public object Items { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.SuppressOutput();
// Is this <options /> element a child of a <select/> element the SelectTagHelper targeted?
object formDataEntry;
context.Items.TryGetValue(typeof(SelectTagHelper), out formDataEntry);
var selectedValues = formDataEntry as ICollection<string>;
var encodedValues = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
if (selectedValues != null && selectedValues.Count != 0)
{
foreach (var selectedValue in selectedValues)
{
encodedValues.Add(Generator.Encode(selectedValue));
}
}
IEnumerable<SelectListItem> items = null;
if (Items != null)
{
if (Items is IEnumerable)
{
var enumerable = Items as IEnumerable;
if (Items is IEnumerable<SelectListItem>)
items = Items as IEnumerable<SelectListItem>;
else if (Items is IEnumerable<IIntegerListItem>)
items = ((IEnumerable<IIntegerListItem>)Items).Select(x => new SelectListItem() { Selected = false, Value = ((IIntegerListItem)x).Value.ToString(), Text = ((IIntegerListItem)x).Text });
else
throw new InvalidOperationException(string.Format("The {2} was unable to provide metadata about '{1}' expression value '{3}' for <options>.",
"<options>",
"ForAttributeName",
nameof(IModelMetadataProvider),
"For.Name"));
}
else
{
throw new InvalidOperationException("Invalid items for <options>");
}
foreach (var item in items)
{
bool selected = (selectedValues != null && selectedValues.Contains(item.Value)) || encodedValues.Contains(item.Value);
var selectedAttr = selected ? "selected='selected'" : "";
if (item.Value != null)
output.Content.AppendHtml($"<option value='{item.Value}' {selectedAttr}>{item.Text}</option>");
else
output.Content.AppendHtml($"<option>{item.Text}</option>");
}
}
}
}
可能有一些错别字，但我认为目的很明确。我不得不稍微编辑一下。
使用 Select 标签助手渲染 SELECT 元素
在您的 GET 操作中，创建视图模型的对象，加载 EmployeeList 集合 属性 并将其发送到视图。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
然后在您的创建视图中，从 EmployeeList 属性 创建一个新的 SelectList 对象并将其作为值传递给 asp-items 属性。
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<select asp-for="EmployeeId"
asp-items="@(new SelectList(Model.EmployeesList, nameof(Employee.Id), nameof(Employee.FullName)))">
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
以及您的 HttpPost 操作方法来接受提交的表单数据。
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
或
如果您的视图模型具有 List<SelectListItem> 作为下拉项的 属性。
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
在你的行动中，
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(vm);
}
并且在视图中，可以直接使用Employees 属性 为asp-items.
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<label>Comments</label>
<input type="text" asp-for="Comments"/>
<label>Lucky Employee</label>
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
class SelectListItem 属于 Microsoft.AspNet.Mvc.Rendering 命名空间。
确保您对 select 元素使用明确的结束标记。如果您使用自闭合标签方法，标签助手将呈现一个空的 SELECT 元素！
下面的方法行不通
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
但这会起作用。
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
使用entity framework
从数据库table获取数据
以上示例使用硬编码项作为选项。所以我想我会添加一些示例代码来使用 Entity framework 获取数据，因为很多人都使用它。
假设您的 DbContext 对象有一个名为 Employees 的 属性，其类型为 DbSet<Employee>，其中 Employee 实体 class 有一个 Id 和 Name 属性 这样的
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
您可以使用 LINQ 查询获取员工，并在 LINQ 表达式中使用 Select 方法为每个员工创建包含 SelectListItem 个对象的列表。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = context.Employees
.Select(a => new SelectListItem() {
Value = a.Id.ToString(),
Text = a.Name
})
.ToList();
return View(vm);
}
假设 context 是您的数据库上下文对象。查看代码同上
使用Select列表
有些人更喜欢使用 SelectList class 来保存呈现选项所需的项目。
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
现在在您的 GET 操作中，您可以使用 SelectList 构造函数来填充视图模型的 Employees 属性。确保您指定了 dataValueField 和 dataTextField 参数。您可以静态地使用 nameof expression 到 link 字段名称。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(), nameof(Employee.Id), nameof(Employee.FirstName));
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
我在这里调用 GetEmployees 方法来获取 Employee 对象的列表，每个对象都有一个 Id 和 FirstName 属性 我将这些属性用作 DataValueField 和 DataTextField 我们创建的 SelectList 对象。您可以将硬编码列表更改为从数据库读取数据的代码 table.
视图代码将相同。
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
从字符串列表中呈现 SELECT 元素。
有时您可能希望从字符串列表中呈现 select 元素。在这种情况下，您可以使用仅采用 IEnumerable<T>
的 SelectList 构造函数
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
视图代码将相同。
设置 selected 选项
有时，您可能希望将一个选项设置为 SELECT 元素中的默认选项（例如，在编辑屏幕中，您希望加载先前保存的选项值）。为此，您可以简单地将 EmployeeId 属性 值设置为您想要 selected 的选项的值。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeId = 12; // Here you set the value
return View(vm);
}
这将在呈现页面时 select select 元素中的选项 Tom。
多个 select 下拉列表
如果你想呈现一个多 select 下拉列表，你可以简单地将你用于视图中 asp-for 属性的视图模型 属性 更改为数组类型。
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
这将为具有 multiple 属性的 select 元素呈现 HTML 标记，这将允许用户 select 多个选项。
@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
<option>Please select one</option>
<option value="1">Shyju</option>
<option value="2">Sean</option>
</select>
在 multi select
中设置 selected 选项
类似于单个 select，将 EmployeeIds 属性 值设置为您想要的值数组。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeIds= new int[] { 12,13} ;
return View(vm);
}
这将在呈现页面时 select 多 select 元素中的汤姆和杰瑞选项。
使用 ViewBag 传输项目列表
如果您不喜欢保留集合类型 属性 以将选项列表传递给视图，您可以使用动态 ViewBag 来这样做。（这不是我的个人推荐的方法，因为 viewbag 是动态的，您的代码容易出现未捕获的拼写错误)
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
并在视图中
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
使用 ViewBag 传输项目列表并设置 selected 选项
同上。您所要做的就是将 属性（您为其绑定下拉列表）的值设置为您想要 selected 的选项的值。
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Bryan", Value = "2"},
new SelectListItem {Text = "Sean", Value = "3"}
};
vm.EmployeeId = 2; // This will set Bryan as selected
return View(new MyViewModel());
}
并在视图中
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
分组项目
select 标签助手方法支持在下拉列表中对选项进行分组。您所要做的就是在您的操作方法中指定每个 SelectListItem 的 Group 属性 值。
public IActionResult Create()
{
var vm = new MyViewModel();
var group1 = new SelectListGroup { Name = "Dev Team" };
var group2 = new SelectListGroup { Name = "QA Team" };
var employeeList = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
};
vm.Employees = employeeList;
return View(vm);
}
视图代码没有变化。 select 标签助手现在将呈现 2 optgroup 项内的选项。
你也可以使用IHtmlHelper.GetEnumSelectList.
// Summary:
// Returns a select list for the given TEnum.
//
// Type parameters:
// TEnum:
// Type to generate a select list for.
//
// Returns:
// An System.Collections.Generic.IEnumerable`1 containing the select list for the
// given TEnum.
//
// Exceptions:
// T:System.ArgumentException:
// Thrown if TEnum is not an System.Enum or if it has a System.FlagsAttribute.
IEnumerable<SelectListItem> GetEnumSelectList<TEnum>() where TEnum : struct;
您可以将以下代码用于 多个 select:
<select asp-for="EmployeeId" multiple="multiple" asp-items="@ViewBag.Employees">
<option>Please select</option>
</select>
您还可以使用：
<select id="EmployeeId" name="EmployeeId" multiple="multiple" asp-items="@ViewBag.Employees">
<option>Please select</option>
</select>
获取中：
public IActionResult Create()
{
ViewData["Tags"] = new SelectList(_context.Tags, "Id", "Name");
return View();
}
在Post中：
var selectedIds= Request.Form["Tags"];
在视图中：
<label>Tags</label>
<select asp-for="Tags" id="Tags" name="Tags" class="form-control" asp-items="ViewBag.Tags" multiple></select>
我下面的回答没有解决问题，但它与有关。
如果有人使用 enum 而不是 class 模型，就像这个例子：
public enum Counter
{
[Display(Name = "Number 1")]
No1 = 1,
[Display(Name = "Number 2")]
No2 = 2,
[Display(Name = "Number 3")]
No3 = 3
}
和一个属性获取提交时的值：
public int No { get; set; }
在 razor 页面中，您可以使用 Html.GetEnumSelectList<Counter>() 获取枚举属性。
<select asp-for="No" asp-items="@Html.GetEnumSelectList<Counter>()"></select>
它生成以下 HTML:
<select id="No" name="No">
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
</select>
asp-items 需要 SelectListItem class（来自命名空间 Microsoft.AspNetCore.Mvc.Rendering）的一些实例集合，其中包含 Text 和 Value 属性。因此，您可以通过这种方式将您的 Employees 集合转换为必需的 f.e。 employees.Select(e => new SelectListItem(e.FullName, e.Id.ToString())) 并将结果放入 asp-items 属性。
我需要一些关于 ASP.NET Core 中的 select 标签助手的帮助。
我有一个员工列表，我正尝试将其绑定到 select 标签助手。我的员工处于 List<Employee> EmployeesList 和 selected 值将进入 EmployeeId 属性。我的视图模型如下所示：
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<Employee> EmployeesList {get; set; }
}
我的员工 class 长这样：
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
}
我的问题是如何告诉我的 select 标签助手在下拉列表中显示 FullName 时使用 Id 作为值？
<select asp-for="EmployeeId" asp-items="???" />
非常感谢您对此提供帮助。谢谢。
我为此创建了一个接口和一个 <options> 标签助手。因此，每次我必须填充 <select> 控件时，我不必将 IEnumerable<T> 项转换为 IEnumerable<SelectListItem>。
而且我觉得效果很好...
用法是这样的：
<select asp-for="EmployeeId">
<option value="">Please select...</option>
<options asp-items="@Model.EmployeesList" />
</select>
要使其与标签助手一起使用，您必须在 class:
中实现该接口public class Employee : IIntegerListItem
{
public int Id { get; set; }
public string FullName { get; set; }
public int Value { return Id; }
public string Text{ return FullName ; }
}
这些是所需的代码：
界面：
public interface IIntegerListItem
{
int Value { get; }
string Text { get; }
}
<options> 标签助手：
[HtmlTargetElement("options", Attributes = "asp-items")]
public class OptionsTagHelper : TagHelper
{
public OptionsTagHelper(IHtmlGenerator generator)
{
Generator = generator;
}
[HtmlAttributeNotBound]
public IHtmlGenerator Generator { get; set; }
[HtmlAttributeName("asp-items")]
public object Items { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.SuppressOutput();
// Is this <options /> element a child of a <select/> element the SelectTagHelper targeted?
object formDataEntry;
context.Items.TryGetValue(typeof(SelectTagHelper), out formDataEntry);
var selectedValues = formDataEntry as ICollection<string>;
var encodedValues = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
if (selectedValues != null && selectedValues.Count != 0)
{
foreach (var selectedValue in selectedValues)
{
encodedValues.Add(Generator.Encode(selectedValue));
}
}
IEnumerable<SelectListItem> items = null;
if (Items != null)
{
if (Items is IEnumerable)
{
var enumerable = Items as IEnumerable;
if (Items is IEnumerable<SelectListItem>)
items = Items as IEnumerable<SelectListItem>;
else if (Items is IEnumerable<IIntegerListItem>)
items = ((IEnumerable<IIntegerListItem>)Items).Select(x => new SelectListItem() { Selected = false, Value = ((IIntegerListItem)x).Value.ToString(), Text = ((IIntegerListItem)x).Text });
else
throw new InvalidOperationException(string.Format("The {2} was unable to provide metadata about '{1}' expression value '{3}' for <options>.",
"<options>",
"ForAttributeName",
nameof(IModelMetadataProvider),
"For.Name"));
}
else
{
throw new InvalidOperationException("Invalid items for <options>");
}
foreach (var item in items)
{
bool selected = (selectedValues != null && selectedValues.Contains(item.Value)) || encodedValues.Contains(item.Value);
var selectedAttr = selected ? "selected='selected'" : "";
if (item.Value != null)
output.Content.AppendHtml($"<option value='{item.Value}' {selectedAttr}>{item.Text}</option>");
else
output.Content.AppendHtml($"<option>{item.Text}</option>");
}
}
}
}
可能有一些错别字，但我认为目的很明确。我不得不稍微编辑一下。
使用 Select 标签助手渲染 SELECT 元素
在您的 GET 操作中，创建视图模型的对象，加载 EmployeeList 集合 属性 并将其发送到视图。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
然后在您的创建视图中，从 EmployeeList 属性 创建一个新的 SelectList 对象并将其作为值传递给 asp-items 属性。
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<select asp-for="EmployeeId"
asp-items="@(new SelectList(Model.EmployeesList, nameof(Employee.Id), nameof(Employee.FullName)))">
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
以及您的 HttpPost 操作方法来接受提交的表单数据。
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
或
如果您的视图模型具有 List<SelectListItem> 作为下拉项的 属性。
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
在你的行动中，
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(vm);
}
并且在视图中，可以直接使用Employees 属性 为asp-items.
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<label>Comments</label>
<input type="text" asp-for="Comments"/>
<label>Lucky Employee</label>
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
class SelectListItem 属于 Microsoft.AspNet.Mvc.Rendering 命名空间。
确保您对 select 元素使用明确的结束标记。如果您使用自闭合标签方法，标签助手将呈现一个空的 SELECT 元素！
下面的方法行不通
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
但这会起作用。
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
使用entity framework
从数据库table获取数据以上示例使用硬编码项作为选项。所以我想我会添加一些示例代码来使用 Entity framework 获取数据，因为很多人都使用它。
假设您的 DbContext 对象有一个名为 Employees 的 属性，其类型为 DbSet<Employee>，其中 Employee 实体 class 有一个 Id 和 Name 属性 这样的
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
您可以使用 LINQ 查询获取员工，并在 LINQ 表达式中使用 Select 方法为每个员工创建包含 SelectListItem 个对象的列表。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = context.Employees
.Select(a => new SelectListItem() {
Value = a.Id.ToString(),
Text = a.Name
})
.ToList();
return View(vm);
}
假设 context 是您的数据库上下文对象。查看代码同上
使用Select列表
有些人更喜欢使用 SelectList class 来保存呈现选项所需的项目。
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
现在在您的 GET 操作中，您可以使用 SelectList 构造函数来填充视图模型的 Employees 属性。确保您指定了 dataValueField 和 dataTextField 参数。您可以静态地使用 nameof expression 到 link 字段名称。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(), nameof(Employee.Id), nameof(Employee.FirstName));
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
我在这里调用 GetEmployees 方法来获取 Employee 对象的列表，每个对象都有一个 Id 和 FirstName 属性 我将这些属性用作 DataValueField 和 DataTextField 我们创建的 SelectList 对象。您可以将硬编码列表更改为从数据库读取数据的代码 table.
视图代码将相同。
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
从字符串列表中呈现 SELECT 元素。
有时您可能希望从字符串列表中呈现 select 元素。在这种情况下，您可以使用仅采用 IEnumerable<T>
SelectList 构造函数
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
视图代码将相同。
设置 selected 选项
有时，您可能希望将一个选项设置为 SELECT 元素中的默认选项（例如，在编辑屏幕中，您希望加载先前保存的选项值）。为此，您可以简单地将 EmployeeId 属性 值设置为您想要 selected 的选项的值。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeId = 12; // Here you set the value
return View(vm);
}
这将在呈现页面时 select select 元素中的选项 Tom。
多个 select 下拉列表
如果你想呈现一个多 select 下拉列表，你可以简单地将你用于视图中 asp-for 属性的视图模型 属性 更改为数组类型。
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
这将为具有 multiple 属性的 select 元素呈现 HTML 标记，这将允许用户 select 多个选项。
@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
<option>Please select one</option>
<option value="1">Shyju</option>
<option value="2">Sean</option>
</select>
在 multi select
中设置 selected 选项类似于单个 select，将 EmployeeIds 属性 值设置为您想要的值数组。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeIds= new int[] { 12,13} ;
return View(vm);
}
这将在呈现页面时 select 多 select 元素中的汤姆和杰瑞选项。
使用 ViewBag 传输项目列表
如果您不喜欢保留集合类型 属性 以将选项列表传递给视图，您可以使用动态 ViewBag 来这样做。（这不是我的个人推荐的方法，因为 viewbag 是动态的，您的代码容易出现未捕获的拼写错误)
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
并在视图中
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
使用 ViewBag 传输项目列表并设置 selected 选项
同上。您所要做的就是将 属性（您为其绑定下拉列表）的值设置为您想要 selected 的选项的值。
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Bryan", Value = "2"},
new SelectListItem {Text = "Sean", Value = "3"}
};
vm.EmployeeId = 2; // This will set Bryan as selected
return View(new MyViewModel());
}
并在视图中
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
分组项目
select 标签助手方法支持在下拉列表中对选项进行分组。您所要做的就是在您的操作方法中指定每个 SelectListItem 的 Group 属性 值。
public IActionResult Create()
{
var vm = new MyViewModel();
var group1 = new SelectListGroup { Name = "Dev Team" };
var group2 = new SelectListGroup { Name = "QA Team" };
var employeeList = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
};
vm.Employees = employeeList;
return View(vm);
}
视图代码没有变化。 select 标签助手现在将呈现 2 optgroup 项内的选项。
你也可以使用IHtmlHelper.GetEnumSelectList.
// Summary:
// Returns a select list for the given TEnum.
//
// Type parameters:
// TEnum:
// Type to generate a select list for.
//
// Returns:
// An System.Collections.Generic.IEnumerable`1 containing the select list for the
// given TEnum.
//
// Exceptions:
// T:System.ArgumentException:
// Thrown if TEnum is not an System.Enum or if it has a System.FlagsAttribute.
IEnumerable<SelectListItem> GetEnumSelectList<TEnum>() where TEnum : struct;
您可以将以下代码用于 多个 select:
<select asp-for="EmployeeId" multiple="multiple" asp-items="@ViewBag.Employees">
<option>Please select</option>
</select>
您还可以使用：
<select id="EmployeeId" name="EmployeeId" multiple="multiple" asp-items="@ViewBag.Employees">
<option>Please select</option>
</select>
获取中：
public IActionResult Create()
{
ViewData["Tags"] = new SelectList(_context.Tags, "Id", "Name");
return View();
}
在Post中：
var selectedIds= Request.Form["Tags"];
在视图中：
<label>Tags</label>
<select asp-for="Tags" id="Tags" name="Tags" class="form-control" asp-items="ViewBag.Tags" multiple></select>
我下面的回答没有解决问题，但它与有关。
如果有人使用 enum 而不是 class 模型，就像这个例子：
public enum Counter
{
[Display(Name = "Number 1")]
No1 = 1,
[Display(Name = "Number 2")]
No2 = 2,
[Display(Name = "Number 3")]
No3 = 3
}
和一个属性获取提交时的值：
public int No { get; set; }
在 razor 页面中，您可以使用 Html.GetEnumSelectList<Counter>() 获取枚举属性。
<select asp-for="No" asp-items="@Html.GetEnumSelectList<Counter>()"></select>
它生成以下 HTML:
<select id="No" name="No">
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
</select>
asp-items 需要 SelectListItem class（来自命名空间 Microsoft.AspNetCore.Mvc.Rendering）的一些实例集合，其中包含 Text 和 Value 属性。因此，您可以通过这种方式将您的 Employees 集合转换为必需的 f.e。 employees.Select(e => new SelectListItem(e.FullName, e.Id.ToString())) 并将结果放入 asp-items 属性。