【MVC+EasyUI實例】對數據網格的增刪改查（上）

前言

此案例是針對以前作的一個小例子的後臺框架的修改，從之前的三層框架改成如今的MVC框架，也是作了一次MVC和EasyUI的結合，分爲2篇文章來闡述。

界面以下：

點擊「添加」按鈕， 添加產品

 選中某條信息，修改產品

1、導入數據模型

Models文件夾添加實體數據模型，這裏使用的是根據數據庫生成實體

 2、添加控制器

 3、添加視圖

4、編寫視圖的代碼

利用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"));

5、編寫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; } }

到這裏，網格的數據加載呈現就寫好了。

還剩增刪改的功能。