asp.net-core 选择标签助手
示例
假设您的视图被强类型化为这样的视图模型
public class CreateProduct { public IEnumerable<SelectListItem> Categories { set; get; } public int SelectedCategory { set; get; } }
在GET操作方法中,您将创建此视图模型的对象,设置Categories属性并将其发送到视图
public IActionResult Create() { var vm = new CreateProduct(); vm.Categories= new List<SelectListItem> { new SelectListItem {Text = "Books", Value = "1"}, new SelectListItem {Text = "Furniture", Value = "2"} }; return View(vm); }
在你看来
@model CreateProduct
<form asp-action="create" asp-controller="Home"> <select asp-for="SelectedCategory" asp-items="@Model.Categories"> <option>Select one</option> </select> <input type="submit"/> </form>
这将呈现以下标记(仅包括表单/字段的相关部分)
<form action="/Home/create" method="post"> <select data-val="true" id="SelectedCategory" name="SelectedCategory"> <option>Select one</option> <option value="1">Shyju</option> <option value="2">Sean</option> </select> <input type="submit"/> </form>
在表单提交中获取选定的下拉值
您可以使用与HttpPost操作方法参数相同的视图模型
[HttpPost] public ActionResult Create(CreateProduct model) { //checkmodel.SelectedCategoryvalue / /to do : return something }
将一个选项设置为选定的选项
如果要将选项设置为选定选项,则只需设置SelectedCategory属性值即可。
public IActionResult Create() { var vm = new CreateProduct(); vm.Categories= new List<SelectListItem> { new SelectListItem {Text = "Books", Value = "1"}, new SelectListItem {Text = "Furniture", Value = "2"}, new SelectListItem {Text = "Music", Value = "3"} }; vm.SelectedCategory= 2; return View(vm); }
呈现多选下拉列表/列表框
如果要呈现多选下拉列表,只需将用于视图属性的视图模型属性更改为asp-for数组类型即可。
public class CreateProduct { public IEnumerable<SelectListItem> Categories { set; get; } public int[] SelectedCategories { set; get; } }
在视图中
@model CreateProduct
<form asp-action="create" asp-controller="Home" > <select asp-for="SelectedCategories" asp-items="@Model.Categories"> <option>Select one</option> </select> <input type="submit"/> </form>
这将生成具有multiple属性的SELECT元素
<form action="/Home/create" method="post"> <select id="SelectedCategories" multiple="multiple" name="SelectedCategories"> <option>Select one</option> <option value="1">Shyju</option> <option value="2">Sean</option> </select> <input type="submit"/> </form>