系列目录

本节知识点

为了符合后面更新后的重构系统，文章于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. 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  2. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  3. 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息？

    HostingEnvironment是承载应用当前执行环境的描述,它是对所有实现了IHostingEnvironment接口的所有类型以及对应对象的统称.如下面的代码片段所示,一个HostingEnv ...

  4. 模仿Linux内核kfifo实现的循环缓存

    想实现个循环缓冲区(Circular Buffer),搜了些资料多数是基于循环队列的实现方式.使用一个变量存放缓冲区中的数据长度或者空出来一个空间来判断缓冲区是否满了.偶然间看到分析Linux内核的循 ...

  5. 3种web会话管理的方式

    http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端. ...

  6. 一个软件开发者的BPM之路

    我是小林,一名普通的软件工程师,从事BPM(业务流程管理)软件开发工作.我没有几十年的技术底蕴,无法像大牛们一样高谈阔论,品评BPM开发之道:也不是资深的流程管理专家,能与大家分析流程管理的时弊.我只 ...

  7. php安装threads多线程扩展

    php5.3或以上,且为线程安全版本.apache和php使用的编译器必须一致.通过phpinfo()查看Thread Safety为enabled则为线程安全版.通过phpinfo()查看Compi ...

  8. BRDF 光照模型

    http://blog.csdn.net/liu_lin_xm/article/details/4846144

  9. CentOS 6.5安装Node.js, npm

    CentOS上可以通过下载*.tar.gz安装包的方式自己解压缩.编译的方式安装,同时还可以采用EPEL的方式安装: Node.js and npm are available from the Fe ...

  10. Linux下部署ASP.NET服务连接oracle遇到的问题记录

    一.如何卸载MONO Q:mono是linux系统上跨平台软件,卸载它有两种方式: 1.知道mono安装路径,安装原来的路径直接覆盖安装(最为简单): 2.不知道mono安装路径,首先通过sudo f ...