此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述。
界面如下:
![](https://images2015.cnblogs.com/blog/815947/201707/815947-20170718163150646-339947652.png)
点击“添加”按钮, 添加产品
![](https://images2015.cnblogs.com/blog/815947/201707/815947-20170718163152349-69253079.png)
选中某条信息,修改产品
![](https://images2015.cnblogs.com/blog/815947/201707/815947-20170718163153630-1713970254.png)
一、导入数据模型
Models文件夹添加实体数据模型,这里使用的是根据数据库生成实体
![](https://images2015.cnblogs.com/blog/815947/201707/815947-20170718163154646-1941463828.png)
二、添加控制器
![](https://images2015.cnblogs.com/blog/815947/201707/815947-20170718163200052-55186492.png)
三、添加视图
![](https://images2015.cnblogs.com/blog/815947/201707/815947-20170718163200630-1979102012.png)
四、编写视图的代码
利用easyui布局,当然注意引入相关的js和css文件
@model MvcEasyUIDemo.Models.Products
@{
ViewBag.Title = "产品管理";
}
<script src="~/Scripts/jquery.easyui.min.js"></script>
@Scripts.Render("~/bundles/home")
@Styles.Render("~/Content/HomeCss")
<style>
#dlg {
padding:5px;
}
#dlg .format{
margin:15px;
}
#dlg .format input{
border-radius:3px;
margin-left:10px;
}
</style>
<h2>产品管理</h2>
<table id="dg"></table>
<div id="dg-button">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="Reload()">刷新</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="Add()">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="Edit()">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="Delete()">删除</a>
<div id="dg-search">
<label for="Name">查询:</label>
<input id="Name" class="easyui-validatebox" data-options="width:200" />
<select id="order" class="easyui-combobox" data-options="width:100">
<option value="asc">升序</option>
<option value="desc">降序</option>
</select>
<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">查询</a>
</div>
</div>
<div id="dlg" class="easyui-dialog" data-options="closed:true,title:'产品',buttons:'#dlg-button'">
<form id="dlg-form">
<div class="format">
<label for="ProductID">编  号</label>
<input id="ProductID" name="ProductID" class="easyui-validatebox" data-options="required:false" />
</div>
<div class="format">
<label for="Name">产品名称</label>
<input id="Name" name="Name" class="easyui-validatebox" data-options="required:true" />
</div>
<div class="format">
<label for="Description">描  述</label>
<input id="Description" name="Description" class="easyui-validatebox" data-options="required:true" />
</div>
<div class="format">
<label for="Category">品  类</label>
<input id="Category" name="Category" class="easyui-validatebox" data-options="required:true" />
</div>
<div class="format">
<label for="Price">价  格</label>
<input id="Price" name="Price" class="easyui-validatebox" data-options="required:true" />
</div>
</form>
<div id="dlg-button">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="Save()">保存</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="JavaScript:$('#dlg').dialog('close')">取消</a>
</div>
</div>
这里的
@Scripts.Render("~/bundles/home")
@Styles.Render("~/Content/HomeCss")
是在App_Start文件夹里的BundleConfig配置文件配置的,配置的具体地址根据你项目实际地址为准。
bundles.Add(new ScriptBundle("~/bundles/home").Include(
"~/Scripts/home.js"));
bundles.Add(new StyleBundle("~/Content/HomeCss").Include(
"~/Content/themes/icon.css",
"~/Content/themes/default/easyui.css"));
五、编写easyui的js加载部分代码
$(function () {
$("#dg").datagrid({
title: '产品管理',
url: 'Home/GetProductList',
columns: [[
{ field: 'ProductID', title: 'ID', width: 150 },
{ field: 'Name', title: '产品名称', width: 150 },
{ field: 'Description', title: '描述', width: 250 },
{ field: 'Category', title: '品类', width: 150 },
{ field: 'Price', title: '价格', width: 150 }
]],
toolbar: '#dg-button',
singleSelect:true,
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
method: 'get'
});
})
这里注意columns部分的字段名称要和数据库的一致。这里就是利用了url的地址来加载数据的,并不需要向以前一样做一个一般处理程序了,只要在原来的Home控制器里添加一个方法来返回数据即可。
public ActionResult GetProductList() {
var pageSize = Request["rows"] == "" ? 10 : int.Parse(Request["rows"]);
var pageNumber = Request["page"] == "" ? 1 : int.Parse(Request["page"]);
string Name=string.Empty, order=string.Empty;
if(Request["Name"]!=""){
Name=Request["Name"];
}
if(Request["order"]!=""){
order=Request["order"];
}
IQueryable<Products> products;
if (!string.IsNullOrEmpty(Name))
{
products = sse.Products.OrderBy(x => x.Name).Where(x=>x.Name.Contains(Name)).Skip((pageNumber - 1) * pageSize).Take(pageSize);
}
else {
products = sse.Products.OrderBy(x => x.ProductID).Skip((pageNumber - 1) * pageSize).Take(pageSize);
}
var total = sse.Products.Count();
var list = new PageViewModel { rows = products, total = total };
return Json(list,JsonRequestBehavior.AllowGet);
}
注意:这里要利用Json()方法包装数据,返回json格式的数据
其中,PageViewModel是我们为了UI的显示做的一个视图模型ViewModel,放在Models文件夹中
public class PageViewModel
{
public int total { get; set; }
public IQueryable<Products> rows { get; set; }
}
到这里,网格的数据加载呈现就写好了。
还剩增删改的功能。