AceAdmin有很多Html控件，而下载下来之后全部混杂在一起，想用一个控件有时得调整半天，干脆整理出一个版本，而且结合起来MVC的封装。以后就不用一个js css的调了。

　　在MVC中Html的控件有两种，一个带for一个不带for。

　　@Html.TextArea：直接输出一个文本框，可以自定义输出任何内容。

　　@Html.TextAreaFor：输出绑定Model的文本框。

一、下拉框

　　1、基本示例

　　视图：

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>下拉框 - Ace Admin</title>
  8.     @* 这个控制宽度(只是控制div的) *@
  9.     <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
  10.  
  11.     @* 以下两个对下拉框的样式有影响 *@
  12.     <link rel="stylesheet" href="/assets/css/chosen.css" />
  13.     <link rel="stylesheet" href="/assets/css/ace.min.css" />
    　　 <link rel="stylesheet" href="/assets/css/css.css"/>
  1.     <link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
  2.  
  3.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  4.     <!--[if IE]>
  5.         <script src="/Scripts/jquery_1_11_0_min.js"></script>
  6.     <![endif]-->
  7.     <script src="/assets/js/chosen.jquery.min.js"></script>
  8.  
  9.     <script type="text/javascript">
  10.         $(function ($) {
  11.             $('.chosen-select').chosen({ allow_single_deselect: true });
  12.             //窗口大小改变时，下拉框跟着缩放
  13.             $(window).on('resize.chosen', function () {
  14.                 var w = $('.chosen-select').parent().width();
  15.                 $('.chosen-select').next().css({ 'width': w });
  16.             }).trigger('resize.chosen');
  17.         });
  18.     </script>
  19. </head>
  20.  
  21. <body>
  22.     <div class="modal-body">
  23.         <div class="row">
  24.             <div class="col-xs-12 col-sm-4">
  25.                 <!-- Html示例 -->
  26.                 <select class="chosen-select" name="Hero" data-placeholder="请选择英雄...">
  27.                     <option value=""></option>    <!-- 默认的Text里不要放东西，否则不会选择(请选择) -->
  28.                     <option value="1">刘备</option>
  29.                     <option value="2">关羽</option>
  30.                     <option value="3">张飞</option>
  31.                 </select>
  32.  
  33.                 <div class="space-4"></div>
  34.  
  35.                 <!-- MVC版示例 -->
  36.                 @*对于AceAdmin很多-，在MVC中要用_代替*@
  37.      @Html.DropDownList("SelectListItem", null, null, new { @class = "chosen-select", data_placeholder="请选择英雄...", name = "Hero" })
  38.             </div>
  39.         </div>
  40.     </div>
  41. </body>
  42. </html>

　　后台：

  1.     public ActionResult HtmlControl()
  2.     {
  3.         List<SelectListItem> SelectListItem = new List<SelectListItem>();
  4.         SelectListItem.Add(new SelectListItem { Text = " ", Value = "" });
  5.         SelectListItem.Add(new SelectListItem { Text = "刘备", Value = "" });
  6.         SelectListItem.Add(new SelectListItem { Text = "关羽", Value = "" });
  7.         SelectListItem.Add(new SelectListItem { Text = "张飞", Value = "" });
  8.         ViewBag.SelectListItem = SelectListItem;
  9.         return View();
  10.     }

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

  1.     //模拟数据库查出来的数据
  2.     List<Person> ListPerson = new List<Person>()
  3.     {
  4.         new Person(){ Id = , Name=" " },
  5.         new Person(){ Id = , Name="刘备" },
  6.         new Person(){ Id = , Name="关羽" },
  7.         new Person(){ Id = , Name="张飞" }
  8.     };
  9.     SelectList ListItem = new SelectList(ListPerson, "Id", "Name");　　//还有第四个参数是默认选定的值
  10.     ViewBag.SelectListItem = ListItem;

　　如果是用SelectListItem，那么要配合Linq的Select()方法查出Text与Value

  1. 　　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，不好用的东西)
  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>文本框 - Ace Admin</title>
  8.     <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
  9.     <link href="/assets/css/font-awesome.min.css" rel="stylesheet" />
  10.     <link href="/assets/css/css.css" rel="stylesheet" />
  11.     <link rel="stylesheet" href="/assets/css/ace.min.css" />
  12.     <!-- 可拖动控制长度的文本框的按钮 -->
  13.     <link rel="stylesheet" href="/assets/css/jquery-ui.custom.min.css" />
  14. </head>
  15.  
  16. <body>
  17.     <div class="row">
  18.         <div class="col-xs-12">
  19.             <form class="form-horizontal" role="form">
  20.                 <div class="form-group">
  21.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Text Field </label>
  22.  
  23.                     <div class="col-sm-9">
  24.                         <input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" />
  25.                     </div>
  26.                 </div>
  27.  
  28.                 <div class="form-group">
  29.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1"> Full Length </label>
  30.  
  31.                     <div class="col-sm-9">
  32.                         <input type="text" id="form-field-1-1" placeholder="Text Field" class="form-control" />
  33.                     </div>
  34.                 </div>
  35.  
  36.                 <div class="space-4"></div>
  37.  
  38.                 <div class="form-group">
  39.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> Password Field </label>
  40.  
  41.                     <div class="col-sm-9">
  42.                         <input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" />
  43.                         <span class="help-inline col-xs-12 col-sm-7">
  44.                             <span class="middle">Inline help text</span>
  45.                         </span>
  46.                     </div>
  47.                 </div>
  48.  
  49.                 <div class="space-4"></div>
  50.  
  51.                 <div class="form-group">
  52.                     <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Readonly field </label>
  53.  
  54.                     <div class="col-sm-9">
  55.                         <input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="This text field is readonly!" />
  56.                         <span class="help-inline col-xs-12 col-sm-7">
  57.                             <label class="middle">
  58.                                 <input class="ace" type="checkbox" id="id-disable-check" />
  59.                                 <span class="lbl"> Disable it!</span>
  60.                             </label>
  61.                         </span>
  62.                     </div>
  63.                 </div>
  64.  
  65.                 <div class="space-4"></div>
  66.  
  67.                 <div class="form-group">
  68.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label>
  69.  
  70.                     <div class="col-sm-9">
  71.                         <input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" />
  72.                         <div class="space-2"></div>
  73.  
  74.                         <div class="help-block" id="input-size-slider"></div>
  75.                     </div>
  76.                 </div>
  77.  
  78.                 <div class="form-group">
  79.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label>
  80.  
  81.                     <div class="col-sm-9">
  82.                         <div class="clearfix">
  83.                             <input class="col-xs-1" type="text" id="form-field-5" placeholder=".col-xs-1" />
  84.                         </div>
  85.  
  86.                         <div class="space-2"></div>
  87.  
  88.                         <div class="help-block" id="input-span-slider"></div>
  89.                     </div>
  90.                 </div>
  91.  
  92.                 <div class="form-group">
  93.                     <label class="col-sm-3 control-label no-padding-right">Input with Icon</label>
  94.  
  95.                     <div class="col-sm-9">
  96.                         <span class="input-icon">
  97.                             <input type="text" id="form-field-icon-1" />
  98.                             <i class="ace-icon fa fa-leaf blue"></i>
  99.                         </span>
  100.  
  101.                         <span class="input-icon input-icon-right">
  102.                             <input type="text" id="form-field-icon-2" />
  103.                             <i class="ace-icon fa fa-leaf green"></i>
  104.                         </span>
  105.                     </div>
  106.                 </div>
  107.  
  108.                 <div class="space-4"></div>
  109.  
  110.                 <div class="form-group">
  111.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-6">Tooltip and help button</label>
  112.  
  113.                     <div class="col-sm-9">
  114.                         <input data-rel="tooltip" type="text" id="form-field-6" placeholder="Tooltip on hover" title="Hello Tooltip!" data-placement="bottom" />
  115.                         <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="Popover on hover">?</span>
  116.                     </div>
  117.                 </div>
  118.  
  119.                 <div class="space-4"></div>
  120.  
  121.                 <div class="form-group">
  122.                     <label class="col-sm-3 control-label no-padding-right" for="form-field-tags">Tag input</label>
  123.  
  124.                     <div class="col-sm-9">
  125.                         <div class="inline">
  126.                             <input type="text" name="tags" id="form-field-tags" value="Tag Input Control" placeholder="Enter tags ..." />
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </form>
  131.         </div>
  132.     </div>
  133.  
  134.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  135.  
  136.     <script type="text/javascript">
  137.         window.jQuery || document.write("<script src='/assets/js/jquery.min.js'>" + "<" + "/script>");
  138.     </script>
  139.  
  140.     @* Tag文本框(Taq需要用到特别多的js) *@
  141.     <script src="/Scripts/bootstrap.min.js"></script>
  142.     <script src="/assets/js/bootstrap-tag.min.js"></script>
  143.     <script src="/assets/js/jquery.knob.min.js"></script>
  144.     <script src="/assets/js/jquery.autosize.min.js"></script>
  145.     <script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
  146.     <script src="/assets/js/jquery.maskedinput.min.js"></script>
  147.     <script src="/assets/js/bootstrap-colorpicker.min.js"></script>
  148.     <script src="/assets/js/jquery-ui.custom.min.js"></script>
  149.     <script src="/assets/js/jquery.ui.touch-punch.min.js"></script>
  150.     <script src="/assets/js/chosen.jquery.min.js"></script>
  151.     <script src="/assets/js/fuelux/fuelux.spinner.min.js"></script>
  152.     <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
  153.     <script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script>
  154.     <script src="/assets/js/date-time/moment.min.js"></script>
  155.     <script src="/assets/js/date-time/daterangepicker.min.js"></script>
  156.     <script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script>
  157.     <script src="/assets/js/ace.min.js"></script>
  158.     <script src="/assets/js/ace-elements.min.js"></script>
  159.     @* Tag文本框 *@
  160.  
  161.     <script type="text/javascript">
  162.     $(function ($) {
  163.         @* Disable it!点击时 *@
  164.         $('#id-disable-check').on('click', function () {
  165.             var inp = $('#form-input-readonly').get(0);
  166.             if (inp.hasAttribute('disabled')) {
  167.                 inp.setAttribute('readonly', 'true');
  168.                 inp.removeAttribute('disabled');
  169.                 inp.value = "This text field is readonly!";
  170.             }
  171.             else {
  172.                 inp.setAttribute('disabled', 'disabled');
  173.                 inp.removeAttribute('readonly');
  174.                 inp.value = "This text field is disabled!";
  175.             }
  176.         });
  177.  
  178.         @* 带提示的文本框生效 *@
  179.         $('[data-rel=tooltip]').tooltip({ container: 'body' });
  180.         $('[data-rel=popover]').popover({ container: 'body' });
  181.  
  182.         @* 拖动条控制文本框大小 *@
  183.         $("#input-size-slider").css('width', '200px').slider({
  184.             value: 1,
  185.             range: "min",
  186.             min: 1,
  187.             max: 8,
  188.             step: 1,
  189.             slide: function (event, ui) {
  190.                 var sizing = ['', 'input-sm', 'input-lg', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge'];
  191.                 var val = parseInt(ui.value);
  192.                 $('#form-field-4').attr('class', sizing[val]).val('.' + sizing[val]);
  193.             }
  194.         });
  195.  
  196.         @* 拖动条控制文本框长度 *@
  197.         $("#input-span-slider").slider({
  198.             value: 1,
  199.             range: "min",
  200.             min: 1,
  201.             max: 12,
  202.             step: 1,
  203.             slide: function (event, ui) {
  204.                 var val = parseInt(ui.value);
  205.                 $('#form-field-5').attr('class', 'col-xs-' + val).val('.col-xs-' + val);
  206.             }
  207.         });
  208.  
  209.         @* Tag文本框(Taq需要用到特别多的js) *@
  210.         var tag_input = $('#form-field-tags');
  211.         try {
  212.             tag_input.tag(
  213.               {
  214.                   placeholder: tag_input.attr('placeholder'),
  215.                   //enable typeahead by specifying the source array
  216.                   source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead
  217.                   /**
  218.                 //从Web后台读取数据的写法
  219.                 source: function(query, process) {
  220.                   $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
  221.                   .done(function(result_items){
  222.                     process(result_items);
  223.                   });
  224.                 }
  225.                 */
  226.               }
  227.             );
  228.  
  229.             //编程的方式添加一个项
  230.             var $tag_obj = $('#form-field-tags').data('tag');
  231.             $tag_obj.add('Programmatically Added');
  232.         }
  233.         catch (e) {
  234.             //旧IE版本兼容
  235.             tag_input.after('<textarea id="' + tag_input.attr('id') + '" name="' + tag_input.attr('name') + '" rows="3">' + tag_input.val() + '</textarea>').remove();
  236.             //$('#form-field-tags').autosize({append: "\n"});
  237.         }
  238.     });
  239.     </script>
  240. </body>
  241. </html>

三、TextArea

　　TextArea在AceAdmin里多了两个比较特别的功能。

　　1、限制输入字符数

　　class="form-control limited" maxlength="50"

　　2、自适应高度，输入越多高度自动增长

　　class="autosize-transition form-control"

　　3、默认文本

　　placeholder="默认显示出来的文本"

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>TextArea - Ace Admin</title>
  8.     <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
  9.     <link rel="stylesheet" href="/assets/css/ace.min.css" />
  10. </head>
  11.  
  12. <body class="no-skin">
  13.  
  14.     <div class="col-sm-4">
  15.         <div class="widget-body">
  16.             <div class="widget-main">
  17.                 <div>
  18.                     <textarea class="form-control" id="form-field-8" placeholder="Default Text"></textarea>
  19.                 </div>
  20.                 <hr />
  21.                 <div>
  22.                     <textarea class="form-control limited" id="form-field-9" maxlength="50"></textarea>
  23.                 </div>
  24.                 <hr />
  25.                 <div>
  26.                     @Html.TextArea("text", "你在他想还好吗", new { @class = "form-control limited", maxlength = "20" })
  27.                 </div>
  28.                 <hr />
  29.                 <div>
  30.                     <textarea id="form-field-11" class="autosize-transition form-control"></textarea>
  31.  
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </div>
  36.  
  37.     @* TextArea用到的js *@
  38.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  39.     <script src="/Scripts/bootstrap.min.js"></script>
  40.     <script src="/assets/js/chosen.jquery.min.js"></script>
  41.     <script src="/assets/js/jquery.autosize.min.js"></script>
  42.     <script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
  43.     <script src="/assets/js/jquery.maskedinput.min.js"></script>
  44.  
  45.     <!-- inline scripts related to this page -->
  46.     <script type="text/javascript">
  47.         $(function ($) {
  48.             $('textarea[class*=autosize]').autosize({ append: "\n" });
  49.             $('textarea.limited').inputlimiter({
  50.                 remText: '%n character%s remaining...',
  51.                 limitText: 'max allowed : %n.'
  52.             });
  53.         });
  54.     </script>
  55. </body>
  56. </html>

四、限制格式的文本框

　　主要是由jQuery.maskedinput插件实现。

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>Form Elements - Ace Admin</title>
  8.  
  9.     <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
  10.  
  11.     <link rel="stylesheet" href="/assets/css/ace.min.css" />
  12.     <link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
  13.     <link href="/assets/css/css.css" rel="stylesheet" />
  14.  
  15.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  16.     <script src="/assets/js/jquery.maskedinput.min.js"></script>
  17.     <script src="/assets/js/ace.min.js"></script>
  18.     <script src="/assets/js/ace-elements.min.js"></script>
  19.     <script type="text/javascript">
  20.         $(function ($) {
  21.             $.mask.definitions['~'] = '[+-]';
  22.             $('.input-mask-date').mask('9999/99/99');
  23.             $('.input-mask-phone').mask('(999) 9999999');
  24.             $('.input-mask-eyescript').mask('~9.99 ~9.99 999');
  25.             $(".input-mask-product").mask("a*-999-a999", { placeholder: " ", completed: function () { alert("You typed the following: " + this.val()); } });
  26.         });
  27.     </script>
  28.  
  29. </head>
  30.  
  31. <body class="no-skin">
  32.     <div class="col-xs-12 col-sm-4">
  33.         <div class="widget-box">
  34.             <div class="widget-header">
  35.                 <h4 class="widget-title">限制格式输入框</h4>
  36.  
  37.                 <span class="widget-toolbar">
  38.                     <a href="#" data-action="settings">
  39.                         <i class="ace-icon fa fa-cog"></i>
  40.                     </a>
  41.  
  42.                     <a href="#" data-action="reload">
  43.                         <i class="ace-icon fa fa-refresh"></i>
  44.                     </a>
  45.  
  46.                     <a href="#" data-action="collapse">
  47.                         <i class="ace-icon fa fa-chevron-up"></i>
  48.                     </a>
  49.  
  50.                     <a href="#" data-action="close">
  51.                         <i class="ace-icon fa fa-times"></i>
  52.                     </a>
  53.                 </span>
  54.             </div>
  55.  
  56.             <div class="widget-body">
  57.                 <div class="widget-main">
  58.                     <div>
  59.                         <label for="form-field-mask-1">
  60.                             日期
  61.                             <small class="text-success">9999/99/99</small>
  62.                         </label>
  63.  
  64.                         <div class="input-group">
  65.                             <input class="form-control input-mask-date" type="text" id="form-field-mask-1" />
  66.                             <span class="input-group-btn">
  67.                                 <button class="btn btn-sm btn-default" type="button">
  68.                                     <i class="ace-icon fa fa-calendar bigger-110"></i>
  69.                                     Go!
  70.                                 </button>
  71.                             </span>
  72.                             @Html.TextBox("date", "2014-12-12", new { @class = "form-control input-mask-date" })
  73.                             <span class="input-group-btn">
  74.                                 <button class="btn btn-sm btn-default" type="button">
  75.                                     <i class="ace-icon fa fa-calendar bigger-110"></i>
  76.                                     Go!
  77.                                 </button>
  78.                             </span>
  79.                         </div>
  80.                     </div>
  81.  
  82.                     <hr />
  83.                     <div>
  84.                         <label for="form-field-mask-2">
  85.                             电话
  86.                             <small class="text-warning">(999) 9999999</small>
  87.                         </label>
  88.  
  89.                         <div class="input-group">
  90.                             <span class="input-group-addon">
  91.                                 <i class="ace-icon fa fa-phone"></i>
  92.                             </span>
  93.  
  94.                             <input class="form-control input-mask-phone" type="text" id="form-field-mask-2" />
  95.                         </div>
  96.                     </div>
  97.  
  98.                     <hr />
  99.                     <div>
  100.                         <label for="form-field-mask-3">
  101.                             密钥
  102.                             <small class="text-error">a*-999-a999</small>
  103.                         </label>
  104.  
  105.                         <div class="input-group">
  106.                             <input class="form-control input-mask-product" type="text" id="form-field-mask-3" />
  107.                             <span class="input-group-addon">
  108.                                 <i class="ace-icon fa fa-key"></i>
  109.                             </span>
  110.                         </div>
  111.                     </div>
  112.  
  113.                     <hr />
  114.                     <div>
  115.                         <label for="form-field-mask-4">
  116.                             Eye Script
  117.                             <small class="text-info">~9.99 ~9.99 999</small>
  118.                         </label>
  119.  
  120.                         <div>
  121.                             <input class="input-medium input-mask-eyescript" type="text" id="form-field-mask-4" />
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </div>
  128. </body>
  129. </html>

五、CheckBox与Radio与CheckBox实现的开关

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>CheckBox与Radio与开关 - Ace Admin</title>
  8.  
  9.     <link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
  10.     <link href="/assets/css/font-awesome.min.css" rel="stylesheet" />
  11.     <link href="/assets/css/css.css" rel="stylesheet" />
  12.     <link href="/assets/css/ace.min.css" rel="stylesheet" />
  13.  
  14.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  15.     <script type="text/javascript">
  16.         $(function ($) {
  17.             $('#chosen-multiple-style').on('click', function (e) {
  18.                 var target = $(e.target).find('input[type=radio]');
  19.                 var which = parseInt(target.val());
  20.                 if (which == 2) $('#form-field-select-4').addClass('tag-input-style');
  21.                 else $('#form-field-select-4').removeClass('tag-input-style');
  22.             });
  23.         });
  24.     </script>
  25. </head>
  26.  
  27. <body class="no-skin">
  28.     <div class="row">
  29.         <div class="col-xs-12 col-sm-5">
  30.             <div class="control-group">
  31.                 <label class="control-label bolder blue">Checkbox</label>
  32.  
  33.                 <div class="checkbox">
  34.                     <label>
  35.                         <input name="form-field-checkbox" type="checkbox" class="ace" />
  36.                         <span class="lbl"> choice 1</span>
  37.                     </label>
  38.                 </div>
  39.  
  40.                 <div class="checkbox">
  41.                     <label>
  42.                         <input name="form-field-checkbox" class="ace ace-checkbox-2" type="checkbox" />
  43.                         <span class="lbl"> choice 2</span>
  44.                     </label>
  45.                 </div>
  46.  
  47.                 <div class="checkbox">
  48.                     <label class="block">
  49.                         <input name="form-field-checkbox" disabled="" type="checkbox" class="ace" />
  50.                         <span class="lbl"> disabled</span>
  51.                     </label>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.  
  56.         <div class="col-xs-12 col-sm-6">
  57.             <div class="control-group">
  58.                 <label class="control-label bolder blue">Radio</label>
  59.  
  60.                 <div class="radio">
  61.                     <label>
  62.                         <input name="form-field-radio" type="radio" class="ace" />
  63.                         <span class="lbl"> radio option 1</span>
  64.                     </label>
  65.                 </div>
  66.  
  67.                 <div class="radio">
  68.                     <label>
  69.                         <input name="form-field-radio" type="radio" class="ace" />
  70.                         <span class="lbl"> radio option 2</span>
  71.                     </label>
  72.                 </div>
  73.  
  74.                 <div class="radio">
  75.                     <label>
  76.                         <input disabled="" name="form-field-radio" type="radio" class="ace" />
  77.                         <span class="lbl"> disabled</span>
  78.                     </label>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </div>
  83.     <hr />
  84.     <div class="form-group">
  85.         <label class="control-label col-xs-12 col-sm-3">开关控制</label>
  86.         <div class="controls col-xs-12 col-sm-9">
  87.             <div class="row">
  88.                 <div class="col-xs-3">
  89.                     <label>
  90.                         <input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" />
  91.                         <span class="lbl"></span>
  92.                     </label>
  93.                 </div>
  94.  
  95.             </div>
  96.         </div>
  97.     </div>
  98. </body>
  99. </html>

　　CheckBox当选中时默认提交的值为"On"，如果选中的CheckBox提交true，则可以增加一个value="true"，可以这样写：

  1. <input name="IsTop" type="checkbox" class="ace" value="true">

六、日期选择控件

　　日期控件主要用DateTime Picker来实现

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>日期选择控件 - Ace Admin</title>
  8.  
  9.     <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
  10.     <link href="/assets/css/font-awesome.min.css" rel="stylesheet" />
  11.     <link rel="stylesheet" href="/assets/css/datepicker.css" />
  12.     <link rel="stylesheet" href="/assets/css/bootstrap-timepicker.css" />
  13.     <link rel="stylesheet" href="/assets/css/daterangepicker.css" />
  14.     <link rel="stylesheet" href="/assets/css/bootstrap-datetimepicker.css" />
  15.     <link href="/assets/css/css.css" rel="stylesheet" />
  16.     <link href="/assets/css/ace.min.css" rel="stylesheet" />
  17.  
  18.     <script src="/assets/js/ace-extra.min.js"></script>
  19.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  20.     <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script>
  21.     <script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script>
  22.     <script src="/assets/js/date-time/moment.min.js"></script>
  23.     <script src="/assets/js/date-time/daterangepicker.min.js"></script>
  24.     <script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script>
  25.  
  26.     <script type="text/javascript">
  27.         $(function ($) {
  28.             $('.date-picker').datepicker({
  29.                 autoclose: true,
  30.                 todayHighlight: true
  31.             })
  32.  
  33.             .next().on(ace.click_event, function () {
  34.                 $(this).prev().focus();
  35.             });
  36.  
  37.             $('.input-daterange').datepicker({ autoclose: true });
  38.  
  39.             $('input[name=date-range-picker]').daterangepicker({
  40.                 'applyClass': 'btn-sm btn-success',
  41.                 'cancelClass': 'btn-sm btn-default',
  42.                 locale: {
  43.                     applyLabel: 'Apply',
  44.                     cancelLabel: 'Cancel',
  45.                 }
  46.             })
  47.             .prev().on(ace.click_event, function () {
  48.                 $(this).next().focus();
  49.             });
  50.  
  51.             $('#timepicker1').timepicker({
  52.                 minuteStep: 1,
  53.                 showSeconds: true,
  54.                 showMeridian: false
  55.             }).next().on(ace.click_event, function () {
  56.                 $(this).prev().focus();
  57.             });
  58.  
  59.             $('#date-timepicker1').datetimepicker().next().on(ace.click_event, function () {
  60.                 $(this).prev().focus();
  61.             });
  62.         });
  63.     </script>
  64.  
  65. </head>
  66.  
  67. <body class="no-skin">
  68.  
  69.     <div class="col-sm-4">
  70.         <div class="widget-box">
  71.             <div class="widget-header">
  72.                 <h4 class="widget-title">日期选择</h4>
  73.  
  74.                 <span class="widget-toolbar">
  75.                     <a href="#" data-action="settings">
  76.                         <i class="ace-icon fa fa-cog"></i>
  77.                     </a>
  78.  
  79.                     <a href="#" data-action="reload">
  80.                         <i class="ace-icon fa fa-refresh"></i>
  81.                     </a>
  82.  
  83.                     <a href="#" data-action="collapse">
  84.                         <i class="ace-icon fa fa-chevron-up"></i>
  85.                     </a>
  86.  
  87.                     <a href="#" data-action="close">
  88.                         <i class="ace-icon fa fa-times"></i>
  89.                     </a>
  90.                 </span>
  91.             </div>
  92.  
  93.             <div class="widget-body">
  94.                 <div class="widget-main">
  95.                     <label for="id-date-picker-1">日期选择</label>
  96.  
  97.                     <div class="row">
  98.                         <div class="col-xs-8 col-sm-11">
  99.                             <div class="input-group">
  100.                                 <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" />
  101.                                 <span class="input-group-addon">
  102.                                     <i class="fa fa-calendar bigger-110"></i>
  103.                                 </span>
  104.                             </div>
  105.  
  106.                             <div class="input-group">
  107.                                 @Html.TextBox("Pick", DateTime.Now.ToString("yyyy-MM-dd"), new { @class = "form-control date-picker", data_date_format = "yyyy-mm-dd" })
  108.                                 <span class="input-group-addon">
  109.                                     <i class="fa fa-calendar bigger-110"></i>
  110.                                 </span>
  111.                             </div>
  112.                         </div>
  113.                     </div>
  114.  
  115.                     <div class="space space-8"></div>
  116.                     <label>范围选择</label>
  117.  
  118.                     <div class="row">
  119.                         <div class="col-xs-8 col-sm-11">
  120.                             <div class="input-daterange input-group">
  121.                                 <input type="text" class="input-sm form-control" name="start" />
  122.                                 <span class="input-group-addon">
  123.                                     <i class="fa fa-exchange"></i>
  124.                                 </span>
  125.  
  126.                                 <input type="text" class="input-sm form-control" name="end" />
  127.                             </div>
  128.                         </div>
  129.                     </div>
  130.  
  131.                     <hr />
  132.                     <label for="id-date-range-picker-1">日期范围选择</label>
  133.  
  134.                     <div class="row">
  135.                         <div class="col-xs-8 col-sm-11">
  136.                             <div class="input-group">
  137.                                 <span class="input-group-addon">
  138.                                     <i class="fa fa-calendar bigger-110"></i>
  139.                                 </span>
  140.  
  141.                                 <input class="form-control" type="text" name="date-range-picker" id="id-date-range-picker-1" />
  142.                             </div>
  143.                         </div>
  144.                     </div>
  145.  
  146.                     <hr />
  147.                     <label for="timepicker1">时间选择</label>
  148.  
  149.                     <div class="input-group bootstrap-timepicker">
  150.                         <input id="timepicker1" type="text" class="form-control" />
  151.                         <span class="input-group-addon">
  152.                             <i class="fa fa-clock-o bigger-110"></i>
  153.                         </span>
  154.                     </div>
  155.  
  156.                     <hr />
  157.                     <label for="date-timepicker1">日期-时间选择</label>
  158.  
  159.                     <div class="input-group">
  160.                         <input id="date-timepicker1" type="text" class="form-control" />
  161.                         <span class="input-group-addon">
  162.                             <i class="fa fa-clock-o bigger-110"></i>
  163.                         </span>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </div>
  169. </body>
  170. </html>

七、上传控件

　　上传控件好像很强大，可以不上传先获取文件名了，具体怎么实现的还不是很清楚。

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <title>文本上传框 - Ace Admin</title>
  8.     <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
  9.     <link href="/assets/css/font-awesome.min.css" rel="stylesheet" />
  10.     <link href="/assets/css/css.css" rel="stylesheet" />
  11.     <link rel="stylesheet" href="/assets/css/ace.min.css" />
  12.  
  13.     <script src="/assets/js/ace-extra.min.js"></script>
  14.     <script src="/Scripts/jquery_2_1_0_min.js"></script>
  15.     <script src="/assets/js/ace-elements.min.js"></script>
  16.     <script type="text/javascript">
  17.         $(function ($) {
  18.  
  19.             $('#id-input-file-1 , #id-input-file-2').ace_file_input({
  20.                 no_file: '暂无文件 ...',
  21.                 btn_choose: 'Choose',
  22.                 btn_change: 'Change',
  23.                 droppable: false,
  24.                 onchange: null,
  25.                 thumbnail: false
  26.             });
  27.  
  28.             $('#id-input-file-3').ace_file_input({
  29.                 style: 'well',
  30.                 btn_choose: 'Drop files here or click to choose',
  31.                 btn_change: null,
  32.                 no_icon: 'ace-icon fa fa-cloud-upload',
  33.                 droppable: true,
  34.                 thumbnail: 'small'
  35.                 ,
  36.                 preview_error: function (filename, error_code) {
  37.  
  38.                 }
  39.  
  40.             }).on('change', function () {
  41.  
  42.             });
  43.  
  44.             $('#id-file-format').removeAttr('checked').on('change', function () {
  45.                 var whitelist_ext, whitelist_mime;
  46.                 var btn_choose
  47.                 var no_icon
  48.                 if (this.checked) {
  49.                     btn_choose = "Drop images here or click to choose";
  50.                     no_icon = "ace-icon fa fa-picture-o";
  51.  
  52.                     whitelist_ext = ["jpeg", "jpg", "png", "gif", "bmp"];
  53.                     whitelist_mime = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"];
  54.                 }
  55.                 else {
  56.                     btn_choose = "Drop files here or click to choose";
  57.                     no_icon = "ace-icon fa fa-cloud-upload";
  58.  
  59.                     whitelist_ext = null;
  60.                     whitelist_mime = null;
  61.                 }
  62.                 var file_input = $('#id-input-file-3');
  63.                 file_input
  64.                 .ace_file_input('update_settings',
  65.                 {
  66.                     'btn_choose': btn_choose,
  67.                     'no_icon': no_icon,
  68.                     'allowExt': whitelist_ext,
  69.                     'allowMime': whitelist_mime
  70.                 })
  71.                 file_input.ace_file_input('reset_input');
  72.  
  73.                 file_input
  74.                 .off('file.error.ace')
  75.                 .on('file.error.ace', function (e, info) {
  76.                 });
  77.  
  78.             });
  79.  
  80.         });
  81.     </script>
  82. </head>
  83.  
  84. <body class="no-skin">
  85.     <div class="widget-box col-xs-6">
  86.         <div class="widget-header">
  87.             <h4 class="widget-title">上传文本框</h4>
  88.             <div class="widget-toolbar">
  89.                 <a href="#" data-action="collapse">
  90.                     <i class="ace-icon fa fa-chevron-up"></i>
  91.                 </a>
  92.                 <a href="#" data-action="close">
  93.                     <i class="ace-icon fa fa-times"></i>
  94.                 </a>
  95.             </div>
  96.         </div>
  97.  
  98.         <div class="widget-body">
  99.             <div class="widget-main">
  100.                 <div class="form-group">
  101.                     <div class="col-xs-12">
  102.                         <input type="file" id="id-input-file-2" />
  103.                     </div>
  104.                 </div>
  105.  
  106.                 <div class="form-group">
  107.                     <div class="col-xs-12">
  108.                         <input multiple="" type="file" id="id-input-file-3" />
  109.                     </div>
  110.                 </div>
  111.  
  112.                 <label>
  113.                     <input type="checkbox" name="file-format" id="id-file-format" class="ace" />
  114.                     <span class="lbl"> 只允许图片</span>
  115.                 </label>
  116.             </div>
  117.         </div>
  118.     </div>
  119. </body>
  120. </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. ActionScript 3.0 编程精髓 示例源码下载

    根据书籍介绍(http://product.china-pub.com/38852#qy)的指引,找到了下载地址:http://moock.org/eas3/examples/

  2. 手把手教你玩转Git分布式版本控制系统！ (转载）

    目录 Git诞生历史 Git环境准备 Git安装部署 Git常用命令 Git基本操作 Git管理分支结构 Git管理标签 GitLab安装部署 GitHub托管服务 Git客户端工具 Git诞生历史 ...

  3. hiho #1014 : Trie树

    #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...

  4. jstack使用－倒出线程堆栈

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...

  5. Android之Handler

    1.Handler默认情况下与主线程处于同一线程 public class MainActivity extends Activity { private Button startButton = n ...

  6. java web session监听销毁跳转

    1.了解如何使用HttpSessionListener监听session的销毁. 2.了解如何使用HttpSessionBindingListener监听session的销毁. 一. 使用HttpSe ...

  7. J2EE 和javaweb有区别吗

    java web是java对web开发的一种总和称呼.他是B/S模式,对应的是C/S模式: java ee,又叫j2ee是一种广泛使用的平台,包含了一组协调技术,可显著降低成本以及开发.部署和管理以服 ...

  8. Django 的 CSRF 保护机制

    转自:http://www.cnblogs.com/lins05/archive/2012/12/02/2797996.html 用 django 有多久,我跟 csrf 这个概念打交道就有久了. 每 ...

  9. CentOS 6 安装 Python3.5以及配置Django

    http://www.jianshu.com/p/6199b5c26725 文/FiveStrong(简书作者)原文链接:http://www.jianshu.com/p/6199b5c26725著作 ...

  10. 避免多层回调，Node.js异步库Async使用(parallel)

    原来写的一个分页查询,回调了好几层. exports.list = function(req,res) { var params = {}; var current_page = common_uti ...