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

随机推荐

Objective-C 装饰模式--简单介绍和使用
装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 比如游戏机有一个GamePad类, 现在要增加一个作弊功能(例如100 ...
Atitit事件代理机制原理基于css class的事件代理
Atitit事件代理机制原理基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...
[笔记]linux下和windows下的创建线程函数
linux下和windows下的创建线程函数 #ifdef __GNUC__ //Linux #include <pthread.h> #define CreateThreadEx(ti ...
一篇通俗易懂的CSS层叠顺序与层叠上下文研究
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
IOS下载查看PDF文件(有下载进度)
IOS(object-c) 下载查看 PDF 其实还是蛮容易操作的.在下载前,首先要把 IOS 可以保存文件的目录给过一遍: IOS 文件保存目录 IOS 可以自定义写入的文件目录,是很有限的,只能是 ...
【Win 10应用开发】如何知道UAP在哪个平台上运行
面向22世纪的现代化应用程序可以同时在多种设备上运行,于是有朋友会有一个疑问:有时候,我们还真的需要判断一下,UAP应用程序在哪个平台上运行.尽管大多情况下我们不必要这样做,但某些特殊情况还得考虑.比 ...
jquery插件编写模版
jquery插件是什么??这里以讨论实力方法为主,比如 $("div").pluginname({}); 他的最简单形势应该是 $.prototype.plugin = funct ...
KNN算法
1.算法讲解 KNN算法是一个最基本.最简单的有监督算法,基本思路就是给定一个样本,先通过距离计算,得到这个样本最近的topK个样本,然后根据这topK个样本的标签,投票决定给定样本的标签: 训练过程 ...
python利用dict模拟switch
pytho本身并未提供switch语句,但可以通过dict来模拟switch, #方法1 def add(x,y): return x+y def dec(x,y): return x-y def m ...
如何让ASP.NET Web API的Action方法在希望的Culture下执行
在今天编辑推荐的<Hello Web API系列教程--Web API与国际化>一文中,作者通过自定义的HttpMessageHandler的方式根据请求的Accep-Language报头 ...

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

目录

Action

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

随机推荐

热门专题