系列目录

本节知识点

为了符合后面更新后的重构系统，文章于2016-11-1日重写

EasyUI读取MVC后台Json数据

开始实现

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

首先从前端入手，开打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添加GetList方法给视图的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的格式

其实有心的童鞋会发现下载的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"}

]}

我们看到示例中的Demo Json格式，后台必须返回符合Easyui读取的Json格式数

ASP.NET MVC5+EF6+EasyUI 后台管理系统（7）-MVC与EasyUI DataGrid的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）

    前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...

  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]

    系列目录 前言 为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字 我们有了一系列的解决方案,我们将动手搭建新系统吧. 后台系统没有多大的UI视觉,这次我们采用的是标准的左右 ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（50）-Easyui 扁平化皮肤

    最近抽了点时间仿做了点皮肤,只供欣赏!扁平化

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（转）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理   http://ww ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入

    系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（51）-系统升级

    系统很久没有更新内容了,期待已久的更新在今天发布了,最近花了2个月的时间每天一点点,从原有系统 MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+E ...

  9. 构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统

    开篇:从50开始系统已经由MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4. ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试

    1:ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-WebApi与Unity注入 使用Unity是为了使用我们后台的BLL和DAL层 2:ASP.NET MVC5+EF6+Easy ...

随机推荐

  1. 【组织级项目管理】P2 MSP P3O

    组织级项目管理--有你,有我,有大家 在过去的2年,无论对于企业来讲,还是对于我们个人都有很多大脑的冲击,有几个词大家应该特别耳熟能详:转型,变革,敏捷,互联网+,组织的项目化管理等.就是这些让我们的 ...

  2. 转：serialVersionUID作用

    汗,以前学了还忘了... Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本 ...

  3. redis集成到Springmvc中及使用实例

    redis是现在主流的缓存工具了,因为使用简单.高效且对服务器要求较小,用于大数据量下的缓存 spring也提供了对redis的支持: org.springframework.data.redis.c ...

  4. Servlet监听器笔记总结

    监听器Listener的概念 监听器的概念很好理解,顾名思义,就是监视目标动作或状态的变化,目标一旦状态发生变化或者有动作,则立马做出反应. Servlet中的也有实现监听器的机制,就是Listene ...

  5. 关于BAPI_PATIENT_CREATE（病患主数据创建）

    第一次使用BAPI,遇到几个问题.现总结如下. CALL FUNCTION 'BAPI_PATIENT_CREATE' EXPORTING client = * INSTITUTION = '*' * ...

  6. BPM配置故事之案例7-公式计算

    行政主管发来邮件.要求物资明细表增加"单价""总价"."单价"由其审批时填写,"总价"根据"单价"与 ...

  7. Android studio使用gradle动态构建APP(不同的包,不同的icon、label)

    最近有个需求,需要做两个功能相似的APP,大部分代码是一样的,只是界面不一样,以前要维护两套代码,比较麻烦,最近在网上找资料,发现可以用gradle使用同一套代码构建两个APP.下面介绍使用方法: 首 ...

  8. Oracle SQL Developer 连接 MySQL

    1. 在ORACLE官网下载Oracle SQL Developer第三方数据库驱动 下载页面:http://www.oracle.com/technetwork/developer-tools/sq ...

  9. T-SQL字符串相加之后被截断的那点事

    本文出处:http://www.cnblogs.com/wy123/p/6217772.html 字符串自身相加, 虽然赋值给了varchar(max)类型的变量,在某些特殊情况下仍然会被“截断”,这 ...

  10. 《Ansible权威指南》笔记（2）——Inventory配置

    四.Inventory配置ansible通过Inventory来定义主机和组,使用时通过-i指定读取,默认/etc/ansible/hosts.可以存在多个Inventory,支持动态生成.1.定义主 ...