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

随机推荐

sql 笔记(mysql)
Windows 安装mysql(zip包) 1,zip包解压到要安装目录 2,配置环境变量,Path后加mysql路径\bin 3,修改配置文件,mysql目录下my-default.ini base ...
JavaScript学习笔记之数值
JavaScript内部,所有数字都是以64位浮点数形式储存,即使整数也是如此.(整数也是通过64浮点数的形式来存储的) 所以,1+1.0=2:且1===1.0的浮点数不是精确的值,所以涉及小数的比 ...
Java基础-多线程编程-1.随便选择两个城市作为预选旅游目标。实现两个独立的线程分别显示10次城市名，每次显示后休眠一段随机时间(1000ms以内)，哪个先显示完毕，就决定去哪个城市。分别用Runnable接口和Thread类实现。
1.随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread ...
Ado.Net Destination 用法
Ado Net Destination Component 使用Ado net Connection manager,其Data Access Mode 只有一种, table or view,组件的 ...
SQL Server Audit监控触发器状态
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 注意事项(Attention) 疑问(Questions) 参 ...
samba服务器安装，共享nginx目录
Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,类似于win的网上邻居,让windows和linux实现文件共享 1.安装smaba服务 yum install samba ...
android跟服务器使用json传递数据
最近在做项目,使用了json传递数据,把服务器对象转换成json字符串返回,android使用gson包解析json字符串变成对象. 1.服务器代码编写,我这边是在servlet里面 Peron pe ...
OWIN 中 K Commands（OwinHost.exe）与 Microsoft.AspNet.Hosting 的角色问题
问题详情:K Commands(OwinHost.exe)是不是 OWIN 中的 Host 角色?如果是,那 Microsoft.AspNet.Hosting 对应的是 OWIN 中的哪个角色? OW ...
Deadlock Detecting--转
/* Java Threads, 3rd Edition By Scott Oaks, Henry Wong 3rd Edition September 2004 ISBN: 0-596-00782- ...
PowerPoint基础
一.基础默认后缀ppt,pptx office2003和以后的版本只支持ppt, 可以将pptx另存为ppt97-2003 二.修改PPT尺寸三.新建幻灯片四.字体与段落设置五.主题与字体六 ...

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

目录

Action

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

随机推荐

热门专题