選擇 Tag Helper

假設你的檢視是強型別的，這樣的檢視模型

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)
{
  //check model.SelectedCategory value
  / /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);
}

渲染多選下拉選單/ ListBox

如果要渲染多選下拉選單，只需將檢視模型屬性（用於檢視中的 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>