首页 > 代码库 > AceAdmin In MVC之控件
AceAdmin In MVC之控件
AceAdmin有很多Html控件，而下载下来之后全部混杂在一起，想用一个控件有时得调整半天，干脆整理出一个版本，而且结合起来MVC的封装。以后就不用一个js css的调了。
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/font-awesome.min.css" /> <script src="/Scripts/jquery_2_1_0_min.js"></script> <!--[if IE]> <script src="http://www.mamicode.com/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 = http://www.mamicode.com/"" }); SelectListItem.Add(new SelectListItem { Text = "刘备", Value = http://www.mamicode.com/"1" }); SelectListItem.Add(new SelectListItem { Text = "关羽", Value = http://www.mamicode.com/"2" }); SelectListItem.Add(new SelectListItem { Text = "张飞", Value = http://www.mamicode.com/"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 = http://www.mamicode.com/item.Id.ToString(), Text = item.Name });
多选，如果是多选，只需要添加一个属性就OK了，其他完全一样：multiple="multiple"
AceAdmin In MVC之控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。