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

随机推荐

python & mongo问题记录
背景介绍使用python操作mongo进行的一些操作记录,为了方便日后可以快速的解决类似问题. 准备工作为了尽可能简单的说明,我将插入几条简单的数据. from pymongo import Mo ...
android studio sdk 不能更新
网上看到好多sdk不能更新的,解决办法基本上一下,试了下大都没用,,有人说改hosts ,我试了貌似没用下面是我亲测可以更新的一种方法:使用镜像地址更新步骤: 1. 打开 SDK Manager ...
ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
Entity Framework Code First实体对象变动跟踪
Entity Framework Code First通过DbContext.ChangeTracker对实体对象的变动进行跟踪,实现跟踪的方式有两种:变动跟踪快照和变动跟踪代理. 变动跟踪快照:前面 ...
Ubuntu 14.04 64bit 安装tensorflow（GPU版本）
本博客主要用于在Ubuntu14.04 64bit 操作系统上搭建google开源的深度学习框架tensorflow. 0.安装CUDA和cuDNN 如果要安装GPU版本的tensorflow,就必须 ...
eclipse导入web项目之后项目中出现小红叉解决办法
项目中有小红叉我遇到的最常见的情况: 1.项目代码本身有问题.(这个就不说了,解决错误就OK) 2.项目中的jar包丢失.(有时候eclipse打开时会出现jar包丢失的情况,关闭eclipse重新打 ...
将 instance 连接到 vlan100- 每天5分钟玩转 OpenStack（95）
上一节我们创建了 vlan100,今天将部署两个 instance 到 vlan 并验证其连通性. 同时我们也将讨论底层网络结构的变化. launch 新的 instance "cirros ...
iOS开发之表视图爱上CoreData
在接触到CoreData时,感觉就是苹果封装的一个ORM.CoreData负责在Model的实体和sqllite建立关联,数据模型的实体类就相当于Java中的JavaBean, 而CoreData的功 ...
连连看游戏（dfs）【华为上机题目】
1 连连看游戏今天同学给我做了道编程题目,貌似是华为的,题目描述大概是这样的: 给定一个连连看棋盘,棋盘上每个点都有各种图案(用非0数字表示),输入棋盘上的任意两个左标,判断这两个坐标对应的图案是否 ...
EasyUI+MVC+EF简单用户管理Demo（问题及解决）
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定新增.修改和删除数据效果 ...

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

目录

Action

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

随机推荐

热门专题