zoukankan      html  css  js  c++  java
  • 【MVC+EasyUI实例】对数据网格的增删改查(上)

    前言
    此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述。
    界面如下:
    点击“添加”按钮, 添加产品
     选中某条信息,修改产品
    一、导入数据模型
    Models文件夹添加实体数据模型,这里使用的是根据数据库生成实体

     二、添加控制器
     三、添加视图
    四、编写视图的代码
    利用easyui布局,当然注意引入相关的js和css文件
    1. @model MvcEasyUIDemo.Models.Products
    2. @{
    3. ViewBag.Title = "产品管理";
    4. }
    5. <script src="~/Scripts/jquery.easyui.min.js"></script>
    6. @Scripts.Render("~/bundles/home")
    7. @Styles.Render("~/Content/HomeCss")
    8. <style>
    9. #dlg {
    10. padding:5px;
    11. }
    12. #dlg .format{
    13. margin:15px;
    14. }
    15. #dlg .format input{
    16. border-radius:3px;
    17. margin-left:10px;
    18. }
    19. </style>
    20. <h2>产品管理</h2>
    21. <table id="dg"></table>
    22. <div id="dg-button">
    23. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="Reload()">刷新</a>
    24. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="Add()">添加</a>
    25. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="Edit()">修改</a>
    26. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="Delete()">删除</a>
    27. <div id="dg-search">
    28. <label for="Name">查询:</label>
    29. <input id="Name" class="easyui-validatebox" data-options="200" />
    30. <select id="order" class="easyui-combobox" data-options="100">
    31. <option value="asc">升序</option>
    32. <option value="desc">降序</option>
    33. </select>
    34. <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">查询</a>
    35. </div>
    36. </div>
    37. <div id="dlg" class="easyui-dialog" data-options="closed:true,title:'产品',buttons:'#dlg-button'">
    38. <form id="dlg-form">
    39. <div class="format">
    40. <label for="ProductID">编&#12288;&#12288;号</label>
    41. <input id="ProductID" name="ProductID" class="easyui-validatebox" data-options="required:false" />
    42. </div>
    43. <div class="format">
    44. <label for="Name">产品名称</label>
    45. <input id="Name" name="Name" class="easyui-validatebox" data-options="required:true" />
    46. </div>
    47. <div class="format">
    48. <label for="Description">描&#12288;&#12288;述</label>
    49. <input id="Description" name="Description" class="easyui-validatebox" data-options="required:true" />
    50. </div>
    51. <div class="format">
    52. <label for="Category">品&#12288;&#12288;类</label>
    53. <input id="Category" name="Category" class="easyui-validatebox" data-options="required:true" />
    54. </div>
    55. <div class="format">
    56. <label for="Price">价&#12288;&#12288;格</label>
    57. <input id="Price" name="Price" class="easyui-validatebox" data-options="required:true" />
    58. </div>
    59. </form>
    60. <div id="dlg-button">
    61. <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="Save()">保存</a>
    62. <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="JavaScript:$('#dlg').dialog('close')">取消</a>
    63. </div>
    64. </div>
    这里的
    1. @Scripts.Render("~/bundles/home")
    2. @Styles.Render("~/Content/HomeCss")
    是在App_Start文件夹里的BundleConfig配置文件配置的,配置的具体地址根据你项目实际地址为准。
    1. bundles.Add(new ScriptBundle("~/bundles/home").Include(
    2. "~/Scripts/home.js"));
    3. bundles.Add(new StyleBundle("~/Content/HomeCss").Include(
    4. "~/Content/themes/icon.css",
    5. "~/Content/themes/default/easyui.css"));
    五、编写easyui的js加载部分代码
    1. $(function () {
    2. $("#dg").datagrid({
    3. title: '产品管理',
    4. url: 'Home/GetProductList',
    5. columns: [[
    6. { field: 'ProductID', title: 'ID', width: 150 },
    7. { field: 'Name', title: '产品名称', width: 150 },
    8. { field: 'Description', title: '描述', width: 250 },
    9. { field: 'Category', title: '品类', width: 150 },
    10. { field: 'Price', title: '价格', width: 150 }
    11. ]],
    12. toolbar: '#dg-button',
    13. singleSelect:true,
    14. pagination: true,
    15. pageSize: 10,
    16. pageList: [10, 20, 30],
    17. method: 'get'
    18. });
    19. })
    这里注意columns部分的字段名称要和数据库的一致。这里就是利用了url的地址来加载数据的,并不需要向以前一样做一个一般处理程序了,只要在原来的Home控制器里添加一个方法来返回数据即可。
    1. public ActionResult GetProductList() {
    2. var pageSize = Request["rows"] == "" ? 10 : int.Parse(Request["rows"]);
    3. var pageNumber = Request["page"] == "" ? 1 : int.Parse(Request["page"]);
    4. string Name=string.Empty, order=string.Empty;
    5. if(Request["Name"]!=""){
    6. Name=Request["Name"];
    7. }
    8. if(Request["order"]!=""){
    9. order=Request["order"];
    10. }
    11. IQueryable<Products> products;
    12. if (!string.IsNullOrEmpty(Name))
    13. {
    14. products = sse.Products.OrderBy(x => x.Name).Where(x=>x.Name.Contains(Name)).Skip((pageNumber - 1) * pageSize).Take(pageSize);
    15. }
    16. else {
    17. products = sse.Products.OrderBy(x => x.ProductID).Skip((pageNumber - 1) * pageSize).Take(pageSize);
    18. }
    19. var total = sse.Products.Count();
    20. var list = new PageViewModel { rows = products, total = total };
    21. return Json(list,JsonRequestBehavior.AllowGet);
    22. }
    注意:这里要利用Json()方法包装数据,返回json格式的数据
    其中,PageViewModel是我们为了UI的显示做的一个视图模型ViewModel,放在Models文件夹中
    1. public class PageViewModel
    2. {
    3. public int total { get; set; }
    4. public IQueryable<Products> rows { get; set; }
    5. }
    到这里,网格的数据加载呈现就写好了。
    还剩增删改的功能。 
  • 相关阅读:
    HDU 1010 Tempter of the Bone(DFS剪枝)
    HDU 1013 Digital Roots(九余数定理)
    HDU 2680 Choose the best route(反向建图最短路)
    HDU 1596 find the safest road(最短路)
    HDU 2072 单词数
    HDU 3790 最短路径问题 (dijkstra)
    HDU 1018 Big Number
    HDU 1042 N!
    NYOJ 117 求逆序数 (树状数组)
    20.QT文本文件读写
  • 原文地址:https://www.cnblogs.com/iwsx/p/7201207.html
Copyright © 2011-2022 走看看