ASP.NET MVC +EF+Easyui datagrid

先看下效果图: 前台View页面跟之前的ASP.NET WebForm 差不多,只需要把post提交请求的路径改成/控制器/动作,绑定的参数改动下,开看源码:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>

<head runat="server">

<title>Index</title>

<link href="../../Content/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../../Content/Easyui/themes/icon.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

grid();

});

function grid() {

$("#tabs").datagrid({

width: 600, //宽度

height: 400, //高度

singleSelect: true, //选中一行的设置

rownumbers: true, //行号

url: "/Home/Query", //请求路径

title: "学员信息", //标题

iconCls: "icon-save", //图标

collapsible: true, //隐藏按钮

//冻结列

frozenColumns: [[{ field: "chk", "checkbox": true}]],

//列

columns: [[

{ field: "NO", title: "编号", width: 80 },

{ field: "NAME", title: "姓名", width: 100 },

{ field: "pwd", title: "密码", width: 100 },

{ field: "sex", title: "性别", width: 100 },

{ field: "age", title: "年龄", width: 100 },

{ field: "ADDRESS", title: "住址", width: 100 }

]],

pagination: true,

toolbar: [{

id: "btnadd",

text: "添加",

iconCls: "icon-add",

handler: function () {

$("#btnsave").linkbutton("enable");

add_dg();

}

},

{

id: "btnEdit",

text: "编辑",

iconCls: "icon-edit",

handler: function () {

$("#btnsave").linkbutton("enable");

edit_dg();

}

},

{

id: "btncut",

text: "删除",

iconCls: "icon-no",

handler: function () {

$("#btnsave").linkbutton("enable");

delete_dg();

}

}

]

});         //////////////////////////////分页/////////////////////////////

$("#tabs").datagrid(‘getPager‘).pagination({

beforePageText: "第",

afterPageText: "页",

displayMsg: "当前 {from} - {to}条数据   共{total} 条数据",

pageSize: 10,

pageList: [5, 10, 15, 20, 30]

});

}

/////////////////删除///////////

function delete_dg() {

var selected = $("#tabs").datagrid(‘getSelected‘);

if (selected != null) {

$.messager.confirm(‘提示‘, ‘是否确定要删除?‘, function(y) {

if (y) {

var v = "";

var checked = $("#tabs").datagrid(‘getChecked‘);

$.each(checked, function(i, j) {

v += j.id + ",";

});

v = v.substring(0, v.length - 1);

$.post("/Home/Del", {"id": v }, function(data) {

$.messager.alert(‘提示‘, data);

$("#tabs").datagrid(‘reload‘);

});

}

});

} else {

$.messager.alert(‘提示‘, ‘您还没有选中一行数,请选中在删除!‘);

}

}

//////////////////添加///////////////////

function add_dg() {

//表单清空

$("#fm_dg")[0].reset();

//显示

$("#dd_dg").show();

//以窗体的形式展示

$("#dd_dg").dialog({

title: "添加学员信息", //标题

iconCls: "icon-add", //图标

width: 300, //窗体的宽度

height: 200, //窗体的高度

modal: true, //遮罩层

//按钮集合

buttons: [

{

text: "添加", //添加按钮的文本值

iconCls: "icon-ok", //添加按钮的图标

handler: function () {

//将数据序列化

var parm = $("#fm_dg").serialize();

//中文格式转换

var pp = decodeURIComponent(parm, true);

//post异步提交

$.post("/Home/Add", { data: pp }, function (data) {

$.messager.alert(‘提示‘, data);

//重新加载datagrid

$("#tabs").datagrid(‘reload‘);

//关闭

$("#dd_dg").window(‘close‘);

});

}

},

{

text: "取消",

iconCls: "icon-cancel",

handler: function () {

$("#dd_dg").window("close");

}

}

]

});

}

/////////////////修改//////////////////

function edit_dg() {

//选中一行,获取这一行的属性的值

var selected = $("#tabs").datagrid(‘getSelected‘);

//判断是否选中

if (selected != null) {

$("#id").val(selected.id);

$("#no").val(selected.NO);

$("#name").val(selected.NAME);

$("#pwd").val(selected.pwd);

//取值显示性别

if (selected.sex == "男") {

$("#sex option").eq(0).attr("selected", "selected");

} else {

$("#sex option").eq(1).attr("selected", "selected");

}

$("#age").val(selected.age);

$("#address").val(selected.ADDRESS);

$("#dd_dg").show(); //显示修改窗体

$("#dd_dg").dialog({

title: "编辑信息",

iconCls: "icon-edit",

modal: true, //遮罩层

width: 300,

height: 200,

buttons: [

{

text: "编辑",

iconCls: "icon-edit",

handler: function () {

var parm = $("#fm_dg").serialize();

var pp = decodeURIComponent(parm, true);

$.post("/Home/Edit", { data: pp }, function (data) {

$.messager.show({

title: "提示",

msg: data

});

$("#tabs").datagrid("reload");

$("#dd_dg").window("close");

});

}

},

{

text: "取消",

iconCls: "icon-cancel",

handler: function () {

$("#dd_dg").window(‘close‘);

}

}

]

});

} else {

$.messager.alert(‘提示‘, ‘请选中一行在进行编辑‘);

}

}

</script>

</head>

<body>

<table id="tabs"></table>

<div id="dd_dg" style="display:none;" >

<form id="fm_dg" method="post">

<input type="hidden" name="id" id="id"/>

编号:<input type="text" name="no" id="no" class="easyui-validatebox"  required="true" missingMessage="用户编号不能为空!"/><br/>

姓名:<input type="text" name="name" id="name" class="easyui-validatebox"  required="true" missingMessage="用户姓名不能为空!"/><br/>

密码:<input type="password" name="pwd" id="pwd" class="easyui-validatebox"  required="true" missingMessage="用户密码不能为空!"/><br/>

性别:<select name="sex" id="sex">

<option value="1">男</option>

<option value="0">女</option>

</select><br/>

年龄:<input type="text" name="age" id="age" class="easyui-validatebox"  required="true" missingMessage="用户年龄不能为空!"/><br/>

住址:<input type="text" name="address" id="address" class="easyui-validatebox"  required="true" missingMessage="用户住址不能为空!"/><br/>

</form>

</div>

</body>

</html>

控制器里面写的要跟之前的一般处理页面有所区别,你会发现这里没有用sql语句

public class HomeController : Controller

{

readonly studentEntities _db=new studentEntities();

// GET: /Home/

public ActionResult Index()

{

return View();

}

//显示的方法

public ActionResult Query()

{

int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);

int pageSize = Request["rows"] == null ? 1 : int.Parse(Request["rows"]);

var temp = (from c in _db.stu orderby c.id select c).Skip(pageSize*(pageIndex - 1)).Take(pageSize).ToList();

var data = from a in temp select new {a.id,a.NO,a.NAME,a.pwd,a.sex,a.age,a.ADDRESS};

var rult = new{total=_db.stu.Count(),rows=data};

return Json(rult, JsonRequestBehavior.AllowGet);

}         //删除的方法

[HttpPost]

public ActionResult Del(string id)

{

int ids = int.Parse(id);

try

{

var stu1 = _db.stu.Where(a => a.id == ids).FirstOrDefault();

_db.stu.DeleteObject(stu1);

_db.SaveChanges();

return Content("删除成功!");

}

catch

{

return Content("删除失败!");

}

}     //添加的方法

[HttpPost]

public ActionResult Add()

{

StringBuilder sb = new StringBuilder();

//遍历获取传递过来的字符串

foreach (string s in Request.Form.AllKeys)

{

sb.AppendFormat("{0}:{1}\n", s, Request.Form[s]);

}

string ss = sb.ToString();

string[] str = ss.Split(‘&‘);

string no = str[1].Split(‘=‘)[1];

string name = str[2].Split(‘=‘)[1];

string pwd = str[3].Split(‘=‘)[1];

string sex = str[4].Split(‘=‘)[1] == "1" ? "男" : "女";

int age = int.Parse(str[5].Split(‘=‘)[1]);

string address = str[6].Split(‘=‘)[1];

try

{

var stu1 = new stu() { NO = no, NAME = name, pwd = pwd, sex = sex, age = age, ADDRESS = address };

_db.stu.AddObject(stu1);

_db.SaveChanges();

return Content("添加成功!");

}

catch

{

return Content("添加失败!");

}

}     //修改的方法

[HttpPost]

public ActionResult Edit()

{

StringBuilder sb = new StringBuilder();

//遍历获取传递过来的字符串

foreach (string s in Request.Form.AllKeys)

{

sb.AppendFormat("{0}:{1}\n", s, Request.Form[s]);

}

string ss = sb.ToString();

string[] str = ss.Split(‘&‘);

int id = int.Parse(str[0].Split(‘=‘)[1]);

string no = str[1].Split(‘=‘)[1];

string name = str[2].Split(‘=‘)[1];

string pwd = str[3].Split(‘=‘)[1];

string sex = str[4].Split(‘=‘)[1] == "1" ? "男" : "女";

int age = int.Parse(str[5].Split(‘=‘)[1]);

string address = str[6].Split(‘=‘)[1];

try

{

//获取对象

stu stu1 = new stu() { id = id,NO = no, NAME = name, pwd = pwd, sex = sex, age = age, ADDRESS = address };

//添加到当前上下文中

_db.stu.Attach(stu1);

//修改状态(进行修改)

_db.ObjectStateManager.ChangeObjectState(stu1, EntityState.Modified);

_db.SaveChanges();

return Content("修改成功!");

}

catch

{

return Content("修改失败!");

}

}

}

时间: 2024-10-09 18:25:37

ASP.NET MVC +EF+Easyui datagrid的相关文章

【第十一篇】这一篇来说说MVC+EF+easyui datagrid的查询功能

老规矩 直接上代码 1 <form class="form-horizontal"> 2 <div class="box-body"> 3 <div class="row"> 4 <div class="form-group col-xs-1" style="width: 390px;"> 5 <label for="CersNo"

转 -- MVC+EF easyui dataGrid 动态加载分页表格

首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载表格!!! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替条纹 fitColumns: true, //防止水平滚动 fit: true,//自动补全 iconCls: "icon-sav

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装 前言:今天经理买了一个诺基亚的Windows Phone 8系统,特感兴趣,所以在哪里看了很长时间,这篇文章就写的有点迟, 从这个Demo开始到现在我已经写了4篇博客了,终于可以看到页面的东

ASP.NET MVC+EF框架+EasyUI实现权限管理系列

http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言:博客又有一段时间没有更新了,心里感觉这段时间空空的,好像什么都没有学下,所以就想写博客,所以就有了这个系列,这里当然也要感谢大家了,因这个 项目我已经上传了,得到了很多网友的评价,也有好多人发邮件给我说这个框架容易出现问题,不能访问,这也是支持我写这个系列的动力,我将这个项目写成一个 系列

ASP.NET MVC+EF框架+EasyUI实现权限管理

4.为什么使用MVC而不是用WebForm呢? (1)为什么使用MVC而不是用WebForm呢?这个是我临时想的,因为我就是想说明一下WebForm和MVC的优缺点,来可以使大家能够更好地理解 MVC和WebForm,而不像某些人说MVC会替代WebForm,我个人认为这个可能性很小,因为各有各的好处,看在哪里使用吧,下面我就简单介绍下 WebForm和MVC的优缺点. (2)WebForm介绍 1)优点 1):支持事件模型,取决于微软提供了丰富的服务器端组建,WebForm可以快速的搭建Web

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程 前言:前面几篇博客我们基本已经介绍完了搭建整个项目和数据库访问层以及一些业务逻辑层的实现,当然了,我们的数据库访问层这样还是可以在进行封装的,但是我到这里就行了吧,项目也不大,不需要那么麻烦的,那么我们今天开始介绍我们需要介绍的内容,那就是我

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(2)-数据库访问层的设计Demo

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(2)-数据库访问层的设计Demo ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1)框架搭建 前言:这篇博客我们继续来实现我的权限系列,这个博客一段时间也没有写了,重点是我在想还写不写,最终我决定还是写下去,因为我们是为了学习,当别人提出意见的时候,我们可以参考和采纳,但是我们不一定非要采纳,上几篇博客大家都说用CodeFirst来实现,是啊,现在基本很少有人用我的这种方法来实现了,都是用CodeF

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) 前言:这篇博客开始我们便一步一步的来实现这个权限系统的初步设计-框架搭建,首先我要说的是我们需要开发工具Visual Studio 2012或者10也行,其次是我们要有SQL Server数据库,如果是Visual Studio 2010的话,你还要安装MVC4的开发文件,这个是吗?我不记得了,谁可以回答我一下的,我一直用2012,都是集成

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装  (5):前台Jquery easyUI实现 前言:通过前面的五篇博客我们已经对权限系统的后台架构进行了详细的说明,那么我再前面的博客中也说到了我们的后台架构还会再改的,我准备这段时间我们继续完善我们的后台