AceAdmin In MVC之控件

浏览数：32 / 时间：2015年06月09日

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

 　　多选，如果是多选，只需要添加一个属性就OK了，其他完全一样：multiple="multiple"

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class style java src html log 数据 方法 des class style java src html log 数据 方法

相关文章

随机文章

您可能还喜欢

您可能还喜欢