html.dropdownlist
🌙
手机阅读
本文目录结构
html.dropdownlist
.Net MVC 原生提供非常多种 Html Helper 给大家使用
其中最容易忘记怎么用的就是 DropDownList
假设我们希望看到的画面如下
需求为
-
从后端准备好 SelectList 的内容（选项通常来自资料库或静态档案）
-
在后端决定哪个 Item 为预设 Selected
-
前端呈现时还要能自订 SelectList 的 Css Style
-
根据 User 改变 SelectList 的状态时，做出 alert 提示
控制者
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();
}
视图
<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>
更多 HTML 搜索
通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容，可以知道他们实际工作使用了什么技术或者什么地方薄弱；
你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容；
注：这里仅收录了常见搜索，并不是无论搜索什么都记录在里面的；
如果你是为了面试做准备的，那么推荐你查看 HTML面试题，这里基本包涵了市场上的所有 HTML 方面的面试题，让你更加牢固的掌握 HTML 知识
