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 = "" });

        SelectListItem.Add(new SelectListItem { Text = "关羽", Value = "" });

        SelectListItem.Add(new SelectListItem { Text = "张飞", Value = "" });

        ViewBag.SelectListItem = SelectListItem;

        return View();

    }

　　另外推荐1种创建SelectList的方法，能与ORM工具比较好地结合。

    //模拟数据库查出来的数据

    List<Person> ListPerson = new List<Person>()

    {

        new Person(){ Id = , Name=" " },

        new Person(){ Id = , Name="刘备" },

        new Person(){ Id = , Name="关羽" },

        new Person(){ Id = , 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="" 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">

<head>

    <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">

                <div>

                    <textarea class="form-control" id="form-field-8" placeholder="Default Text"></textarea>

                </div>

                <hr />

                <div>

                    <textarea class="form-control limited" id="form-field-9" maxlength="50"></textarea>

                </div>

                <hr />

                <div>

                    @Html.TextArea("text", "你在他想还好吗", new { @class = "form-control limited", maxlength = "20" })

                </div>

                <hr />

                <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">

<head>

    <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>

                    <a href="#" data-action="reload">

                        <i class="ace-icon fa fa-refresh"></i>

                    </a>

                    <a href="#" data-action="collapse">

                        <i class="ace-icon fa fa-chevron-up"></i>

                    </a>

                    <a href="#" data-action="close">

                        <i class="ace-icon fa fa-times"></i>

                    </a>

                </span>

            </div>

            <div class="widget-body">

                <div class="widget-main">

                    <div>

                        <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>

                                    Go!

                                </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>

                                    Go!

                                </button>

                            </span>

                        </div>

                    </div>

                    <hr />

                    <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>

                    <hr />

                    <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>

                    <hr />

                    <div>

                        <label for="form-field-mask-4">

                            Eye Script

                            <small class="text-info">~9.99 ~9.99 999</small>

                        </label>

                        <div>

                            <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">

<head>

    <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>

    <hr />

    <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">

<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 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>

                    <a href="#" data-action="reload">

                        <i class="ace-icon fa fa-refresh"></i>

                    </a>

                    <a href="#" data-action="collapse">

                        <i class="ace-icon fa fa-chevron-up"></i>

                    </a>

                    <a href="#" data-action="close">

                        <i class="ace-icon fa fa-times"></i>

                    </a>

                </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>

                    <hr />

                    <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>

                    <hr />

                    <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>

                    <hr />

                    <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">

<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" />

    <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>

                <a href="#" data-action="close">

                    <i class="ace-icon fa fa-times"></i>

                </a>

            </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>

AceAdmin In MVC之控件的更多相关文章

  1. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  2. mvc 日历控件

    第二个是日历控件,在网上查了一个普通的日历控件,也生成了下拉的日历样子,但是一些脚本比如选择年月,需要一些时间,最后只好套用了My97 DatePicker,这样以来其实简单多了. 第一步:下载 My ...

  3. MVC通用控件库展示-MVC4.0+WebAPI+EasyUI+Knockout--SNF快速开发平台3.0

    在我们开发中怎么才能提高效率,就是要有大量的公共组件(控件)可以直接使用而不用自己再开发一遍,既然是公共控件那也得简单实用才行.下面就介绍一下SNF-MVC当中的控件库. 总体控件库展示: 1.通用用 ...

  4. mvc file控件无刷新异步上传操作

    前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...

  5. 2016 系统设计第一期 （档案一）MVC 相关控件整理

    说明:前者是MVC,后者是boostrap 1.form 表单 @using (Html.BeginForm("Create", "User", FormMet ...

  6. MVC——分页控件

    不管是什么类型的网站,分页都是必不可少的功能实现.在这里记录一下我自己接触过的分页控件: 一. MvcPager控件(记得项目里添加MvcPager.dll的引用) 这里面比较常用的就 ——@Html ...

  7. MVC、控件、一般处理程序中的session and cookie

    Mvc中: session: if (!string .IsNullOrEmpty(find)) //设置 Session["oip"] = "无锡"; Vie ...

  8. mvc日期控件datepick的几篇文章，日后再总结吧

    instinctcoder里有两篇,入门级的 http://instinctcoder.com/asp-net-mvc-4-jquery-datepicker/ http://instinctcode ...

  9. mvc 封装控件使用mvcpager

    具体使用如下: 前台部分: @RenderPage("~/Views/Controls/_Pagebar.cshtml", new PageBar { pageIndex = Mo ...

随机推荐

  1. Maven打包web工程成WAR

    其实不一定要通过Goals:package来打war包,直接run as maven bulid也行:

  2. ubuntu修改grub界面默认开机顺序

    终端输入: sudo gedit /etc/default/grub GRUB_DEFAULT代表的就是启动项的顺序,从数字0开始 修改成默认的第几个,就赋值成几就好(顺序从数字0开始) 然后别忘了运 ...

  3. ZOJ 3606 Lazy Salesgirl 浙江省第九届省赛

    Lazy Salesgirl Time Limit: 5 Seconds      Memory Limit: 65536 KB Kochiya Sanae is a lazy girl who ma ...

  4. Session 与cookies 的区别

    两个都可以用来存私密的东西,同样也都有有效期的说法. 区别在于:session是放在服务器上的,过期与否取决于服务期的设定,cookie是存在客户端的,过去与否可以在cookie生成的时候设置进去. ...

  5. java NIO经典实例

    服务端: Loader.java package net.chatroom.server; public class Loader { public static void main(String[] ...

  6. View的缩放操作--CGAffineTransformMakeScale:

    __weak UIImageView *weekImage = imageView; imageView.transform = CGAffineTransformMakeScale(0.1, 0.1 ...

  7. ruby的hash学习笔记例： 将字符串文本中的单词存放在map中

    text = 'The rain in Spain falls mainly in the plain.'first = Hash.new []second = Hash.new {|hash,key ...

  8. Delphi进制转换（二进制/十进制/十六进制）

    http://www.cnblogs.com/ywangzi/archive/2012/12/12/2815219.html   Delphi进制转换(二进制/十进制/十六进制)  2009-11-2 ...

  9. 零成本实现接口自动化测试 – Java+TestNG 测试Restful service

    接口自动化测试 – Java+TestNG 测试 Restful Web Service 关键词:基于Rest的Web服务,接口自动化测试,数据驱动测试,测试Restful Web Service, ...

  10. C Primer Plus(第五版)9

    第 9 章 函数 在本章中你将学习下列内容: · 关键字: return (返回) · 运算符 * (一元) & (一元) · 函数及其定义方式. · 参数和返回值的使用方法. · 使用指针变 ...