AceAdmin有不少Html控件，而下載下來以後所有混雜在一塊兒，想用一個控件有時得調整半天，乾脆整理出一個版本，並且結合起來MVC的封裝。之後就不用一個js css的調了。javascript
在MVC中Html的控件有兩種，一個帶for一個不帶for。php
@Html.TextArea：直接輸出一個文本框，能夠自定義輸出任何內容。css
@Html.TextAreaFor：輸出綁定Model的文本框。html
一、基本示例java
視圖：jquery
@{
Layout = null;
}
<!DOCTYPE html> <html lang="en"> <head> <title>下拉框 - Ace Admin</title> @* 這個控制寬度(只是控制div的) *@ <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> @* 如下兩個對下拉框的樣式有影響 *@ <link rel="stylesheet" href="/assets/css/chosen.css" /> <link rel="stylesheet" href="/assets/css/ace.min.css" /> <link rel="stylesheet" href="/assets/css/css.css"/>
<link rel="stylesheet" href="/assets/css/font-awesome.min.css" /> <script src="/Scripts/jquery_2_1_0_min.js"></script> <!--[if IE]> <script src="/Scripts/jquery_1_11_0_min.js"></script> <![endif]--> <script src="/assets/js/chosen.jquery.min.js"></script> <script type="text/javascript"> $(function ($) { $('.chosen-select').chosen({ allow_single_deselect: true }); //窗口大小改變時，下拉框跟着縮放 $(window).on('resize.chosen', function () { var w = $('.chosen-select').parent().width(); $('.chosen-select').next().css({ 'width': w }); }).trigger('resize.chosen'); }); </script> </head> <body> <div class="modal-body"> <div class="row"> <div class="col-xs-12 col-sm-4"> <!-- Html示例 --> <select class="chosen-select" name="Hero" data-placeholder="請選擇英雄..."> <option value=""></option> <!-- 默認的Text裏不要放東西，不然不會選擇(請選擇) --> <option value="1">劉備</option> <option value="2">關羽</option> <option value="3">張飛</option> </select> <div class="space-4"></div> <!-- MVC版示例 --> @*對於AceAdmin不少-，在MVC中要用_代替*@ @Html.DropDownList("SelectListItem", null, null, new { @class = "chosen-select", data_placeholder="請選擇英雄...", name = "Hero" }) </div> </div> </div> </body> </html>
後臺：ajax
public ActionResult HtmlControl() { List<SelectListItem> SelectListItem = new List<SelectListItem>(); SelectListItem.Add(new SelectListItem { Text = " ", Value = "" }); SelectListItem.Add(new SelectListItem { Text = "劉備", Value = "1" }); SelectListItem.Add(new SelectListItem { Text = "關羽", Value = "2" }); SelectListItem.Add(new SelectListItem { Text = "張飛", Value = "3" }); ViewBag.SelectListItem = SelectListItem; return View(); }
另外推薦1種建立SelectList的方法，能與ORM工具比較好地結合。數據庫
//模擬數據庫查出來的數據 List<Person> ListPerson = new List<Person>() { new Person(){ Id = 0, Name=" " }, new Person(){ Id = 1, Name="劉備" }, new Person(){ Id = 2, Name="關羽" }, new Person(){ Id = 3, Name="張飛" } }; SelectList ListItem = new SelectList(ListPerson, "Id", "Name"); //還有第四個參數是默認選定的值 ViewBag.SelectListItem = ListItem;
若是是用SelectListItem，那麼要配合Linq的Select()方法查出Text與Value編程
IEnumerable<SelectListItem> items = ListPerson.Select(item => new SelectListItem { Value = item.Id.ToString(), Text = item.Name });
二、多選bootstrap
若是是多選，只須要添加一個屬性就OK了，其餘徹底同樣：multiple="multiple"
三、搜索框
class="form-control"與class = "chosen-select"的區別就在於有沒有搜索框。
文本框的示例也有不少種：
@{
Layout = null;
}
<!DOCTYPE html> <html lang="en"> <head> <title>文本框 - Ace Admin</title> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link href="/assets/css/font-awesome.min.css" rel="stylesheet" /> <link href="/assets/css/css.css" rel="stylesheet" /> <link rel="stylesheet" href="/assets/css/ace.min.css" /> <!-- 可拖動控制長度的文本框的按鈕 --> <link rel="stylesheet" href="/assets/css/jquery-ui.custom.min.css" /> </head> <body> <div class="row"> <div class="col-xs-12"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Text Field </label> <div class="col-sm-9"> <input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1"> Full Length </label> <div class="col-sm-9"> <input type="text" id="form-field-1-1" placeholder="Text Field" class="form-control" /> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> Password Field </label> <div class="col-sm-9"> <input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" /> <span class="help-inline col-xs-12 col-sm-7"> <span class="middle">Inline help text</span> </span> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Readonly field </label> <div class="col-sm-9"> <input readonly="" type="text" class