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

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 = ; i < ; i++)

            {

                list.Add(new ChannelInfo

            {

                ID = ,

                ChannelCode = "E_Express"+i,

                ChannelStyle = "香港E特快"+i,

                CnName = "香港E特快"+i,

                EnName = "HK E-Express"+i,

                Status = ""

            });

            }

            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 = , iTotalDisplayRecords = , data = list };

            return Json(result, JsonRequestBehavior.AllowGet);

        }

    }

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"> © </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>

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>";

                   }

               }

            ],

            paging: true,//分页

            ordering: true,//是否启用排序

            searching: false,//搜索

            language: {

                lengthMenu: '每页显示：<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="15">15</option>'

                    + '<option value="20">20</option>' + '<option value="25">25</option>' + '<option value="30">30</option>' + '<option value="35">35</option>' + '<option value="40">40</option>',//左上角的分页大小显示。

                search: '<span class="label label-success">搜索：</span>',//右上角的搜索文本，可以写html标签

                paginate: {//分页的样式内容。

                    previous: "上一页",

                    next: "下一页",

                    first: "",

                    last: ""

                },

                zeroRecords: "暂无记录",//table tbody内容为空时，tbody的内容。

                //下面三者构成了总体的左下角的内容。

                info: "总共 <span class='pagesStyle'>(_PAGES_) </span>页，显示 _START_ -- _END_ ，共<span class='recordsStyle'> (_TOTAL_)</span> 条",//左下角的信息显示，大写的词为关键字。初始_MAX_ 条

                infoEmpty: "0条记录",//筛选为空时左下角的显示。

                infoFiltered: ""//筛选之后的左下角筛选提示，

            },

            pagingType: "full_numbers"//分页样式的类型

        });

       // $("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。

    });

</script>

    <div class="areabx clear" style="margin-bottom:0px;padding-bottom:0px;">

        @using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" }))

        {

            <div class="areabx_header">渠道管理</div>

            <ul class="formod mgt10">

                <li><span>渠道代码：</span>@Html.TextBox("ChannelCode","", new {@class="trade-time wid153" })</li>

                <li><span>渠道中文名：</span>@Html.TextBox("CnName", "",new {@class="trade-time" })</li>

                <li><span>渠道英文名：</span>@Html.TextBox("EnName", "",new {@class="trade-time" })</li>

            </ul>

            <div class="botbtbx pdb0">

                <input type="button" value="添加渠道" class="btn btn-primary" onclick="showPublishWin()"/>

                <input type="button" value="查询" onclick="reloadList();" class="btn btn-primary">

            </div>

        }

        <div class="tob_box mgt15">

            <table id="table_local" class="display"  cellspacing="0" cellpadding="0" border="0" style="width:100%">

            </table>

        </div>

    </div>

5、添加视图AddChannel，这里没写完。本来还打算把修改也添加进去的，有兴趣的朋友可以自己去完成

@{

    ViewBag.Title = "添加渠道";

}

<style type="text/css">

    body {

        overflow:hidden;

    }

</style>

<h2>添加渠道</h2>

<div>开发中...</div>

由于要保持和美工给的样式风格一直，我修改了dataTables的样式源码

6、按F5运行

框架中用到的js和css、Img：CssJsImg源码

系列本来没写完，不打算写了，我就先把这个半成品的源码贴出来吧，免得小编又说我没有足够的知识分享了，虽然是半成品，但是基本的框框都有了。

插曲：本篇文章之前都没法在博客园首页显示的，小编给的回复是：没有足够的知识分享。我心拔凉拔凉的。虽然字码得不多，但是代码中倾注了我的思想和经验、时间和心血。精简、通俗、易懂一直是我追求的。

开发环境：VS2012

有朋友评论说源码里少了dll，那两个dll都是没用到的，我现在已经将没用的dll引用删除，所以源码下载地址更新了，给大家带来的不便请谅解！

半成品UI框架源码下载：http://pan.baidu.com/s/1c055sw4

如果源码对大家很有帮助，希望大家给个推荐，当是支持下我无偿的技术分享，如果有更好的建议或不同的意见，可以提出来，大家一起探讨。谢谢！

ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互的更多相关文章

ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

随机推荐

eclipse启动时报告错误：Java was started but returned exit code=-805306369
这两天也没改过eclipse和java的配置,但eclipse启动时报告错误:Java was started but returned exit code=-805306369 后来在eclipse ...
CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
Android开发学习之路-Android N新特性-多窗口模式
我们都知道,在最新的Android N系统中,加入了一个新的功能,就是多窗口模式.多窗口模式允许我们在屏幕上显示两个窗口,每个窗口显示的内容不同,也就是说,我们可以一遍看电视剧,一边聊微信. 这里我们 ...
手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
jsp中头的导入两种方式区别
1.<jsp:include page="top.jsp">先将top.jsp中的java脚本和jsp指令执行完毕以后再讲top.jsp页面加入面中 2.<%@ ...
【解决】Word 在试图打开文件时遇到错误请尝试下列方法：* xxx * xxx * xxx
有好几种情况,我先说我的这个情况 1.word设置不当导致看图: 然后就能打开了~ 2.word格式问题,比如原来是doc,被人手动改成docx~~~ 解决方法:改回来 3.word版本不兼容,比如 ...
SQL Server中In-Flight日志究竟是多少
在SQL Server中,利用日志的WAL来保证关系数据库的持久性,但由于硬盘的特性,不可能使得每生成一条日志,就直接向磁盘写一次,因此日志会被缓存起来,到一定数据量才会写入磁盘.这部分已经生 ...
Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
如何在文章/随笔中添加可运行的js代码
<script type="text/javascript"> alert("你知道我是怎么弹出的吗?"); </script> 看大神 ...
BFC之浅析篇
BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进 ...

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

目录

Action

ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互的更多相关文章

随机推荐

热门专题