ASP.NET MVC5+EF6+EasyUI 后台管理系统(7)-MVC与EasyUI DataGrid

本节知识点

为了符合后面更新后的重构系统,文章于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视图基本要引用这个模版

@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() - 10,
            methord: 'post',
            height: $(window).height() -35,
            fitColumns: true,
            sortName: 'Id',
            sortOrder: 'desc',
            idField: 'Id',
            striped: true, //奇偶行是否区分
            singleSelect: true,//单选模式
            rownumbers: true,//行号
            columns: [[
                { field: 'Id', title: 'ID', width: 80 },
                { field: 'Name', title: '名称', width: 120 },
                { field: 'Age', title: '年龄', width: 80, align: 'right' },
                { field: 'Bir', title: '生日', width: 80, align: 'right' },
                { field: 'Photo', title: '照片', width: 250 },
                { field: 'Note', title: '说明', width: 60, align: 'center' },
                { field: 'CreateTime', title: '创建时间', width: 60, align: 'center' }
            ]]
        });
    });
</script>

在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":28,"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格式数

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BinarySec

一些pwn题目的解题思路[pwnable.kr] II

目录 以下是solution的目录 #mistake #shellshock #coin1 #blackjack #lotto #cmd1 Other 一些pw...

3805
来自专栏Golang语言社区

Golang语言 实现线程池

1 type GoroutinePool struct { 2 Queue chan func() error 3 Number int ...

6977
来自专栏小巫技术博客

Retrofit2 &amp; RxJava2实现单文件和多文件上传

4834
来自专栏余林丰

SpringMVC——DispatcherServlet的IoC容器(Web应用的IoC容器的子容器)创建过程

在上一篇《Spring——Web应用中的IoC容器创建(WebApplicationContext根应用上下文的创建过程)》中说到了Web应用中的IoC容器创建...

2405
来自专栏芋道源码1024

面试问烂的 Spring MVC 过程

来源:https://www.jianshu.com/p/e18fd44964eb

1453
来自专栏程序员的酒和故事

Go实战--实现简单的restful api

生命不止,继续 Go go go !!! 今天跟大家介绍一下如何使用go创建一套restful api,我们依托于开源库gorilla/mux。 let’s g...

3614
来自专栏草根专栏

使用angular4和asp.net core 2 web api做个练习项目(一)

这是一篇学习笔记. angular 5 正式版都快出了, 不过主要是性能升级. 我认为angular 4还是很适合企业的, 就像.net一样. 我用的是wind...

6775
来自专栏Java成神之路

Java微信公众平台开发_03_消息管理之被动回复消息

上一节,我们启用服务器配置的时候,填写了一个服务器地址(url),如下图,这个url就是回调url,是开发者用来接收微信消息和事件的接口URL 。也就是说,用户...

9955
来自专栏一个会写诗的程序员的博客

Kotlin 全栈开发之 前端 JavaScrip

Kotlin 全栈开发之 前端 JavaScript: Getting Started with Kotlin and JavaScript with Gra...

1983
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(27)-权限管理系统-分配用户给角色

分配用户给角色,跟分配角色给用户操作是基本一致的。 打开模块维护,展开SysRole模块添加一个操作码,并赋予权限 ? 设置好之后将权限授权给管理员,在SysR...

2158

扫码关注云+社区