ASP.NET Core MVC 下拉式選單設定預設值 方式

在 cshtml 檔案中，如果要將 C# 中的資料放入到下拉式選單 select 的 option 中，可以使用 foreach 的方式為下拉式選單填充資料:

    
@{
	var data = new Dictionary<string, string>
	{
		{ "Key1", "Value1" },
		{ "Key2", "Value2" },
		{ "Key3", "Value3" },
	};
}

<select>
	@foreach (var item in data)
	{
		<option value="@item.Key">@item.Value</option>
	}
</select>
    

或是使用 Html Helper:

    
@Html.DropDownList("select_id", new SelectList(data, "Key", "Value"))
    

註：上面的 select 的 id 和 name 會被設定為 select_id

那，要如何設定預設值呢? 使用 Html Helper 可以很簡單的在後面加上字串，就會是預設值:

    
@Html.DropDownList("select_id", new SelectList(data, "Key", "Value"), "請選擇")
    

呈現的 HTML 如下:

    
<select id="select_id" name="select_id">
	<option value="">請選擇</option>
	<option value="Key1">Value1</option>
	<option value="Key2">Value2</option>
	<option value="Key3">Value3</option>
</select>
    

但是剛剛增加的「預設值」並沒有 value，而且會自動新增一筆，也就是如果預設值設定為「Value1」，在實際的下拉式選單中就會有兩個「Value1」，並且第一個的 value=""，第二個的會是 value="key1"

    
<select id="select_id" name="select_id">
	<option value="">Value1</option>
	<option value="Key1">Value1</option>
	<option value="Key2">Value2</option>
	<option value="Key3">Value3</option>
</select>
    

經過一翻研究之後，最好的方式是使用第一種 foreach 的方式，並使用 C# 中的三元運算子做判斷:

    
<select>
	@foreach (var item in data)
	{
		<option value="@item.Key" selected=@(item.Key == "Key3")>@item.Value</option>
	}
</select>
    

實際顯示 HTML 頁面內容如下:

    
<select id="select_id" name="select_id">
	<option value="Key1">Value1</option>
	<option value="Key2">Value2</option>
	<option value="Key3" selected="selected">Value3</option>
</select>