原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（7）-MVC与EasyUI DataGrid

没有源码的同学跳到第六讲下载源码再来。

我们需要漂亮的UI，不要系统自动生成的垃圾UI。我们在大数据面前，我们要减少页面的压力，不要在页面遍历List

我们选择Easyui的DataGrid最为本系统的表格展示效果

本节知识点：

  • 根据DataGrid json格式在controller制作json格式给DataGrid用

我们的系统似乎越来越有趣了、

首先从前端入手，开打View下面的Shared创建一个视图模版

<!DOCTYPE html>

<html>

<head>

    <title>Main</title>

    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

     <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>

    @Styles.Render("~/Content/css")

    @Styles.Render("~/Content/themes/blue/css")

</head>

<body>

    <div style="padding:5px 5px 0px 5px;">

        @RenderBody()

    </div>

</body>

</html>

_Index_Layout.cshtml

以后我们系统用到的index视图基本要引用这个模版

@using App.Admin;

@using App.Common;

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Index_Layout.cshtml";

}

<table id="List"></table>

<script type="text/javascript">

    $(function () {

        $('#List').datagrid({

            url: '/SysSample/GetList',

            width: $(window).width() - ,

            methord: 'post',

            height: $(window).height() -,

            fitColumns: true,

            sortName: 'Id',

            sortOrder: 'desc',

            idField: 'Id',

            striped: true, //奇偶行是否区分

            singleSelect: true,//单选模式

            rownumbers: true,//行号

            columns: [[

                { field: 'Id', title: 'ID', width:  },

                { field: 'Name', title: '名称', width:  },

                { field: 'Age', title: '年龄', width: , align: 'right' },

                { field: 'Bir', title: '生日', width: , align: 'right' },

                { field: 'Photo', title: '照片', width:  },

                { field: 'Note', title: '说明', width: , align: 'center' },

                { field: 'CreateTime', title: '创建时间', width: , align: 'center' }

            ]]

        });

    });

</script>

index.cshtml

在SysSampleController添加GetLists方法给视图的AJAX使用

 [HttpPost]

        public JsonResult GetList()

        {

            List<SysSampleModel> list = m_BLL.GetList("");

            var json = new

            {

                total = list.Count,

                rows = (from r in list

                        select new SysSampleModel()

                        {

                            Id = r.Id,

                            Name = r.Name,

                            Age = r.Age,

                            Bir = r.Bir,

                            Photo = r.Photo,

                            Note = r.Note,

                            CreateTime = r.CreateTime,

                        }).ToArray()

            };

            return Json(json, JsonRequestBehavior.AllowGet);

        }

预览一下效果

有的童鞋可能有疑问了，问我怎么知道要返回这么json格式给datagrid。

其实有心的童鞋会发现下载的easyui包里面有个demo文件，我们打开datagrid样例的文件夹找到

{"total":,"rows":[

    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

    {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

    {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

    {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

]}

我是根据这个来的，你学会了吗？

此时有的童鞋又有疑问了你怎么知道你返回的对不对，假如你的谷歌或者火狐浏览器那你可以看到你返回的json类型

童鞋你懂了吗？慢慢拼出符合的格式。

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（7）-MVC与EasyUI DataGrid的更多相关文章

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（14）-EasyUI缺陷修复与扩展

    系列目录 不知不觉已经过了13讲,(本来还要讲多一讲是,数据验证之自定义验证,基于园友还是对权限这块比较敢兴趣,讲不讲验证还是看大家的反映),我们应该对系统有一个小结.首先这是一个团队开发项目,基于接 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（1）-前言与目录（持续更新中...）

    转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（48）-工作流设计-起草新申请

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请 系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分 ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（47）-工作流设计-补充

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充 系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（46）-工作流设计-设计分支

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支 系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元( ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（45）-工作流设计-设计步骤

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（43）-工作流设计-字段分类设计

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(43)-工作流设计-字段分类设计 系列目录 建立好42节的表之后,每个字段英文表示都是有意义的说明.先建立 ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（42）-工作流设计01

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(42)-工作流设计01 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工 ...

随机推荐

  1. 让QMainWindow也表现出QDialog的exec函数的特征

    前几天在做毕业设计项目的时候,使用的PyQt4,想实现这么样一个功能: 场景描述:主窗口a(QMainWindow类型)和主窗口b(QMainWindow),b是通过a窗口中某一个按钮弹出来的. 功能 ...

  2. Android特效--粒子效果之雨

    1. 单个雨点的行为 2. 完善雨点的行为和构造下雨场景 3. 在XML中定义可以控制下雨的属性 --------------------------------------------------- ...

  3. ASP.NET MVC轻教程 Step By Step 10——模型验证

    在使用表单获取用户输入的数据时,我们必须对数据进行有效性验证,因为来自网络的信息都是不可信的.同时也要给用户即时的反馈,避免让用户感到困惑.这就涉及到数据验证的范畴. 数据验证最直接的做法是在服务器端 ...

  4. 关于Memcache使用的工具类

    分布式缓存有它自己的好处 . 下面的 ConstValue.sessionId  是一个常量 public static readonly string sessionId = "sessi ...

  5. Android 开发遇到的问题及解决办法

    Failed to resolve: com.android.support:appcompat-v7:23.4.0 问题解决办法: 1.在Android SDK Manager中找到对应的SDK版本 ...

  6. CodeChef CBAL

    题面: https://www.codechef.com/problems/CBAL 题解: 可以发现,我们关心的仅仅是每个字符出现次数的奇偶性,而且字符集大小仅有 26, 所以我们状态压缩,记 a[ ...

  7. BZOJ 1003 物流运输trans

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  8. 【技术贴】SqlServer2008 R2 安装失败提示出现以下错误 服务 MSSQLSERVERO

    Feature: Analysis Services  Status: 失败: 请查看日志了解详细信息  MSI status: 已通过  Configuration status: 失败: 请查看下 ...

  9. nodejs服务

    http://www.csser.com/board/4f55035305ee2e572400005e http://blog.fens.me/nodejs-server-forever/ http: ...

  10. Apache OFBiz

    Apache OFBiz® Apache OFBiz offers a great deal of functionality, including: advanced e-commerce cata ...