文章于2016-12-17日重写
在第八讲中，我们已经做到了怎么样分页。这一讲主要讲增删改查。第六讲的代码已经给出，里面包含了增删改，大家可以下载下来看下。
这讲主要是，制作漂亮的工具栏，虽然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: '新增', 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: '编辑', 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: '详细', 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>
里面用到了easyui 的window
所以我们在Index顶部加入一个层来包含弹出window，我们把增加，修改的视图放在iframe里面，然后附加到window里面弹出
<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
<div class="mvctool">................
关于$.messageBox5s是我扩展easyui的message控件的结果，扩展如下
/** * 在iframe中调用，在父窗口中出提示框(herf方式不用调父窗口) */ $.extend({ messageBox5s: function (title, msg) { $.messager.show({ title: title, msg: msg, timeout: 5000, showType: 'slide', style: { left: '', right: 5, top: '', bottom: -document.body.scrollTop - document.documentElement.scrollTop+5 } }); } }); $.extend({ messageBox10s: function (title, msg) { $.messager.show({ title: title, msg: msg, height: 'auto', 'auto', timeout: 10000, showType: 'slide', style: { left: '', right: 5, top: '', bottom: -document.body.scrollTop - document.documentElement.scrollTop + 5 } }); } }); $.extend({ show_alert: function (strTitle, strMsg) { $.messager.alert(strTitle, strMsg); } }); /** * panel关闭时回收内存，主要用于layout使用iframe嵌入网页时的内存泄漏问题 */ $.fn.panel.defaults.onBeforeDestroy = function () { var frame = $('iframe', this); try { // alert('销毁，清理内存'); if (frame.length > 0) { for (var i = 0; i < frame.length; i++) { frame[i].contentWindow.document.write(''); frame[i].contentWindow.close(); } frame.remove(); if ($.browser.msie) { CollectGarbage(); } } } catch (e) { } };
创建jquery.easyui.plus.js放到scripts目录下，引入即可
编译预览一下，点击下，新增和编辑，好，有效果了
此时我们创建增加，和编辑的action和view
这里是SysSampleController的代码
using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using App.Common; using App.IBLL; using App.Models.Sys; using Microsoft.Practices.Unity; namespace App.Admin.Controllers { public class SysSampleController :Controller { /// <summary> /// 业务层注入 /// </summary> [Dependency] public ISysSampleBLL m_BLL { get; set; } public ActionResult Index() { return View(); } public JsonResult GetList(GridPager pager, string queryStr) { List<SysSampleModel> list = m_BLL.GetList(ref pager); var json = new { total = pager.totalRows, rows = (from r in list select new SysSampleModel() { Id = r.Id, Name = r.Name, Age = r.Age, Bir = r.Bir, Photo = r.Photo, Note = r.Note, CreateTime = r.CreateTime, }).ToArray() }; return Json(json, JsonRequestBehavior.AllowGet); } #region 创建 public ActionResult Create() { return View(); } [HttpPost] public JsonResult Create(SysSampleModel model) { if (m_BLL.Create(model)) { return Json(1, JsonRequestBehavior.AllowGet); } else { return Json(0, JsonRequestBehavior.AllowGet); } } #endregion #region 修改 public ActionResult Edit(string id) { SysSampleModel entity = m_BLL.GetById(id); return View(entity); } [HttpPost] public JsonResult Edit(SysSampleModel model) { if (m_BLL.Edit(model)) { return Json(1, JsonRequestBehavior.AllowGet); } else { return Json(0, JsonRequestBehavior.AllowGet); } } #endregion #region 详细 public ActionResult Details(string id) { SysSampleModel entity = m_BLL.GetById(id); return View(entity); } #endregion #region 删除 [HttpPost] public JsonResult Delete(string id) { if (!string.IsNullOrWhiteSpace(id)) { if (m_BLL.Delete(id)) { return Json(1, JsonRequestBehavior.AllowGet); } else { return Json(0, JsonRequestBehavior.AllowGet); } } else { return Json(0, JsonRequestBehavior.AllowGet); } } #endregion } }
在创建视图之前，我们先创建一个模板页，打开views下面的Shared创建
<!DOCTYPE html> <html> <head> <title>Main</title> @Styles.Render("~/Content/themes/blue/css") <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.easyui.plus.js")"></script> @Styles.Render("~/Content/css") <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> </head> <body> @RenderBody() </body> </html>
我们以后的弹出窗口全部要用到这个模版，这个模版页主要是引入了数据编辑和校验
下面创建Create视图
@model App.Models.Sys.SysSampleModel @using App.Common; @using App.Models.Sys; @using App.Admin; @{ ViewBag.Title = "创建"; Layout = "~/Views/Shared/_Index_LayoutEdit.cshtml"; } <script type="text/javascript"> $(function () { $("#btnSave").click(function () { $.ajax({ url: "/SysSample/Create", type: "Post", data: $("#CreateForm").serialize(), dataType: "json", success: function (data) { if (data == 1) { window.parent.frameReturnByMes("成功"); window.parent.frameReturnByReload(true); window.parent.frameReturnByClose() } else { window.parent.frameReturnByMes("失败"); } } }); }); }); </script> <div class="mvctool bgb"> <a id="btnSave" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-save" style="padding-left: 20px;">保存</span></span></a> </div> @using (Html.BeginForm("Create", "SysSample", null, FormMethod.Post, new { Id = "CreateForm" })) { @Html.ValidationSummary(true) <table class="fromEditTable setTextWidth300"> <tbody> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.Id)： </td> <td style="310px"> @Html.EditorFor(model => model.Id) </td> <td>@Html.ValidationMessageFor(model => model.Id)</td> </tr> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.Name)： </td> <td> @Html.EditorFor(model => model.Name) </td> <td> @Html.ValidationMessageFor(model => model.Name) </td> </tr> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.Age)： </td> <td> @Html.EditorFor(model => model.Age) </td> <td> @Html.ValidationMessageFor(model => model.Age) </td> </tr> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.Bir)： </td> <td> @Html.TextBoxFor(model => model.Bir) </td> <td> @Html.ValidationMessageFor(model => model.Bir) </td> </tr> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.Note)： </td> <td> @Html.EditorFor(model => model.Note) </td> <td> @Html.ValidationMessageFor(model => model.Note) </td> </tr> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.CreateTime)： </td> <td> @Html.TextBoxFor(model => model.CreateTime) </td> <td> @Html.ValidationMessageFor(model => model.CreateTime) </td> </tr> <tr> <td style="100px; text-align:right;"> @Html.LabelFor(model => model.Photo)： </td> <td> @Html.TextBoxFor(model => model.Photo) </td> <td> @Html.ValidationMessageFor(model => model.Photo) </td> </tr> </tbody> </table> }
总结
修改就把创建复制一份，保存的时候把url指到修改
详细就把保存去掉就可以了
查询，在Controller的GetList增加一个queryStr参数，在BLL判断是queryStr是否为空。不为空就用Linq写多个where，O了