OA项目的框架已经搭建好了，接下来就是在这个框架下完成相应的业务的编码，接下来实现UserInfo页面的增删改查。
1.首先先谈一下遇到的一个框架上的问题:提示EF版本不一致之类的问题，主要是解决方案的版本中添加的EF的版本不一致造成的
解决办法：
1. 工具 -> 库程序包管理器 -> 管理解决方案的nuget程序包
2. 在选中已安装的包中找到EntityFramework，选中后，点击"更新"按钮，或者直接安装，后面会弹出提示更新的项目类库
3. 选择要更新的项目（一般会自动默认选择需要更新的项目），点击"确定"按钮
4. 等待更新完毕，解决。
2.前台代码
<script type="text/javascript">
$(function () { loadData();
});
//展示数据
function loadData() {
$('#tt').datagrid({
url: '/UserInfo/GetUserInfo',
type:"post",
title: '用户数据表格',
width: ,
height: ,
fitColumns: true, //列自适应
nowrap: false,
idField: 'ID',//主键列的列明
loadMsg: '正在加载用户的信息...',
pagination: true,//是否有分页
singleSelect: false,//是否单行选择
pageSize: ,//页大小，一页多少条数据
pageNumber: ,//当前页，默认的
pageList: [, ,],
queryParams: {},//往后台传递参数
columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
{ field: 'ck', checkbox: true, align: 'left', width: },
{ field: 'ID', title: '编号', width: },
{ field: 'UName', title: '姓名', width: },
{ field: 'UPwd', title: '密码', width: },
{ field: 'Remark', title: '备注', width: },
{
field: 'SubTime', title: '时间', width: , align: 'right',
formatter: function (value, row, index) {
return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
}
}
]],
toolbar: [{
id: 'btnGet',
text: '添加',
iconCls: 'icon-add',
handler: function () {
AddUserInfo();
}
},
{
id: 'btnDelete',
text: '删除',
iconCls: 'icon-remove',
handler:
function () {
deleteUserInfo();
}
},
{
id: 'btnEdit',
text: '编辑',
iconCls: 'icon-edit',
handler:
function () {
EditUserInfo();
}
}
],
});
}
//删除数据
function deleteUserInfo() {
var rows = $('#tt').datagrid('getSelections');
if (!rows || rows.length == ) {
//alert("请选择要修改的商品！");
$.messager.alert("提醒", "请选择要删除的记录!", "error");
return;
}
else
{
//datagrid是ajax操作，界面没有刷新，所以datagrid会记录上一次操作的id，然后拼接起来发送给服务端，
//获取要删除的id
if (confirm("确定要删除吗")) {
var length = rows.length;
var idStr = "";
for (var i = ; i < length; i++) {
idStr = idStr + rows[i]["ID"] + ',';
}
//注意最后一个多了一个逗号
$.post("/UserInfo/Delete", { "num": idStr }, function (data) {
if (data == "OK") {
// loadData();这样将会加载到第一页了
$('#tt').datagrid('reload');
$('#tt').datagrid('clearSelections');
}
else if (data == "NO") {
$.messager.alert("提醒", "删除失败", "error");
}
})
}
} }
//添加数据
function AddUserInfo()
{
$('dd').css("display","block")
$('#dd').dialog({
resizable: false,
title:"添加用户",
buttons: [{
text: '确定',
iconCls: 'icon-ok',
handler: function () {
//提交前进行表单的验证
$("#addForm").submit(); }
}, {
text: '取消',
iconCls:'icon-cancel',
handler: function () {
$('#dd').dialog('close');
}
}]
}); }
function AddUser(data)
{
if (data == "OK")
{
$('#tt').datagrid('reload');
$("#addForm input").val("");
$("#dd").dialog('close');
}
else if (data == "NO")
{
alert("添加失败");
}
}
//修改数据
function EditUserInfo()
{
//判断是否选中
var selections=$("#tt").datagrid("getSelections");
if (!selections || selections.length != )
{
$.messager.alert("提醒", "请选中一条记录", "error");
return;
}
//获取到数据填充表格
var selectionId =selections[].ID;
$.post("/UserInfo/GetEditData", { "id": selectionId }, function (data) {
//填充数据
$("#ID").val(data.ID);
$("#DelFlag").val(data.DelFlag);
$("#UName").val(data.UName);
$("#UPwd").val(data.UPwd);
$("#Remark").val(data.Remark);
$("#Sort").val(data.Sort);
$("#SubTime").val(formatTime(data.SubTime));
$("#editDiv").css("display", "block");
$('#editDiv').dialog({
resizable: false,
title: "修改用户",
buttons: [{
text: '确定',
iconCls: 'icon-ok',
handler: function () {
//提交前进行表单的验证
$("#editForm").submit(); }
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$("#editDiv").dialog("close")
}
}]
}); })
}
function EditUser(data)
{
if (data == "OK") {
//关闭弹窗
//reload datagrid
$("#tt").datagrid("reload");
$("#editDiv").dialog("close")
}
else {
$.messager.alert("提醒", "修改失败", "error");
}
}
//时间解析
function formatTime(val) { //解析日期字段调用此函数即可。
var re = /-?\d+/;
var m = re.exec(val);
var d = new Date(parseInt(m[]));
return d.pattern("yyyy-M-d");
}
</script> </head>
<body>
<div>
<table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>
</div>
<!------添加数据表单-------->
<div id="dd" icon="icon-save" style="padding:5px;width:400px;height:200px;display:none;">
@using (Ajax.BeginForm("AddUser", "UserInfo", new AjaxOptions() { HttpMethod = "post", OnSuccess = "AddUser" }, new { id = "addForm" }))
{
<table>
<tr><td>姓名</td><td><input type="text" name="UName"></td></tr>
<tr><td>密码</td><td><input type="password" name="UPwd"></td></tr>
<tr><td>备注</td><td><input type="text" name="Remark"></td></tr>
<tr><td>排序</td><td><input type="text" name="Sort"></td></tr>
</table>
}
</div>
<!------------------修改数据表单------此时需要重新查库，因为此时展示的数据不全---------------->
<div id="editDiv" icon="icon-save" style="padding:5px;width:400px;height:200px;display:none;">
@using (Ajax.BeginForm("EditUserInfo", "UserInfo", new AjaxOptions() { HttpMethod = "post", OnSuccess = "EditUser" }, new { id = "editForm" }))
{
<table>
<input type="hidden" id="ID" name="ID">
<input type="hidden" id="SubTime" name="SubTime">
<input type="hidden" id="DelFlag" name="DelFlag">
<!--上面的两条是不允许修改的-->
<tr><td>姓名</td><td><input type="text" id="UName" name="UName"></td></tr>
<tr><td>密码</td><td><input type="password" id="UPwd" name="UPwd"></td></tr>
<tr><td>备注</td><td><input type="text" id="Remark" name="Remark"></td></tr>
<tr><td>排序</td><td><input type="text" id="Sort" name="Sort"></td></tr>
</table>
}
</div> </body> </html>
3.后台代码
public class UserInfoController : Controller
{
//
// GET: /UserInfo/
/// <summary>
/// 分页展示数据
/// </summary>
/// <returns></returns>
IBLL.IUserInfoService bll = new BLL.UserInfoService(); public ActionResult Index()
{ return View();
}
/// <summary>
/// 获取用户的数据
/// </summary>
/// <returns></returns>
public ActionResult GetUserInfo()
{
int pageIndex = Request["page"] != null ? int.Parse(Request["page"]) : ;
int pageSize = Request["rows"] != null ? int.Parse(Request["rows"]) : ;
int totalCount;
short delFlag = (short)DelFlagEnum.Noraml;
IQueryable<UserInfo> userInfoList = bll.LoadPageEntity<int>(pageSize, pageIndex, out totalCount, u => u.DelFlag == delFlag, u => u.ID, true);
var tempList = userInfoList.Select(u => new { ID = u.ID, UName = u.UName, UPwd = u.UPwd, SubTime = u.SubTime, Remark = u.Remark });
//从demo中可以看出返回的数据主要放在rows和total中
return Json(new { rows = tempList, total = totalCount });
} /// <summary>
/// 删除数据
/// </summary>
/// <returns></returns>
public ActionResult Delete()
{
string nums = Request["num"].ToString();
string[] numList = nums.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
List<int> numbers = numList.Select(num => int.Parse(num)).ToList();
bool res = bll.DeleteUserInfoList(numbers);
if (res)
{
return Content("OK");
}
else
return Content("NO"); }
/// <summary>
/// 添加数据
/// </summary>
/// <param name="userInfo"></param>
/// <returns></returns>
[HttpPost]
public ActionResult AddUser(UserInfo userInfo)
{
userInfo.SubTime = DateTime.Now;
userInfo.ModifiedOn = DateTime.Now;
userInfo.DelFlag = (short)DelFlagEnum.Noraml;
bll.AddEntity(userInfo);
if (userInfo != null)
return Content("OK");
else
return Content("NO");
}
/// <summary>
/// 修改数据
/// </summary>
/// <returns></returns>
public ActionResult GetEditData()
{
int id = int.Parse(Request["id"]);
UserInfo userInfo = bll.LoadEntity(u => u.ID == id).First();
return Json(userInfo, JsonRequestBehavior.AllowGet);
}
public ActionResult EditUserInfo(UserInfo userInfo)
{
userInfo.ModifiedOn = DateTime.Now;
bll.EditEntity(userInfo);
return Content("OK");
} }
4.注意事项
1.对于错误信息：进行获取数据的时候出现不允许Get"此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站。若要允许 GET 请求，请将 JsonRequestBehavior 设置为 AllowGet。"的解决方案
(1)方案1
$.ajax({
type: 'POST',
url: '/Home/AjaxGetJsonData',
success: function (data) {
alert(data);
},
error: function (error) {
alert(error.responseText);
}
});
(2)方案2
return Json(new { rows=tempList ,total=totalCount},JsonRequestBehavior.AllowGet);
2.首先对于MVC来说，首先得访问一个控制器下的方法获取到展示数据的页面，获取数据应该从该控制器下面的其他的方法去获取
最好不要混在一起。
3.从easyUI 中的demo可以看出一定要将返回的数据交给rows，数据的条数返回到total
4.批量删除数据：删除的时候不能直接调用baseService中的删除方法，应该使用DBSession调用dal下面的方法，然后统一使用DbSession中的SaveChanged
同时为了保证删除后界面保持在原来的pageIndex,需要使用reload方法，同时为了删除easyUI中缓存的id，需要调用clearSelections
5.添加数据的时候，一定要进行表单的验证，使用easyUI，由于要进行刷新界面，因为是异步提交，所以没有刷新界面，表单中依然保存着原来的数据
$("#addForm input").val("");
使用AjaxHelper创建表单，可以在objectAttribute中添加id，然后提交表单的时候，直接使用
$("#id").submit();
这个效果和直接在AJax表单中写一个submit按钮是一样的
6.对于后台JavaScriptSerilizer或者return Json（），会将时间变为自1970年1月1日午夜到指定日期的毫秒数，所以需要重新将这些毫秒数计算出所在年月日
//时间解析
function formatTime(val) { //解析日期字段调用此函数即可。
var re = /-?\d+/;
var m = re.exec(val);
var d = new Date(parseInt(m[0]));
return d.pattern("yyyy-M-d");
}