本次参考学习了
https://www.cnblogs.com/ymnets/p/3424309.htmlC
这个人的教程
但是由于时代久远,教程节奏快,版本的问题。对于初学者来说,很不友好。
正好我也要学习,所以自己重新写一下,顺带改一改其中的小bug。
系统目标:实现一个权限管理案例 用户—角色—权限
本节目标:增删改查
1.简单修改一下原来的前台代码
主要是把增删改查的button实现,后台代码后面再改
下面这个index 添加一些代码,我就把这个代码全部粘贴了,自己对比一下需要改进的地方
代码
@using Apps.App;
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index_Layout.cshtml";
}
<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false">
</div>
<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: 25px;">查询</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: 25px;">新增</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: 25px;">编辑</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: 25px;">详细</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: 25px;">删除</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: 25px;">导出</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: 25px;">刷新</span></span></a>
</div>
<table id="List"></table>
<script type="text/javascript">
$(function () {
$('#List').datagrid({
url: '/SysSample/GetList',
width: $(window).width() - 10,
methord: 'post',
height: $(window).height() - 35,
fitColumns: true,
sortName: 'Id',
sortOrder: 'desc',
idField: 'Id',
pageSize: 15,
pageList: [15, 20, 30, 40, 50],
pagination: true,
striped: true, //奇偶行是否区分
singleSelect: true,//单选模式
rownumbers: true,//行号
columns: [[
{ field: 'Id', title: 'ID', width: 40 },
{ field: 'Name', title: '名称', width: 80 },
{ field: 'Age', title: '年龄', width: 80, align: 'center' },
{ field: 'Bir', title: '生日', width: 120, align: 'center' },
{ field: 'Photo', title: '照片', width: 80, align: 'center' },
{ field: 'Note', title: '说明', width: 80, align: 'center' },
{ field: 'CreateTime', title: '创建时间', width: 120, align: 'center' }
]]
});
});
</script>
<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 GetGuid() {
var s4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return s4() + s4() + s4() + "-" + s4();
}
$(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 == 1)
$("#List").datagrid('load');
$.messageBox5s('提示', data.message);
}, "json");
}
});
} else { $.messageBox5s('提示', '请选择要操作的记录'); }
});
});
</script>
<script type="text/javascript">
</script>
注意了哈,有个 $.messageBox5s 。这是原博主拓展的
jquery.easyui.plus.js
/**
* 在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) {
}
};
现在运行前台会有变化(忘了截图了),所以我们接着改
2.具体操作增删改查
创建一个模板页,打开views下面的Shared创建
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
@Styles.Render("~/Content/themes/blue/css")
<script src="@Url.Content("~/Scripts/jquery-3.3.1.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.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
然后我们去修改一下控制器中的内容
using Apps.App.Common;
using Apps.App.IBLL;
using Apps.Models.Sys;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using Unity;
namespace Apps.Controllers
{
public class SysSampleController : Controller
{
//
// GET: /SysSample/
/// <summary>
/// 业务层注入
/// </summary>
[Dependency]
public ISysSampleBLL m_BLL { get; set; }
public ActionResult Index()
{
//List<SysSampleModel> list = m_BLL.GetList("");
return View();
}
[HttpPost]
public JsonResult GetList(GridPager pager, string queryStr)
{
List<SysSampleModel> list = m_BLL.GetList(ref pager, queryStr);
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
}
}
来来来注意看。。。。去创建Create视图
@model Apps.Models.Sys.SysSampleModel
@using Apps.App.Common;
@{
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>
}
后续补充
修改就把创建复制一份,保存的时候把url指到修改
详细就把保存去掉就可以了
查询,在Controller的GetList增加一个queryStr参数,在BLL判断是queryStr是否为空。不为空就用Linq写多个where,O了
3.总结
前段时间休假了,所以文章没有跟上,这次写的可能有遗漏的地方,在后4章,有个小结,会把代码给个链接的,可以参考修改
4.补充
emmmm由于时间跨度大,所以代码很多地方有遗漏。
重点补充一下查询
添加这个
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection;
using System.Web;
namespace Apps.App.Common
{
public class LinqHelper
{
/// <summary>
/// 排序
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="source"></param>
/// <param name="sortExpression"></param>
/// <param name="sortDirection"></param>
/// <returns></returns>
public static IQueryable<T> DataSorting<T>(IQueryable<T> source, string sortExpression, string sortDirection)
{
string sortingDir = string.Empty;
if (sortDirection.ToUpper().Trim() == "ASC")
sortingDir = "OrderBy";
else if (sortDirection.ToUpper().Trim() == "DESC")
sortingDir = "OrderByDescending";
ParameterExpression param = Expression.Parameter(typeof(T), sortExpression);
PropertyInfo pi = typeof(T).GetProperty(sortExpression);
Type[] types = new Type[2];
types[0] = typeof(T);
types[1] = pi.PropertyType;
Expression expr = Expression.Call(typeof(Queryable), sortingDir, types, source.Expression, Expression.Lambda(Expression.Property(param, sortExpression), param));
IQueryable<T> query = source.AsQueryable().Provider.CreateQuery<T>(expr);
return query;
}
/// <summary>
/// 分页
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="source"></param>
/// <param name="pageNumber"></param>
/// <param name="pageSize"></param>
/// <returns></returns>
public static IQueryable<T> DataPaging<T>(IQueryable<T> source, int pageNumber, int pageSize)
{
if (pageNumber <= 1)
{
return source.Take(pageSize);
}
else
{
return source.Skip((pageNumber - 1) * pageSize).Take(pageSize);
}
}
/// <summary>
/// 排序并分页
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="source"></param>
/// <param name="sortExpression"></param>
/// <param name="sortDirection"></param>
/// <param name="pageNumber"></param>
/// <param name="pageSize"></param>
/// <returns></returns>
public static IQueryable<T> SortingAndPaging<T>(IQueryable<T> source, string sortExpression, string sortDirection, int pageNumber, int pageSize)
{
IQueryable<T> query = DataSorting<T>(source, sortExpression, sortDirection);
return DataPaging(query, pageNumber, pageSize);
}
}
}
修改业务逻辑层
public List<SysSampleModel> GetList(ref GridPager pager, string queryStr)
{
IQueryable<SysSample> queryData = null;
queryData = Rep.GetList(db);
//查询条件
if (queryStr != null)
{
queryData = queryData.Where(
r => r.Id.Contains(queryStr) ||
r.Name.Contains(queryStr) ||
r.Note.Contains(queryStr) ||
r.Photo.Contains(queryStr) ||
r.Age.ToString().Contains(queryStr)
);
}
//排序
queryData = LinqHelper.DataSorting(queryData, pager.sort, pager.order);
return CreateModelList(ref pager, ref queryData, queryStr);
}
private List<SysSampleModel> CreateModelList(ref GridPager pager, ref IQueryable<SysSample> queryData, string queryStr)
{
pager.totalRows = queryData.Count();
if (pager.totalRows > 0)
{
if (pager.page <= 1)
{
queryData = queryData.Take(pager.rows);
}
else
{
queryData = queryData.Skip((pager.page - 1) * pager.rows).Take(pager.rows);
}
}
List<SysSampleModel> modelList = (from r in queryData
select new SysSampleModel
{
Id = r.Id,
Name = r.Name,
Age = r.Age,
Bir = r.Bir,
Photo = r.Photo,
Note = r.Note,
CreateTime = r.CreateTime,
}).ToList();
return modelList;
}
把对应,接口,控制器,参数修改好
应该就可以了
截图就不展示了