【MVC+EasyUI实例】对数据网格的增删改查（上）

前言

此案例是针对之前做的一个小例子的后台框架的修改，从以前的三层框架改为现在的MVC框架，也是做了一次MVC和EasyUI的结合，分为2篇文章来阐述。

界面如下：

点击“添加”按钮， 添加产品

 选中某条信息，修改产品

一、导入数据模型

Models文件夹添加实体数据模型，这里使用的是根据数据库生成实体

 二、添加控制器

 三、添加视图

四、编写视图的代码

利用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">编&#12288;&#12288;号</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">描&#12288;&#12288;述</label>
            <input id="Description" name="Description" class="easyui-validatebox" data-options="required:true" />
        </div>
        <div class="format">
            <label for="Category">品&#12288;&#12288;类</label>
            <input id="Category" name="Category" class="easyui-validatebox" data-options="required:true" />
        </div>
        <div class="format">
            <label for="Price">价&#12288;&#12288;格</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; }
    }

到这里，网格的数据加载呈现就写好了。

还剩增删改的功能。