.Net MVC原生提供非常多種Html Helper給大家使用
其中最容易忘記怎麼用的就是DropDownList
假設我們希望看到的畫面如下
需求為
1.從後端準備好 SelectList 的內容 (選項通常來自資料庫或靜態檔案)
2.在後端決定哪個 Item 為預設 Selected
3.前端呈現時還要能自訂 SelectList 的 Css Style
4.根據 User 改變 SelectList的狀態時，做出 alert 提示
Controller
public ActionResult Sample()
{
var selectList = new List<SelectListItem>()
{
new SelectListItem {Text="text-1", Value="value-1" },
new SelectListItem {Text="text-2", Value="value-2" },
new SelectListItem {Text="text-3", Value="value-3" },
};
//預設選擇哪一筆
selectList.Where(q => q.Value == "value-2").First().Selected = true;
ViewBag.SelectList = selectList;
return View();
}
View
<head>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$('#selector').change(function () {
alert($('#selector').val());
});
})
</script>
</head>
<p>
@Html.DropDownList("selector", (IEnumerable<SelectListItem>)ViewBag.SelectList, new { @style = "background-color:yellow" })
</p>
實際對比一下 Razor 的 HtmlHelper 幫我們自動產生的 Html Script 會長得像...
<select id="selector" name="selector" style="background-color:yellow">
<option value="value-1">text-1</option>
<option selected="selected" value="value-2">text-2</option>
<option value="value-3">text-3</option>
</select>