利用Select2优化@Html.ListBoxFor显示,学会用Mu…
2018-06-22 06:07:43来源:未知 阅读 ()
最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法。
首先介绍多选框的操作方法;
一、定义一个MultipleSelectModel
public class MultipleSelectModel { public int[] MultipleItem { get; set; } }
二、在Controller中实例化MultiSelectList
public ActionResult MultipleSelectView() { //实际可从数据库取数填充 List<SelectListItem> listBox = new List<SelectListItem>(); for (int i = 0; i < 4; i++) { var temp = new SelectListItem { Value = i.ToString(), Text = "第" + i.ToString() }; listBox.Add(temp); } //定义已选数据 var viewModel = new MultipleSelectModel(); viewModel.MultipleItem = new int[] { 0, 1 }; ViewBag.MultiSelecteTest = new MultiSelectList(listBox, "Value", "Text"); return View(viewModel); }
三、View中利用@Html.ListBoxFor()可初始化已选项
@model Models.ViewModel.MultipleSelectModel @{ ViewBag.Title = "MultipleSelectView"; Layout = "~/Views/Shared/_Layout.cshtml"; }<h2>MultipleSelectView</h2> @Html.ListBoxFor(model => model.MultipleItem, ViewBag.MultiSelecteTest as MultiSelectList, new { @class = "form-control multiple-select"})
四、利用Select2美化多选框
1、首先引用Select2的css文件及javascript文件,教学因素,没有将select2放在BundleConfig中
@Styles.Render("~/Content/jqueryui") @Styles.Render("~/Content/select2") @section scripts{ <script src="~/Scripts/select2.min.js"></script> }
2、简单使用Select2
<script type="text/javascript"> $(document).ready(function () { $('.multiple-select').select2(); }); </script>
五、效果图
六、用Ajax刷新分页视图中如何使用到Select2
1、利用Ajax.BegionForm中的OnComplete,调用selectDeviceSuccess的jQuery方法
@using (Ajax.BeginForm("_PartialViewAction", "ViewTestr", new AjaxOptions() { HttpMethod = "POST", OnComplete = "selectDeviceSuccess" }, new { enctype = "multipart/form-data" }))
2、selectDeviceSuccess中再次使用Select2
function selectDeviceSuccess() { $('.multiple-select').select2({ language: 'zh-CN' }); }
七、总结
@Html.ListBoxFor封装了初始化过程,传到后台的数据是数组int[] MultipleItem。用$('.multiple-select').val()获得选中值以','分隔。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 利用.net代码实现发送邮件 2020-02-17
- C#利用服务器实现客户端之间通信 2020-01-20
- Asp.Net性能优化的技巧 2019-12-16
- asp.net小谈网站性能优化 2019-10-08
- Asp.Net网站优化系列之数据库的优化措施与索引优化方法 2019-08-23
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash