ASP.NETMVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

Action

1、在我们的MVC项目中的Models文件夹中，添加一个model类ChannelInfo.cs，因为项目中的ORM框架使用的是Nhibernate，所以属性前面加了virtual

   public class ChannelInfo
    {
       public virtual int ID { get; set; }

       public virtual string ChannelStyle { get; set; }

       public virtual string ChannelCode { get; set; }
       public virtual string CnName { get; set; }
       public virtual string EnName { get; set; }

       public virtual string Status { get; set; }
    }

2、添加控制器ChannelController，这里为了演示，我使用的假数据

public class ChannelController : Controller
    {
        //
        // GET: /Channel/

        public ActionResult Index()
        {
            return View();
        }
        //添加渠道
        public ActionResult AddChannel()
        {
            return View();
        }

        [HttpPost]
        public JsonResult List(ChannelInfo filter)
        {
            List<ChannelInfo> list = new List<ChannelInfo>();
            for (int i = 0; i < 1100; i++)
            {
                list.Add(new ChannelInfo
            {
                ID = 1,
                ChannelCode = "E_Express"+i,
                ChannelStyle = "香港E特快"+i,
                CnName = "香港E特快"+i,
                EnName = "HK E-Express"+i,
                Status = "1"
            });
            }
            if (!string.IsNullOrEmpty(filter.ChannelCode))
            {
                list = list.Where(x => x.ChannelCode == filter.ChannelCode.Trim()).ToList();
            }
            if (!string.IsNullOrEmpty(filter.CnName))
            {
                list = list.Where(x => x.CnName == filter.CnName.Trim()).ToList();
            }
            if (!string.IsNullOrEmpty(filter.EnName))
            {
                list = list.Where(x => x.EnName == filter.EnName.Trim()).ToList();
            }

            //构造成Json的格式传递 iTotalRecords ：总记录数 iTotalDisplayRecords ：每页显示的记录数
            var result = new { iTotalRecords = 1100, iTotalDisplayRecords = 10, data = list };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

View Code

3、修改_Layout.cshtml，因为后面的View会用到

<!DOCTYPE html>
<html lang="zh">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>财务管理 @ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
@*      @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")*@
        <link href="~/Content/sharestyle.css" rel="stylesheet" />
        <link href="~/Content/main.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.8.3.min.js"></script>
        <script src="~/Lib/lhgdialog/lhgdialog.min.js?self=true&skin=iblue"></script>
    </head>
    <body>
          @*  @RenderSection("featured", required: false)*@
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        @*<footer>
            <div class="copyright"> ©2015 </div>
           <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - 我的 ASP.NET MVC 应用程序</p>
                </div>
            </div>
        </footer>*@
@*        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)*@
    </body>
</html>

View Code

4、添加渠道管理的视图Index，代码很简单，我都添加了详细的注释，相信大家都看得懂。这里主要只添加了列表展示，和查询过滤，分页排序。datables是支持服务器端分页排序的，但是我这里只写了客户端排序，就是先一次性把所有的数据查出来，然后再进行分页排序。在数据量小的情况下，体验还是非常不错的，也简单。如果数据量大，就要启用服务器分页，即每次按需取数据，关于datables服务器分页网上.NET的例子非常少，不过经过摸索，我已经实现了，只是此系列没有写出来。同时datables是支持缓存的，具体使用大家可以参考我上面发的网址，我这里只做个简单的引荐。这里不好意思忘了测试兼容性问题，后面提供的源代码中Index视图这里兼容性有问题，对话框样式冲突了，在源码中请将

tbody{ height:50px;} 修改为 #table_local tbody{ height:50px;}

@{
    ViewBag.Title = "Index";

}
<style type="text/css">
    html, body
    {
        overflow:hidden;
    }
    #table_local tbody
    {
         height:50px;
    }
    table
    {
          overflow-y:auto;
          overflow-x:hidden;
    }
</style>
<link href="~/Lib/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" />
<script src="~/Lib/DataTables-1.10.6/media/js/jquery.dataTables.min.js"></script>
<script src="~/Content/DataTablesExt.js"></script>
<script type="text/javascript">
    //查询 刷新
    function reloadList() {
        var tables = $('#table_local').dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
        tables.ajax.reload();
    }
    function deleteRecord(id) {
        $.dialog.confirm("确定要删除吗？", function () { $.dialog.alert("删除成功！"); }, null)
    }
    function successFun() {
        $.dialog.alert("渠道添加成功！");
    }
    //弹出框  
    var dg;
    function showPublishWin() {
        dg = new $.dialog({
            id: "AddChannel",
            title: "添加渠道",
            content: "url:/Channel/AddChannel",
            width: 424,
            height: 320,
            max: false,
            min: false,
            lock: true,
            close: true,
            cancel: true, //X按钮是否显示，如果设置了回调函数，一定会显示  
            //cancel: controlAllBtn,  
            ok: successFun //点击确定执行的回调函数
        });
        dg.show();
    }
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { // 按 Esc 
            //要做的事情
        }
        if (e && e.keyCode == 13) { // enter 键
            //要做的事情
            reloadList();
        }
    };
</script>
<script type="text/javascript">
    $(function () {
        var h = $(document).height() - 258;
        $("#table_local").dataTable({
            //"iDisplayLength": 10,//每页显示10条数据
            //这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
            //"aLengthMenu": [[10, 15, 20, 25, 50, -1], [10, 15, 20, 25, 50, "All"]],
            bProcessing: true,
            //"dom": 'i,p',//l - Length changing  选择每页显示行数下拉框的控件 f - Filtering input  搜索过滤控件t - The Tabletools    导出excel，csv的按钮
            //i - Information  显示汇总信息（从 1 到 100 /共 1,288 条数据） p - Pagination   分页控件 r - pRocessing   显示加载时的进度条 C - copy 显示复制，excel的控件
            //ajax: "/SendGoods/List",
            "scrollY": h,  //垂直滚动
            "scrollCollapse": "true", //开启滚动
            "dom": 'tr<"bottom"lip><"clear">', //这个是控制布局的，不是很好理解
            "bServerSide": false,                    //指定从服务器端获取数据  
            sServerMethod: "POST", //请求方式
            sAjaxSource: "@Url.Action("List", "Channel")", //数据源
            "fnServerParams": function (aoData) {  //查询条件
                aoData.push(
                    { "name": "ChannelCode", "value": $("#ChannelCode").val() },
                    { "name": "CnName", "value": $("#CnName").val() },
                    { "name": "EnName", "value": $("#EnName").val() }
                    );
            },
            columns: [
               {
                   title: "1",
                   "visible": false,
                   "data": "ID", "sClass": "center",    //样式
                   orderable: false,    //该列不排序
                   "render": function (data, type, row) {    //列渲染
                       return "<label class='position-relative'><input id='cbx" + data + "' type='checkbox' onclick='controlSelectAll(" + data + ")' class='cbx' value='" + data + "'/>";
                   }
               },
               { "data": "ChannelCode", title: "渠道代码" },
               { "data": "ChannelStyle", title: "渠道类别" },
               { "data": "CnName", title: "中文名" },
               { "data": "EnName", title: "英文名" },
               {
                   "data": "Status", title: "是否启用", orderable: false, "render": function (data, type, row, meta) { //自定义列
                       if (data == "1") {
                           return "是";
                       }
                       else {
                           return "否";
                       }
                   }
               }
               , {
                   "data": "ID", orderable: false, title: "操作", "render": function (data, type, row, meta) { //自定义列
                       return "<a style='visibility:visible' onclick='deleteRecord(" + data + ")'>删除</a> 
                       
                    
                     
                      



鲜花




握手




雷人




路过




鸡蛋