构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）2014-08-10MVC与EasyUI结合增删改查

在第八讲中，我们已经做到了怎么样分页。这一讲主要讲增删改查。第六讲的代码已经给出，里面包含了增删改，大家可以下载下来看下。这讲主要是，制作漂亮的工具栏，虽然easyui的datagrid已经自带可以设置工具栏，我们还是要提取出来，为以后权限控制做更好的准备。

前端代码没有逻辑结果，这也许是我写代码以来写得最轻松的，但也是最繁琐的，因为美工我不是强项，每一次调整都非常的困难，最后我把他调成了这样了：

看得过去的鼓掌一下。样式已经包含在附加代码中了。

大家只要加入以下HTML代码到index上就可以了

<div class="mvctool"><input id="txtQuery" type="text" class="searchText"><a id="btnQuery" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-search" style="padding-left: 20px;">查询</span></span></a><div class="datagrid-btn-separator"></div><a id="btnCreate" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-add" style="padding-left: 20px;">新增</span></span></a><div class="datagrid-btn-separator"></div><a id="btnEdit" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-edit" style="padding-left: 20px;">编辑</span></span></a><div class="datagrid-btn-separator"></div><a id="btnDetails" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-details" style="padding-left: 20px;">详细</span></span></a><div class="datagrid-btn-separator"></div><a id="btnDelete" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-remove" style="padding-left: 20px;">删除</span></span></a><div class="datagrid-btn-separator"></div><a id="btnExport" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-export" style="padding-left: 20px;">导出</span></span></a><a id="btnReload" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-reload" style="padding-left: 20px;">刷新</span></span></a></div>

有能力的朋友再优化一下样式

好，我们用jquery为按钮添加事件。增、删、改、查，把导出和刷新删掉吧。没用到

在index加入以下代码js代码

<script type="text/javascript">//ifram 返回function frameReturnByClose（） {$（"#modalwindow"）.window（"close"）;}//iframe 返回并刷新function frameReturnByReload（flag） {if （flag）$（"#List"）.datagrid（"load"）;else$（"#List"）.datagrid（"reload"）;}//输出信息function frameReturnByMes（mes） {$.messageBox5s（"提示", mes）;}$（function （） {$（"#btnCreate"）.click（function （） {$（"#modalwindow"）.html（"<iframe width="100%" height="98%" scrolling="no" frameborder="0"" src="/SysSample/Create"></iframe>"）;$（"#modalwindow"）.window（{ title: "新增", width: 700, height: 400, iconCls: "icon-add" }）.window（"open"）;}）;$（"#btnEdit"）.click（function （） {var row = $（"#List"）.datagrid（"getSelected"）;if （row ！= null） {$（"#modalwindow"）.html（"<iframe width="100%" height="99%"frameborder="0" src="/SysSample/Edit？id=" + row.Id + "&Ieguid=" + GetGuid（） + ""></iframe>"）;$（"#modalwindow"）.window（{ title: "编辑", width: 700, height: 430, iconCls: "icon-edit" }）.window（"open"）;} else { $.messageBox5s（"提示", "请选择要操作的记录"）; }}）;$（"#btnDetails"）.click（function （） {var row = $（"#List"）.datagrid（"getSelected"）;if （row ！= null） {$（"#modalwindow"）.html（"<iframe width="100%" height="98%" scrolling="no" frameborder="0" src="/SysSample/Details？id=" + row.Id + "&Ieguid=" + GetGuid（） + ""></iframe>"）;$（"#modalwindow"）.window（{ title: "详细", width: 500, height: 300, iconCls: "icon-details" }）.window（"open"）;} else { $.messageBox5s（"提示", "请选择要操作的记录"）; }}）;$（"#btnQuery"）.click（function （） {var queryStr = $（"#txtQuery"）.val（）;//如果查询条件为空默认查询全部if （queryStr == null） {queryStr = "%";}$（"#List"）.datagrid（{url: "/SysSample/GetList？queryStr=" + encodeURI（queryStr）}）;}）;$（"#btnDelete"）.click（function （） {var row = $（"#List"）.datagrid（"getSelected"）;if （row ！= null） {$.messager.confirm（"提示", "确定删除", function （r） {if （r） {$.post（"/SysSample/Delete？id=" + row.Id, function （data） {if （data.type == 1）$（"#List"）.datagrid（"load"）;$.messageBox5s（"提示", data.message）;}, "json"）;}}）;} else { $.messageBox5s（"提示", "请选择要操作的记录"）; }}）;}）;</script>