AceAdmin In MVC之控件
生活随笔
收集整理的這篇文章主要介紹了
AceAdmin In MVC之控件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
AceAdmin In MVC之控件
<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>
AceAdmin有很多Html控件，而下載下來之后全部混雜在一起，想用一個控件有時得調整半天，干脆整理出一個版本，而且結合起來MVC的封裝。以后就不用一個js css的調了。
在MVC中Html的控件有兩種，一個帶for一個不帶for。
@Html.TextArea：直接輸出一個文本框，可以自定義輸出任何內容。
@Html.TextAreaFor：輸出綁定Model的文本框。
一、下拉框
1、基本示例
視圖：
@{Layout = null; } <!DOCTYPE html> <html lang="en"> <head><title>下拉框 - Ace Admin</title>@* 這個控制寬度(只是控制div的) *@<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />@* 以下兩個對下拉框的樣式有影響 *@<link rel="stylesheet" href="/assets/css/chosen.css" /><link rel="stylesheet" href="/assets/css/ace.min.css" /><link rel="stylesheet" href="/assets/css/css.css"/> <link rel="stylesheet" href="/assets/css/font-awesome.min.css" /><script src="/Scripts/jquery_2_1_0_min.js"></script><!--[if IE]><script src="/Scripts/jquery_1_11_0_min.js"></script><![endif]--><script src="/assets/js/chosen.jquery.min.js"></script><script type="text/javascript">$(function ($) {$('.chosen-select').chosen({ allow_single_deselect: true });//窗口大小改變時，下拉框跟著縮放 $(window).on('resize.chosen', function () {var w = $('.chosen-select').parent().width();$('.chosen-select').next().css({ 'width': w });}).trigger('resize.chosen');});</script> </head><body><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-4"><!-- Html示例 --><select class="chosen-select" name="Hero" data-placeholder="請選擇英雄..."><option value=""></option> <!-- 默認的Text里不要放東西，否則不會選擇(請選擇) --><option value="1">劉備</option><option value="2">關羽</option><option value="3">張飛</option></select><div class="space-4"></div><!-- MVC版示例 -->@*對于AceAdmin很多-，在MVC中要用_代替*@@Html.DropDownList("SelectListItem", null, null, new { @class = "chosen-select", data_placeholder="請選擇英雄...", name = "Hero" })</div></div></div> </body> </html>
后臺：
public ActionResult HtmlControl(){List<SelectListItem> SelectListItem = new List<SelectListItem>();SelectListItem.Add(new SelectListItem { Text = " ", Value = "" });SelectListItem.Add(new SelectListItem { Text = "劉備", Value = "1" });SelectListItem.Add(new SelectListItem { Text = "關羽", Value = "2" });SelectListItem.Add(new SelectListItem { Text = "張飛", Value = "3" });ViewBag.SelectListItem = SelectListItem;return View();}? 另外推薦1種創建SelectList的方法，能與ORM工具比較好地結合。
//模擬數據庫查出來的數據List<Person> ListPerson = new List<Person>(){new Person(){ Id = 0, Name=" " },new Person(){ Id = 1, Name="劉備" },new Person(){ Id = 2, Name="關羽" },new Person(){ Id = 3, Name="張飛" }};SelectList ListItem = new SelectList(ListPerson, "Id", "Name"); //還有第四個參數是默認選定的值ViewBag.SelectListItem = ListItem;? 如果是用SelectListItem，那么要配合Linq的Select()方法查出Text與Value
IEnumerable<SelectListItem> items = ListPerson.Select(item => new SelectListItem { Value = item.Id.ToString(), Text = item.Name });2、多選
如果是多選，只需要添加一個屬性就OK了，其他完全一樣：multiple="multiple"
3、搜索框
class="form-control"與class = "chosen-select"的區別就在于有沒有搜索框。
二、文本框
文本框的示例也有很多種：
- 普通文本框
- 最長文本框
- 密碼
- readonly
- disabled
- 可控大小
- 可控長度
- 帶圖標文本框
- 帶提示文本框
- Tab標簽文本框(用到的Js最多，而且又不支持IE，不好用的東西)
?
三、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_choosevar no_iconif (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>?
posted on 2014-11-25 11:10?逆心 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/kissdodog/p/4120508.html
總結
以上是生活随笔為你收集整理的AceAdmin In MVC之控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 亚信第一天 5-15
- 下一篇： C++内存对齐