ASP.NET MVC5+EF6+EasyUI 后台管理系统(7)-MVC与EasyUI DataGrid
时间:2022-04-22
本文章向大家介绍ASP.NET MVC5+EF6+EasyUI 后台管理系统(7)-MVC与EasyUI DataGrid,主要内容包括本节知识点、开始实现、Json的格式、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
本节知识点
为了符合后面更新后的重构系统,文章于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格式数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 远程过程调用 Java RMI 技术 远程控制
- Real-time Xenomai 3 example 1
- Electron 常见问题收录II
- SQL性能调优技巧
- Linux查看CUDA版本以及cudnn版本号
- 数据结构算法操作试题(C++/Python)——最长有效括号
- 数据结构算法操作试题(C++/Python)——两两交换链表中的节点
- 数据结构算法操作试题(C++/Python)——最大子序和
- 数据结构算法操作试题(C++/Python)——四数之和
- 数据结构算法操作试题(C++/Python)——在排序数组中查找元素的第一个和最后一个位置
- 数据结构算法操作试题(C++/Python)——搜索旋转排序数组
- 数据结构算法操作试题(C++/Python)——最后一个单词的长度
- IDEA 自动生成类注释和方法注释
- 包管理工具yarn的安装和使用详细介绍
- redis学习(九)