AceAdmin有很多Html控件，而下载下来之后全部混杂在一起，想用一个控件有时得调整半天，干脆整理出一个版本，而且结合起来MVC的封装。以后就不用一个js css的调了。
在MVC中Html的控件有两种，一个带for一个不带for。
@Html.TextArea：直接输出一个文本框，可以自定义输出任何内容。
@Html.TextAreaFor：输出绑定Model的文本框。
一、下拉框
1、基本示例
Layout = null;
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
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>
<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 });
如果是多选，只需要添加一个属性就OK了，其他完全一样：multiple="multiple"
3、搜索框
class="form-control"与class = "chosen-select"的区别就在于有没有搜索框。
二、文本框
文本框的示例也有很多种：
普通文本框
最长文本框
readonly
disabled
带图标文本框
带提示文本框
Tab标签文本框(用到的Js最多，而且又不支持IE，不好用的东西)
Layout = null;
<!DOCTYPE html>
<html lang="en">
<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>
<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="col-xs-10 col-sm-5" id="form-input-readonly" value="This text field is readonly!" />
<span class="help-inline col-xs-12 col-sm-7">
<label class="middle">
<input class="ace" type="checkbox" id="id-disable-check" />
<span class="lbl"> Disable it!</span>
</label>
</span>
</div>
</div>
<div class="space-4"></div>
<div
class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label>
<div class="col-sm-9">
<input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" />
<div class="space-2"></div>
<div class="help-block" id="input-size-slider"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label>
<div class="col-sm-9">
<div class="clearfix">
<input class="col-xs-1" type="text" id="form-field-5" placeholder=".col-xs-1" />
</div>
<div class="space-2"></div>
<div class="help-block" id="input-span-slider"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Input with Icon</label>
<div class="col-sm-9">
<span class="input-icon">
<input type="text" id="form-field-icon-1" />
<i class="ace-icon fa fa-leaf blue"></i>
</span>
<span class="input-icon input-icon-right">
<input type="text" id="form-field-icon-2" />
<i class="ace-icon fa fa-leaf green"></i>
</span>
</div>
</div>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-6">Tooltip and help button</label>
<div class="col-sm-9">
<input data-rel="tooltip" type="text" id="form-field-6" placeholder="Tooltip on hover" title="Hello Tooltip!" data-placement="bottom" />
<span class="help-button" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="Popover on hover">?</span>
</div>
</div>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-tags">Tag input</label>
<div class="col-sm-9">
<div class="inline">
<input type="text" name="tags" id="form-field-tags" value="Tag Input Control" placeholder="Enter tags ..." />
</div>
</div>
</div>
</form>
</div>
</div>
<script src="/Scripts/jquery_2_1_0_min.js"></script>
<script type="text/javascript">
window.jQuery || document.write("
<script src='/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
@* Tag文本框(Taq需要用到特别多的js) *@
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-tag.min.js"></script>
<script src="/assets/js/jquery.knob.min.js"></script>
<script src="/assets/js/jquery.autosize.min.js"></script>
<script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="/assets/js/jquery.maskedinput.min.js"></script>
<script src="/assets/js/bootstrap-colorpicker.min.js"></script>
<script src="/assets/js/jquery-ui.custom.min.js"></script>
<script src="/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="/assets/js/chosen.jquery.min.js"></script>
<script src="/assets/js/fuelux/fuelux.spinner.min.js"></script>
<script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script>
<script src="/assets/js/date-time/moment.min.js"></script>
<script src="/assets/js/date-time/daterangepicker.min.js"></script>
<script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script>
<script src="/assets/js/ace.min.js"></script>
<script src="/assets/js/ace-elements.min.js"></script>
@* Tag文本框 *@
<script type="text/javascript">
$(function ($) {
@* Disable it!点击时 *@
$('#id-disable-check').on('click', function () {
var inp = $('#form-input-readonly').get(0);
if (inp.hasAttribute('disabled')) {
inp.setAttribute('readonly', 'true');
inp.removeAttribute('disabled');
inp.value = "This text field is readonly!";
else {
inp.setAttribute('disabled', 'disabled');
inp.removeAttribute('readonly');
inp.value = "This text field is disabled!";
@* 带提示的文本框生效 *@
$('[data-rel=tooltip]').tooltip({ container: 'body' });
$('[data-rel=popover]').popover({ container: 'body' });
@* 拖动条控制文本框大小 *@
$("#input-size-slider").css(
'width', '200px').slider({
value: 1,
range: "min",
min: 1,
max: 8,
step: 1,
slide: function (event, ui) {
var sizing = ['', 'input-sm', 'input-lg', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge'];
var val = parseInt(ui.value);
$('#form-field-4').attr('class', sizing[val]).val('.' + sizing[val]);
@* 拖动条控制文本框长度 *@
$("#input-span-slider").slider({
value: 1,
range: "min",
min: 1,
max: 12,
step: 1,
slide: function (event, ui) {
var val = parseInt(ui.value);
$('#form-field-5').attr('class', 'col-xs-' + val).val('.col-xs-' + val);
@* Tag文本框(Taq需要用到特别多的js) *@
var tag_input = $('#form-field-tags');
try {
tag_input.tag(
placeholder: tag_input.attr('placeholder'),
//enable typeahead by specifying the source array
source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead
//从Web后台读取数据的写法
source: function(query, process) {
$.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
.done(function(result_items){
process(result_items);
//编程的方式添加一个项
var $tag_obj = $('#form-field-tags').data('tag');
$tag_obj.add('Programmatically Added');
catch (e) {
//旧IE版本兼容
tag_input.after('<textarea id="' + tag_input.attr('id') + '" name="' + tag_input.attr('name') + '" rows="3">' +
tag_input.val() + '</textarea>').remove();
//$('#form-field-tags').autosize({append: "\n"});
</script>
</body>
</html>
三、TextArea
TextArea在AceAdmin里多了两个比较特别的功能。
1、限制输入字符数
class="form-control limited" maxlength="50"
2、自适应高度，输入越多高度自动增长
class="autosize-transition form-control"
3、默认文本
placeholder="默认显示出来的文本"
Layout = null;
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
title
>
TextArea - Ace Admin
</
title
>
<
link
rel
="stylesheet"
href
="/assets/css/bootstrap.min.css"
/>
<
link
rel
="stylesheet"
href
="/assets/css/ace.min.css"
/>
</
head
>
<
body
class
="no-skin"
>
<
div
class
="col-sm-4"
>
<
div
class
="widget-body"
>
<
div
class
="widget-main"
>
<
textarea
class
="form-control"
id
="form-field-8"
placeholder
="Default Text"
></
textarea
>
</
div
>
<
textarea
class
="form-control limited"
id
="form-field-9"
maxlength
="50"
></
textarea
>
</
div
>
@
Html.TextArea("text", "你在他想还好吗", new { @class = "form-control limited", maxlength = "20" })
</
div
>
<
textarea
id
="form-field-11"
class
="autosize-transition form-control"
></
textarea
>
</
div
>
</
div
>
</
div
>
</
div
>
@*
TextArea用到的js
*@
<
script
src
="/Scripts/jquery_2_1_0_min.js"
></
script
>
<
script
src
="/Scripts/bootstrap.min.js"
></
script
>
<
script
src
="/assets/js/chosen.jquery.min.js"
></
script
>
<
script
src
="/assets/js/jquery.autosize.min.js"
></
script
>
<
script
src
="/assets/js/jquery.inputlimiter.1.3.1.min.js"
></
script
>
<
script
src
="/assets/js/jquery.maskedinput.min.js"
></
script
>
<!--
inline scripts related to this page
-->
<
script
type
="text/javascript"
>
$(
function
($) {
$(
'
textarea[class*=autosize]
'
).autosize({ append:
"
\n
"
});
$(
'
textarea.limited
'
).inputlimiter({
remText:
'
%n character%s remaining...
'
,
limitText:
'
max allowed : %n.
'
</
script
>
</
body
>
</
html
>
四、限制格式的文本框
主要是由jQuery.maskedinput插件实现。
Layout = null;
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
title
>
Form Elements - Ace Admin
</
title
>
<
link
rel
="stylesheet"
href
="/assets/css/bootstrap.min.css"
/>
<
link
rel
="stylesheet"
href
="/assets/css/ace.min.css"
/>
<
link
rel
="stylesheet"
href
="/assets/css/font-awesome.min.css"
/>
<
link
href
="/assets/css/css.css"
rel
="stylesheet"
/>
<
script
src
="/Scripts/jquery_2_1_0_min.js"
></
script
>
<
script
src
="/assets/js/jquery.maskedinput.min.js"
></
script
>
<
script
src
="/assets/js/ace.min.js"
></
script
>
<
script
src
="/assets/js/ace-elements.min.js"
></
script
>
<
script
type
="text/javascript"
>
$(
function
($) {
$.mask.definitions[
'
~
'
]
=
'
[+-]
'
;
$(
'
.input-mask-date
'
).mask(
'
9999/99/99
'
);
$(
'
.input-mask-phone
'
).mask(
'
(999) 9999999
'
);
$(
'
.input-mask-eyescript
'
).mask(
'
~9.99 ~9.99 999
'
);
$(
"
.input-mask-product
"
).mask(
"
a*-999-a999
"
, { placeholder:
"
"
, completed:
function
() { alert(
"
You typed the following:
"
+
this
.val()); } });
</
script
>
</
head
>
<
body
class
="no-skin"
>
<
div
class
="col-xs-12 col-sm-4"
>
<
div
class
="widget-box"
>
<
div
class
="widget-header"
>
<
h4
class
="widget-title"
>
限制格式输入框
</
h4
>
<
span
class
="widget-toolbar"
>
<
a
href
="#"
data-action
="settings"
>
<
i
class
="ace-icon fa fa-cog"
></
i
>
<
a
href
="#"
data-action
="reload"
>
<
i
class
="ace-icon fa fa-refresh"
></
i
>
<
a
href
="#"
data-action
="collapse"
>
<
i
class
="ace-icon fa fa-chevron-up"
></
i
>
<
a
href
="#"
data-action
="close"
>
<
i
class
="ace-icon fa fa-times"
></
i
>
</
span
>
</
div
>
<
div
class
="widget-body"
>
<
div
class
="widget-main"
>
<
label
for
="form-field-mask-1"
>
<
small
class
="text-success"
>
9999/99/99
</
small
>
</
label
>
<
div
class
="input-group"
>
<
input
class
="form-control input-mask-date"
type
="text"
id
="form-field-mask-1"
/>
<
span
class
="input-group-btn"
>
<
button
class
="btn btn-sm btn-default"
type
="button"
>
<
i
class
="ace-icon fa fa-calendar bigger-110"
></
i
>
</
button
>
</
span
>
@Html.TextBox("date", "2014-12-12", new { @class = "form-control input-mask-date" })
<
span
class
="input-group-btn"
>
<
button
class
="btn btn-sm btn-default"
type
="button"
>
<
i
class
="ace-icon fa fa-calendar bigger-110"
></
i
>
</
button
>
</
span
>
</
div
>
</
div
>
<
label
for
="form-field-mask-2"
>
<
small
class
="text-warning"
>
(999) 9999999
</
small
>
</
label
>
<
div
class
="input-group"
>
<
span
class
="input-group-addon"
>
<
i
class
="ace-icon fa fa-phone"
></
i
>
</
span
>
<
input
class
="form-control input-mask-phone"
type
="text"
id
="form-field-mask-2"
/>
</
div
>
</
div
>
<
label
for
="form-field-mask-3"
>
<
small
class
="text-error"
>
a*-999-a999
</
small
>
</
label
>
<
div
class
="input-group"
>
<
input
class
="form-control input-mask-product"
type
="text"
id
="form-field-mask-3"
/>
<
span
class
="input-group-addon"
>
<
i
class
="ace-icon fa fa-key"
></
i
>
</
span
>
</
div
>
</
div
>
<
label
for
="form-field-mask-4"
>
Eye Script
<
small
class
="text-info"
>
~9.99 ~9.99 999
</
small
>
</
label
>
<
input
class
="input-medium input-mask-eyescript"
type
="text"
id
="form-field-mask-4"
/>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
五、CheckBox与Radio与CheckBox实现的开关
Layout = null;
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
title
>
CheckBox与Radio与开关 - Ace Admin
</
title
>
<
link
href
="/assets/css/bootstrap.min.css"
rel
="stylesheet"
/>
<
link
href
="/assets/css/font-awesome.min.css"
rel
="stylesheet"
/>
<
link
href
="/assets/css/css.css"
rel
="stylesheet"
/>
<
link
href
="/assets/css/ace.min.css"
rel
="stylesheet"
/>
<
script
src
="/Scripts/jquery_2_1_0_min.js"
></
script
>
<
script
type
="text/javascript"
>
$(
function
($) {
$(
'
#chosen-multiple-style
'
).on(
'
click
'
,
function
(e) {
var
target
=
$(e.target).find(
'
input[type=radio]
'
);
var
which
=
parseInt(target.val());
if
(which
==
2
) $(
'
#form-field-select-4
'
).addClass(
'
tag-input-style
'
);
else
$(
'
#form-field-select-4
'
).removeClass(
'
tag-input-style
'
);
</
script
>
</
head
>
<
body
class
="no-skin"
>
<
div
class
="row"
>
<
div
class
="col-xs-12 col-sm-5"
>
<
div
class
="control-group"
>
<
label
class
="control-label bolder blue"
>
Checkbox
</
label
>
<
div
class
="checkbox"
>
<
label
>
<
input
name
="form-field-checkbox"
type
="checkbox"
class
="ace"
/>
<
span
class
="lbl"
>
choice 1
</
span
>
</
label
>
</
div
>
<
div
class
="checkbox"
>
<
label
>
<
input
name
="form-field-checkbox"
class
="ace ace-checkbox-2"
type
="checkbox"
/>
<
span
class
="lbl"
>
choice 2
</
span
>
</
label
>
</
div
>
<
div
class
="checkbox"
>
<
label
class
="block"
>
<
input
name
="form-field-checkbox"
disabled
=""
type
="checkbox"
class
="ace"
/>
<
span
class
="lbl"
>
disabled
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
="col-xs-12 col-sm-6"
>
<
div
class
="control-group"
>
<
label
class
="control-label bolder blue"
>
Radio
</
label
>
<
div
class
="radio"
>
<
label
>
<
input
name
="form-field-radio"
type
="radio"
class
="ace"
/>
<
span
class
="lbl"
>
radio option 1
</
span
>
</
label
>
</
div
>
<
div
class
="radio"
>
<
label
>
<
input
name
="form-field-radio"
type
="radio"
class
="ace"
/>
<
span
class
="lbl"
>
radio option 2
</
span
>
</
label
>
</
div
>
<
div
class
="radio"
>
<
label
>
<
input
disabled
=""
name
="form-field-radio"
type
="radio"
class
="ace"
/>
<
span
class
="lbl"
>
disabled
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
="form-group"
>
<
label
class
="control-label col-xs-12 col-sm-3"
>
开关控制
</
label
>
<
div
class
="controls col-xs-12 col-sm-9"
>
<
div
class
="row"
>
<
div
class
="col-xs-3"
>
<
label
>
<
input
name
="switch-field-1"
class
="ace ace-switch ace-switch-3"
type
="checkbox"
/>
<
span
class
="lbl"
></
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
CheckBox当选中时默认提交的值为"On"，如果选中的CheckBox提交true，则可以增加一个value="true"，可以这样写：
<input name="IsTop" type="checkbox" class="ace" value="true">
六、日期选择控件
日期控件主要用DateTime Picker来实现
Layout = null;
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
title
>
日期选择控件 - Ace Admin
</
title
>
<
link
rel
="stylesheet"
href
="/assets/css/bootstrap.min.css"
/>
<
link
href
="/assets/css/font-awesome.min.css"
rel
="stylesheet"
/>
<
link
rel
="stylesheet"
href
="/assets/css/datepicker.css"
/>
<
link
rel
="stylesheet"
href
="/assets/css/bootstrap-timepicker.css"
/>
<
link
rel
="stylesheet"
href
="/assets/css/daterangepicker.css"
/>
<
link
rel
="stylesheet"
href
="/assets/css/bootstrap-datetimepicker.css"
/>
<
link
href
="/assets/css/css.css"
rel
="stylesheet"
/>
<
link
href
="/assets/css/ace.min.css"
rel
="stylesheet"
/>
<
script
src
="/assets/js/ace-extra.min.js"
></
script
>
<
script
src
="/Scripts/jquery_2_1_0_min.js"
></
script
>
<
script
src
="/assets/js/date-time/bootstrap-datepicker.min.js"
></
script
>
<
script
src
="/assets/js/date-time/bootstrap-timepicker.min.js"
></
script
>
<
script
src
="/assets/js/date-time/moment.min.js"
></
script
>
<
script
src
="/assets/js/date-time/daterangepicker.min.js"
></
script
>
<
script
src
="/assets/js/date-time/bootstrap-datetimepicker.min.js"
></
script
>
<
script
type
="text/javascript"
>
$(
function
($) {
$(
'
.date-picker
'
).datepicker({
autoclose:
true
,
todayHighlight:
true
.next().on(ace.click_event,
function
() {
$(
this
).prev().focus();
$(
'
.input-daterange
'
).datepicker({ autoclose:
true
});
$(
'
input[name=date-range-picker]
'
).daterangepicker({
'
applyClass
'
:
'
btn-sm btn-success
'
,
'
cancelClass
'
:
'
btn-sm btn-default
'
,
locale: {
applyLabel:
'
Apply
'
,
cancelLabel:
'
Cancel
'
,
.prev().on(ace.click_event,
function
() {
$(
this
).next().focus();
$(
'
#timepicker1
'
).timepicker({
minuteStep:
1
,
showSeconds:
true
,
showMeridian:
false
}).next().on(ace.click_event,
function
() {
$(
this
).prev().focus();
$(
'
#date-timepicker1
'
).datetimepicker().next().on(ace.click_event,
function
() {
$(
this
).prev().focus();
</
script
>
</
head
>
<
body
class
="no-skin"
>
<
div
class
="col-sm-4"
>
<
div
class
="widget-box"
>
<
div
class
="widget-header"
>
<
h4
class
="widget-title"
>
日期选择
</
h4
>
<
span
class
="widget-toolbar"
>
<
a
href
="#"
data-action
="settings"
>
<
i
class
="ace-icon fa fa-cog"
></
i
>
<
a
href
="#"
data-action
="reload"
>
<
i
class
="ace-icon fa fa-refresh"
></
i
>
<
a
href
="#"
data-action
="collapse"
>
<
i
class
="ace-icon fa fa-chevron-up"
></
i
>
<
a
href
="#"
data-action
="close"
>
<
i
class
="ace-icon fa fa-times"
></
i
>
</
span
>
</
div
>
<
div
class
="widget-body"
>
<
div
class
="widget-main"
>
<
label
for
="id-date-picker-1"
>
日期选择
</
label
>
<
div
class
="row"
>
<
div
class
="col-xs-8 col-sm-11"
>
<
div
class
="input-group"
>
<
input
class
="form-control date-picker"
id
="id-date-picker-1"
type
="text"
data-date-format
="dd-mm-yyyy"
/>
<
span
class
="input-group-addon"
>
<
i
class
="fa fa-calendar bigger-110"
></
i
>
</
span
>
</
div
>
<
div
class
="input-group"
>
@Html.TextBox("Pick", DateTime.Now.ToString("yyyy-MM-dd"), new { @class = "form-control date-picker", data_date_format = "yyyy-mm-dd" })
<
span
class
="input-group-addon"
>
<
i
class
="fa fa-calendar bigger-110"
></
i
>
</
span
>
</
div
>
</
div
>
</
div
>
<
div
class
="space space-8"
></
div
>
<
label
>
范围选择
</
label
>
<
div
class
="row"
>
<
div
class
="col-xs-8 col-sm-11"
>
<
div
class
="input-daterange input-group"
>
<
input
type
="text"
class
="input-sm form-control"
name
="start"
/>
<
span
class
="input-group-addon"
>
<
i
class
="fa fa-exchange"
></
i
>
</
span
>
<
input
type
="text"
class
="input-sm form-control"
name
="end"
/>
</
div
>
</
div
>
</
div
>
<
label
for
="id-date-range-picker-1"
>
日期范围选择
</
label
>
<
div
class
="row"
>
<
div
class
="col-xs-8 col-sm-11"
>
<
div
class
="input-group"
>
<
span
class
="input-group-addon"
>
<
i
class
="fa fa-calendar bigger-110"
></
i
>
</
span
>
<
input
class
="form-control"
type
="text"
name
="date-range-picker"
id
="id-date-range-picker-1"
/>
</
div
>
</
div
>
</
div
>
<
label
for
="timepicker1"
>
时间选择
</
label
>
<
div
class
="input-group bootstrap-timepicker"
>
<
input
id
="timepicker1"
type
="text"
class
="form-control"
/>
<
span
class
="input-group-addon"
>
<
i
class
="fa fa-clock-o bigger-110"
></
i
>
</
span
>
</
div
>
<
label
for
="date-timepicker1"
>
日期-时间选择
</
label
>
<
div
class
="input-group"
>
<
input
id
="date-timepicker1"
type
="text"
class
="form-control"
/>
<
span
class
="input-group-addon"
>
<
i
class
="fa fa-clock-o bigger-110"
></
i
>
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
七、上传控件
上传控件
好像很强大，可以不上传先获取文件名了，具体怎么实现的还不是很清楚。
Layout = null;
<!
DOCTYPE html
>
<
html
lang
="en"
>
<
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"
/>
<
script
src
="/assets/js/ace-extra.min.js"
></
script
>
<
script
src
="/Scripts/jquery_2_1_0_min.js"
></
script
>
<
script
src
="/assets/js/ace-elements.min.js"
></
script
>
<
script
type
="text/javascript"
>
$(
function
($) {
$(
'
#id-input-file-1 , #id-input-file-2
'
).ace_file_input({
no_file:
'
暂无文件 ...
'
,
btn_choose:
'
Choose
'
,
btn_change:
'
Change
'
,
droppable:
false
,
onchange:
null
,
thumbnail:
false
$(
'
#id-input-file-3
'
).ace_file_input({
style:
'
well
'
,
btn_choose:
'
Drop files here or click to choose
'
,
btn_change:
null
,
no_icon:
'
ace-icon fa fa-cloud-upload
'
,
droppable:
true
,
thumbnail:
'
small
'
preview_error:
function
(filename, error_code) {
}).on(
'
change
'
,
function
() {
$(
'
#id-file-format
'
).removeAttr(
'
checked
'
).on(
'
change
'
,
function
() {
var
whitelist_ext, whitelist_mime;
var
btn_choose
var
no_icon
if
(
this
.checked) {
btn_choose
=
"
Drop images here or click to choose
"
;
no_icon
=
"
ace-icon fa fa-picture-o
"
;
whitelist_ext
=
[
"
jpeg
"
,
"
jpg
"
,
"
png
"
,
"
gif
"
,
"
bmp
"
];
whitelist_mime
=
[
"
image/jpg
"
,
"
image/jpeg
"
,
"
image/png
"
,
"
image/gif
"
,
"
image/bmp
"
];
else
{
btn_choose
=
"
Drop files here or click to choose
"
;
no_icon
=
"
ace-icon fa fa-cloud-upload
"
;
whitelist_ext
=
null
;
whitelist_mime
=
null
;
var
file_input
=
$(
'
#id-input-file-3
'
);
file_input
.ace_file_input(
'
update_settings
'
,
'
btn_choose
'
: btn_choose,
'
no_icon
'
: no_icon,
'
allowExt
'
: whitelist_ext,
'
allowMime
'
: whitelist_mime
file_input.ace_file_input(
'
reset_input
'
);
file_input
.off(
'
file.error.ace
'
)
.on(
'
file.error.ace
'
,
function
(e, info) {
</
script
>
</
head
>
<
body
class
="no-skin"
>
<
div
class
="widget-box col-xs-6"
>
<
div
class
="widget-header"
>
<
h4
class
="widget-title"
>
上传文本框
</
h4
>
<
div
class
="widget-toolbar"
>
<
a
href
="#"
data-action
="collapse"
>
<
i
class
="ace-icon fa fa-chevron-up"
></
i
>
<
a
href
="#"
data-action
="close"
>
<
i
class
="ace-icon fa fa-times"
></
i
>
</
div
>
</
div
>
<
div
class
="widget-body"
>
<
div
class
="widget-main"
>
<
div
class
="form-group"
>
<
div
class
="col-xs-12"
>
<
input
type
="file"
id
="id-input-file-2"
/>
</
div
>
</
div
>
<
div
class
="form-group"
>
<
div
class
="col-xs-12"
>
<
input
multiple
=""
type
="file"
id
="id-input-file-3"
/>
</
div
>
</
div
>
<
label
>
<
input
type
="checkbox"
name
="file-format"
id
="id-file-format"
class
="ace"
/>
<
span
class
="lbl"
>
只允许图片
</
span
>
</
label
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
