（写给像我一样刚离开校园进入公司的小菜鸟）在领域架构下，如何实现简单的展示页面以及增删改查（第二步）
这一片就简单的介绍实现增删改查
首先是显示所有数据
Service=》》》
1 /// <summary> 2 /// 加载所有数据 3 /// </summary> 4 /// <returns></returns> 5 public List<TSETZAaaaInfo> LoadData() 6 { 7 var data = TSETZAaaaModelFactory.ToEntityInfoList(_dbSession.TSETZAaaaRepository.GetAll().ToList()); 8 if (data!=null) 9 { 10 return data; 11 } 12 else 13 { 14 return null; 15 } 16 }
Controller=》》》
1 //新建Index页面 2 public ActionResult Index() 3 { 4 5 return View(); 6 } 7 //返回去所有数据的Json 8 public JsonResult LoadData() 9 { 10 var result = _ITSETZAaaaService.LoadData(); 11 if (result != null) 12 { 13 return Json(result); 14 } 15 else 16 return null; 17 }
Index页面=》》》
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <script src="@Url.Content("~/Scripts//jquery-1.8.0.min.js")" type="text/javascript"></script> 11 <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script> 12 <script src='@Url.Content("~/Scripts/easyui/locale/easyui-lang-zh_CN.js")'></script> 13 <script src='@Url.Content("~/Scripts/viewjs/common.js")' type="text/javascript"></script> 14 <script src='@Url.Content("~/Scripts/viewJs/TSETZAaaa.js")' type="text/javascript"></script> 15 16 @Styles.Render("~/Content/css") 17 @Styles.Render("~/Content/themes/metro/css") 18 @Styles.Render("~/Content/themes/icon.css") 19 @Scripts.Render("~/bundles/home") 20 <meta name="viewport" content="width=device-width" /> 21 <title>Index</title> 22 </head> 23 <body> 24 <div style="width:100%; height:350px" > 25 <table id="dg" > 26 <thead> 27 <tr> 28 <th data-options="field:'Id',width:0" hidden="hidden">ID</th> 29 <th data-options="field:'DaId',width:100">第一列</th> 30 <th data-options="field:'Zah',width:100">第二列</th> 31 <th data-options="field:'Xm',width:100">第三列</th> 32 <th data-options="field:'Gzd',width:100">第四列</th> 33 <th data-options="field:'Remark',width:100">第五列</th> 34 <th data-options="field:'Csrq',width:100,formatter:Common.DateFormatter">第六列</th> 35 <th data-options="field:'Xb',width:100">第七列</th> 36 <th data-options="field:'Mz',width:100">第八列</th> 37 <th data-options="field:'Sfzh',width:100">第九列</th> 38 <th data-options="field:'Fjdz',width:100">第十列</th> 39 <th data-options="field:'Xzz',width:100">第十一列</th> 40 <th data-options="field:'Mqxm',width:100">第十二列</th> 41 <th data-options="field:'Fqxm',width:100">第十三列</th> 42 <th data-options="field:'Mqsfzh',width:100">第十五列</th> 43 <th data-options="field:'Mqsfz',width:100">第十六列</th> 44 <th data-options="field:'Mqmz',width:100">第十七列</th> 45 <th data-options="field:'Fqmz',width:100">第十八列</th> 46 <th data-options="field:'Jwh',width:100">第十九列</th> 47 <th data-options="field:'Zrr',width:100">第二十列</th> 48 <th data-options="field:'Lxdh',width:100">第二十一列</th> 49 <th data-options="field:'Szxx',width:100">第二十二列</th> 50 <th data-options="field:'Jdr',width:100">第二十三列</th> 51 <th data-options="field:'Djdw',width:100">第二十四列</th> 52 <th data-options="field:'Dazt',width:100">第二十五列</th> 53 <th data-options="field:'Djrq',width:100,formatter:Common.DateFormatter">第二十七列</th> 54 55 </thead> 56 </table> 57 </div> 58 <div id="mm" class="easyui-menu" style="width: 100px;"> 59 <div onclick="openDialog(2)" data-options="iconCls:'icon-edit'">编辑</div> 60 <div onclick="Delete()" data-options="iconCls:'icon-remove'">删除</div> 61 </div> 62 @***************** 弹出添加框 ******************@ 63 <div id="dd" class="easyui-dialog" title="My Dialog" 64 style="width: 760px; height: 300px;" closed="true"data-options="iconCls:'icon-save',resizable:true,modal:true"> 65 </div> 66 67 68 69 70 </body> 71 72 </html>
Add页面=》》》
1 @{ 2 Layout = null; 3 } 4 <html> 5 <head> 6 <title>新增</title> 7 <script src='@Url.Content("~/Scripts/viewJs/TSETZAaaa.js")' type="text/javascript"></script> 8 9 </head> 10 <body> 11 <div> 12 <style type="text/css"> 13 td { 14 border-bottom: solid 1px; 15 } 16 </style> 17 <table style="width: 704px; border: 1px solid; border-bottom: 0px; margin-left:20px; margin-top:20px;"> 18 <tr> 19 <td style="background-color: #eaf2ff; width: 150px; height: 50px; text-align: center">第一列：</td> 20 <td style="text-align: center; background-color: #fbfcff; width: 550px"> 21 <input class="easyui-validatebox" style="width: 500px;" type="text" id="DaId" name="DaId" data-options="validType:'length[1,36]'" /> 22 </td> 23 </tr> 24 <tr> 25 26 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第二列：</td> 27 <td style="text-align: center; background-color: #fbfcff"> 28 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Zah" name="Zah" data-options="validType:'length[1,36]'" /> 29 </td> 30 </tr> 31 <tr> 32 33 34 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第三列：</td> 35 <td style="text-align: center; background-color: #fbfcff"> 36 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Xm" name="Xm" data-options="validType:'length[1,36]'" /> 37 </td> 38 </tr> 39 <tr> 40 41 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第四列：</td> 42 <td style="text-align: center; background-color: #fbfcff"> 43 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Gzd" name="Gzd" data-options="validType:'length[1,36]'" /> 44 </td> 45 </tr> 46 <tr> 47 48 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第七列：</td> 49 <td style="text-align: center; background-color: #fbfcff"> 50 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Xb" name="Xb" data-options="validType:'length[1,100]'" /> 51 </td> 52 </tr> 53 <tr> 54 <td colspan="2" style=" height: 50px; text-align: center"> 55 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAdd" onclick="AddSave()" data-options="iconCls:'icon-ok'">确定</a> 56 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript: $('#dd').dialog('close')">关闭</a> 57 </td> 58 </tr> 59 </table> 60 </div> 61 </body> 62 </html>
编辑页面=》》》
1 @{ 2 Layout = null; 3 } 4 @Model MARS.Model.Entities.TSETZAaaaInfo 5 6 <html> 7 <head> 8 <title>修改</title> 9 <script src='@Url.Content("~/Scripts/viewJs/TSETZAaaa.js")' type="text/javascript"></script> 10 </head> 11 <body> 12 <div> 13 <style type="text/css"> 14 td { 15 border-bottom: solid 1px; 16 } 17 </style> 18 <table style="width: 704px; border: 1px solid; border-bottom: 0px; margin-left:20px; margin-top:20px;"> 19 <tr> 20 <td style="background-color: #eaf2ff; width: 150px; height: 50px; text-align: center">第一列：</td> 21 <td style="text-align: center; background-color: #fbfcff; width: 550px"> 22 <input class="easyui-validatebox" style="width: 500px;" type="text" id="DaId" name="DaId" data-options="required:true,validType:'length[1,36]'" value="@Model.DaId" /> 23 </td> 24 </tr> 25 <tr> 26 27 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第二列：</td> 28 <td style="text-align: center; background-color: #fbfcff"> 29 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Zah" name="Zah" data-options="required:true,validType:'length[1,36]'" value="@Model.Zah" /> 30 </td> 31 </tr> 32 <tr> 33 34 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第三列：</td> 35 <td style="text-align: center; background-color: #fbfcff"> 36 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Xm" name="Xm" data-options="required:true,validType:'length[1,36]'" value="@Model.Xm" /> 37 </td> 38 </tr> 39 <tr> 40 41 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第四列：</td> 42 <td style="text-align: center; background-color: #fbfcff"> 43 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Gzd" name="Gzd" data-options="required:true,validType:'length[1,36]'" value="@Model.Gzd" /> 44 </td> 45 </tr> 46 <tr> 47 48 <td style="background-color: #eaf2ff; text-align: center; height: 50px;">第七列：</td> 49 <td style="text-align: center; background-color: #fbfcff"> 50 <input class="easyui-validatebox" style="width: 500px;" type="text" id="Xb" name="Xb" data-options="required:true,validType:'length[1,100]'" value="@Model.Xb" /> 51 </td> 52 </tr> 53 <tr> 54 <td colspan="2" style=" height: 50px; text-align: center"> 55 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" onclick="UpdateSave('@Model.Id')" data-options="iconCls:'icon-ok'">确定</a> 56 57 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript: $('#dd').dialog('close')">关闭</a> 58 </td> 59 </tr> 60 </table> 61 </div> 62 </body> 63 </html>
JS代码页面=》》》
1 $(function () { 2 $('#dg').datagrid({ 3 pageNumber: 1, 4 striped: true, 5 singleSelect: true, 6 loadMsg: '数据加载中请稍后……', 7 pagination: true, 8 rownumbers: true, 9 url: '/TSETZAaaa/LoadData', 10 collapsible: false,//是否可折叠的 11 fit: true,//自动大小 12 toolbar: [{ 13 text: '添加', 14 iconCls: 'icon-add', 15 handler: function () { 16 openDialog(1); 17 } 18 }, '-', { 19 text: '修改', 20 iconCls: 'icon-edit', 21 handler: function () { 22 openDialog(2); 23 } 24 }, '-', { 25 text: '删除', 26 iconCls: 'icon-remove', 27 handler: function () { 28 Delete(); 29 } 30 }], 31 onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件 32 //三个参数：e里面的内容rowIndex就是当前点击时所在行的索引，rowData当前行的数据 33 e.preventDefault(); //阻止浏览器捕获右键事件 34 $(this).datagrid("clearSelections"); //取消所有选中项 35 $(this).datagrid("selectRow", rowIndex); //根据索引选中该行 36 $('#mm').menu('show', { 37 //显示右键菜单 38 left: e.pageX,//在鼠标点击处显示菜单 39 top: e.pageY 40 }); 41 }, 42 }); 43 var p = $('#dg').datagrid('getPager'); 44 $(p).pagination({ 45 pageSize: 10,//每页显示的记录条数，默认为10 46 pageList: [5, 10, 15],//可以设置每页记录条数的列表 47 beforePageText: '第',//页数文本框前显示的汉字 48 afterPageText: '页 共 {pages} 页', 49 displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', 50 }); 51 52 53 }) 54 55 //打开弹窗后在赋值。 56 function openDialog(type) { 57 if (type == 1) {//添加 58 $('#dd').dialog( 59 { 60 title: '添加', 61 width: 760, 62 height: 400, 63 closed: false, 64 cache: false, 65 href: '/TSETZAaaa/Add', 66 modal: true, 67 resizable: false,//不可以鼠标点击改变窗体大小 68 //draggable: false弹出窗体可以拖动，默认为true 69 }); 70 } 71 if (type == 2) {//修改 72 var row = $('#dg').datagrid('getSelected'); 73 if (row == null) { 74 $.messager.alert("操作提示", "请选择一行进行修改!"); 75 return; 76 } 77 var rLength = row.length; 78 if (rLength < 1) { 79 if (row == null) { 80 $.messager.alert("操作提示", "请选择一行进行修改!"); 81 return; 82 } 83 } 84 else if (rLength > 1) { 85 $.messager.alert("操作提示", "您选择了多条记录,只能选择一条记录进行修改!"); 86 return; 87 } 88 //打开弹窗后在赋值。 89 $('#dd').dialog( 90 { 91 title: '修改', 92 width: 760, 93 height: 400, 94 closed: false, 95 cache: false, 96 href: '/TSETZAaaa/Update?Id=' + row.Id, 97 modal: true, 98 }); 99 100 } 101 102 } 103 104 105 106 //添加 107 function AddSave() { 108 var DaId = $('#DaId').val(); 109 var Zah = $('#Zah').val(); 110 var Xm = $('#Xm').val(); 111 var Gzd = $('#Gzd').val(); 112 var Xb = $('#Xb').val(); 113 //if (DaId == null || Zah == "" || Xm == null || Gzd == "" || Xb == "") { 114 // $.messager.alert("消息提示", "缺少必要信息"); 115 // return; 116 //} 117 //else { 118 var postData = { 119 DaId: DaId, 120 Zah: Zah, 121 Xm: Xm, 122 Gzd: Gzd, 123 Xb: Xb 124 }; 125 $.post('/TSETZAaaa/AddSave', postData, function (data) { 126 if (data == "OK") { 127 $('#dg').datagrid('reload'); 128 $("#dd").dialog('close'); 129 $.messager.alert("消息提示", "添加成功"); 130 } 131 else { 132 $.messager.alert("消息提示", "添加失败"); 133 134 } 135 }) 136 } 137 //} 138 139 //修改信息 140 function UpdateSave(id) { 141 var DaId = $('#DaId').val(); 142 var Zah = $('#Zah').val(); 143 var Xm = $('#Xm').val(); 144 var Gzd = $('#Gzd').val(); 145 var Xb = $('#Xb').val(); 146 //if (DaId == null || Zah == "" || Xm == null || Gzd == "" || Xb == "") { 147 // $.messager.alert("消息提示", "缺少必要信息"); 148 // return; 149 //} 150 //else { 151 var postData = { 152 DaId: DaId, 153 Zah: Zah, 154 Xm: Xm, 155 Gzd: Gzd, 156 Xb: Xb, 157 Id:id 158 }; 159 $.post('/TSETZAaaa/UpdateSave', postData, function (data) { 160 if (data == "OK") { 161 $('#dg').datagrid('reload'); 162 $("#dd").dialog('close'); 163 $.messager.alert("消息提示", "修改成功"); 164 return false; 165 166 } 167 else { 168 $.messager.alert("消息提示", "修改失败"); 169 return false; 170 171 } 172 }) 173 } 174 //} 175 176 //删除 177 function Delete() { 178 var row = $('#dg').datagrid('getSelected'); 179 if (row == null) { 180 $.messager.alert("操作提示", "请选择一行进行删除!"); 181 return; 182 } 183 $.messager.confirm("操作提示", "你确定要执行删除吗？", function (data) { 184 $.post("/TSETZAaaa/Delete/", { id: row.Id }, function (data) { 185 if (data == "OK") { 186 $('#dg').datagrid('reload'); 187 $("#dd").dialog('close'); 188 $.messager.alert("消息提示", "删除成功"); 189 return false; 190 191 } 192 else { 193 $.messager.alert("消息提示", "删除失败"); 194 return false; 195 196 } 197 }) 198 }) 199 }
