AceAdmin有很多Html控件，而下载下来之后全部混杂在一起，想用一个控件有时得调整半天，干脆整理出一个版本，而且结合起来MVC的封装。以后就不用一个js css的调了。
在MVC中Html的控件有两种，一个带for一个不带for。
@Html.TextArea：直接输出一个文本框，可以自定义输出任何内容。
@Html.TextAreaFor：输出绑定Model的文本框。
一、下拉框
1、基本示例
视图：
@{
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>
后台：
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 });
2、多选
如果是多选，只需要添加一个属性就OK了，其他完全一样：multiple="multiple"
3、搜索框
class="form-control"与class = "chosen-select"的区别就在于有没有搜索框。
二、文本框
文本框的示例也有很多种：
- 普通文本框
- 最长文本框
- 密码
- readonly
- disabled
- 可控大小
- 可控长度
- 带图标文本框
- 带提示文本框
- Tab标签文本框(用到的Js最多，而且又不支持IE，不好用的东西)
@{
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