原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与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>
View Code
有能力的朋友再优化一下样式
好，我们用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>
View Code
这是jquery绑定了事件，不知道jquery怎么用的，穿越回去学习一下选择器和事件
OK代码很清楚的告诉了我们增删改要做什么了。
里面用到了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', width: '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
创建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
}
}
SysSampleController
在创建视图之前，我们先创建一个模板页，打开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>
_Index_LayoutEdit.cshtml
我们以后的弹出窗口全部要用到这个模版，这个模版页主要是引入了数据编辑和校验
下面创建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="width:100px; text-align:right;">
@Html.LabelFor(model => model.Id)：
</td>
<td style="width:310px">
@Html.EditorFor(model => model.Id)
</td>
<td>@Html.ValidationMessageFor(model => model.Id)</td>
</tr>
<tr>
<td style="width: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="width: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="width: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="width: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="width: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="width: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>
}
Create
下面的太简单了，修改和详细自己动手做起来吧。说得太明白东西就没什么意思了
- 给点提示，修改就把创建复制一份，保存的时候把url指到修改
- 详细就把保存去掉就可以了
- 查询，在Controller的GetList增加一个queryStr参数，在BLL判断是queryStr是否为空。不为空就用Linq写多个where，O了
时间： 2025-01-19 03:05:44