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>