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 ...

随机推荐

Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路
通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...
【Prince2是什么】PRINCE2认证之Prince2衡量绩效的六大要素
之前一篇文章已经跟大家从体系上讲解了PRINCE2和PMP的差异,那接下来我们进行第二讲,PRINCE2中讲到的衡量绩效的要素是什么呢? 第一,成本:即项目必须是所能负担的起的第二,时间:即项目 ...
crossplatfrom---electron入门教程
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
Java学习笔记（03）
一.回顾运算符: 一．控制语句 1.1 顺序结构 (最常见的) 特点:代码从上往下依次执行
Distributed1：Linked Server 添加和删除
A linked server allows for access to distributed, heterogeneous queries against OLE DB data sources. ...
Nokia 920板砖自救（理论上通用，升级Win10成板砖也可以用这个恢复）
异常处理汇总 ~ 修正果带着你的Net飞奔吧! http://www.cnblogs.com/dunitian/p/4599258.html 个人博客:http://dnt.dkill.net 下载下 ...
JavaScript == 、!=、===、!===的比较
; '; ; test == num //true 相同类型相同值 test === num //true 相同类型相同值 test !== num //false test与num类型相同,其值 ...
MyEclipse的项目中把 java EE 5 Libraries 删掉后怎么重新导入
myeclipse中鼠标右击项目->properties->java Build Path=>Libraries=>Add Library...=>选择MyEclipse ...
如何部署Icinga客户端
Icinga客户端的部署相对于服务器端来说,简单很多.对于服务器端来说,如果要通过以下这种方式来监控服务器,必须包含三个组件,Icinga内核,Icinga插件,NRPE(Nagios Remote ...
初试JqueryEasyUI（附Demo）
写在前面准备布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...

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

目录

Action

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

随机推荐

热门专题