首先说下用到的技术:EF+Jquery easyUI 没有用MVC3,先用的asp.net+.ashx 以后会做个MVC3的。
这里说的无刷新,就是通过jquery异步的方式,前后台来传数据。
1、首先,就是展示数据,这里我用了EF实体数据模型来生成EF对象,然后再对数据库的数据进行操作。
我这里用的是asp.net前台页面配合.ashx一般处理程序处理数据,来完成无刷新展示数据的效果。
展示数据,很容易的,用到jquery中的getJSON方法,将数据异步发送到一般处理程序处理,一般处理程序根据EF实体对象,获取数据库中的所有值。
将得到的数据,序列化成json格式的数据,返回到前台。
前台再拼接字符串,append()到指定的table表格中。展示数据,就大功告成了。
2、这里分页,用到了大牛写的一个分页的类,返回的是a标签,只要传入pageSize,currentPage,totalCount 就可以生产分页标签了。上面说到的取数据就不能一下全取出来,需要计算出这几个值,传入形成分页标签才成。
3、添加:这里用到了Jquery EasyUI插件,展示数据,弹出对话框都还比较的美观,而且用起来还算方便。 (dialog)
首先,想要添加用户,就需要一个表格来装用户信息,所以,我们就有了表格。
表格不能一开始就显示出来,需要我们点击“增加”按钮,才能够弹出来,所以,一开始就需要隐藏div;用到了$("#add_div").css("display", "none");来隐藏div
点击的时候显示出来就需要给按钮添加单击事件 $("#btnAddUser").click(function () {.......}。还要将隐藏的div展示出来$("#add_div").css("display", "block");
然后就是用到了easyui中的dialog()方法,展示出表格来。
接着就是填信息,取信息到后台,ef实体对象将其增加到数据库。
4、修改:稍微有点麻烦,但思想都是一样的。只是点击修改的时候,需要将当前要修改的内容先显示到表格中,这就需要传来id去到全部数据,所以写了一个GetModelById.ashx来取到这些数据。然后就是SaveChanges() 了 。
5、删除,链接传个id根据id来删除当前的数据,不过用的是异步,用的是remove()方法。关键找到要删除的tr标签。
具体代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxShowList.aspx.cs" Inherits="Asp_EF_AJAX.Ajax.AjaxShowList" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="../Styles/NavPager.css" rel="stylesheet" type="text/css" /> <link href="../Styles/tableStyle.css" rel="stylesheet" type="text/css" /> <link href="../Styles/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../Styles/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //隐藏需要弹出的div $("#add_div").css("display", "none"); $("#edit_userInfo").css("display", "none"); //初始化表格数据 initTableList(""); $("#btnAddUser").click(function () { $("#add_div").css("display", "block"); $("#add_div").dialog({ title: "添加用户", width: 600, height: 400, resizable: true }); }); $("#add_user").click(function () { var param = { LoginId: $("#userName").val(), LoginPwd: $("#password").val(), Name: $("#realName").val(), Address: $("#address").val(), Phone: $("#phone").val(), Mail: $("#mail").val(), Money: $("#money").val() }; $.post("/Ashx/AddUsers.ashx", param, function (data) { if (data == "ok") { $("#add_div").dialog("close"); initTableList(""); } }); }); //单击修改表格上的修改按钮单击事件 $("#btnEditUserInfo").click(function () { var id = $("#user_id").text(); var param = { id: $("#user_id").text(), LoginId: $("#edit_loginId").val(), LoginPwd: $("#edit_loginPwd").val(), Name: $("#edit_name").val(), Address: $("#edit_address").val(), Phone: $("#edit_phone").val(), Mail: $("#edit_mail").val(), Money: $("#edit_money").val(), }; $.post("/Ashx/EditUserInfo.ashx", param, function (data) { if(data=="ok"){ $("#edit_userInfo").dialog("close"); initTableList(""); } }); }); }); //绑定表格数据列表 function initTableList(param) { $.getJSON("/Ashx/LoadAllUsers.ashx", param, function (data) { if (data.Rows.length > 0) { //清理之前的标签,防止重复加载 $(".dataTr").remove(); $("#pageNav").html(""); //处理表格数据 var strTrs = ""; for (var i = 0; i < data.Rows.length; i++) { var user = data.Rows[i]; var strTr = "<tr class='dataTr'>"; strTr += "<td>" + user.Id + "</td>"; strTr += "<td>" + user.LoginId + "</td>"; strTr += "<td>" + user.LoginPwd + "</td>"; strTr += "<td>" + user.Name + "</td>"; strTr += "<td>" + user.Address + "</td>"; strTr += "<td>" + user.Phone + "</td>"; strTr += "<td>" + user.Mail + "</td>"; strTr += "<td>" + user.UserRoleId + "</td>"; strTr += "<td>" + user.UserStateId + "</td>"; strTr += "<td>" + user.Money + "</td>"; strTr += "<td><a href='javascript:void(0)' id="+user.Id+" class='deleteLink'>删除</a> <a href='javascript:void(0)' id=" + user.Id + " class='editLink'>修改</a></td>"; strTr += "</tr>"; strTrs += strTr; } $("#userList").append(strTrs); } //处理导航标签 $("#pageNav").append(data.Nav); //再添加导航标签之后,绑定单击事件 bindNavLinkClick(); //等待修改增加上class后,再绑定单击事件 bindEditLinkClick(); //绑定删除单击事件 bindDeleteLinkClick(); }); } //绑定删除的单击事件 function bindDeleteLinkClick(){ $(".deleteLink").click(function(){ // 这里注意了,如果如果要加上“提示信息” 注意$(this)应写在最上面了。 var userId=$(this).attr("id"); // alert(userId); var current=$(this); $.messager.confirm("提示信息~!","确认要删除吗~?",function (isOk) { if (!isOk) { alert("123"); return; } // alert(userId); $.post("/Ashx/DeleteUserById.ashx",{id:userId},function(data){ if(data=="ok"){ // alert(current); current.parent().parent().fadeOut(); } }); }) return false; }); } //绑定修改链接的单击事件 function bindEditLinkClick() { $(".editLink").click(function () { var userId = $(this).attr("id"); $("#edit_userInfo").css("display", "block"); $("#edit_userInfo").dialog({ title: "添加用户", width: 600, height: 400, resizable: true }); $("#user_id").text(userId); $.getJSON("/Ashx/GetModelById.ashx", { id: userId }, function (data) { $("#edit_loginId").val(data.LoginId); $("#edit_loginPwd").val(data.LoginPwd); $("#edit_name").val(data.Name); $("#edit_address").val(data.Address); $("#edit_phone").val(data.Phone); $("#edit_mail").val(data.Mail); $("#edit_money").val(data.Money); }); return false; }); } //绑定分页页码的单击事件 function bindNavLinkClick() { $(".pageLink").click(function () { var nav_href = $(this).attr("href"); var param = nav_href.substring(nav_href.indexOf('?') + 1, nav_href.length); initTableList(param); return false; }); } </script> </head> <body> <form id="form1" runat="server"> <%--添加按钮--%> <input type="button" name="txtAdd" value="添加用户" id="btnAddUser" /> <table id="userList" border="0" cellpadding="0" cellspacing="0"> <tr> <%--Id, LoginId, LoginPwd, Name, Address, Phone, Mail, UserRoleId, UserStateId, Money--%> <th>Id</th><th>LoginId</th><th>LoginPwd</th><th>Name</th><th>Address</th><th>Phone</th><th>Mail</th><th>UserRoleId</th><th>UserStateId</th><th>Money</th><th>操作</th> </tr> </table> <div id="pageNav" class="paginator"> </div> <%--增加的div--%> <div id="add_div"> <table > <tr> <td>LoginId</td><td><input type="text" name="txtUserName" id="userName" /></td> </tr> <tr> <td>LoginPwd</td><td><input type="text" name="txtPwd" id="password" /></td> </tr> <tr> <td>Name</td><td><input type="text" name="txtName" id="realName" /></td> </tr> <tr> <td>Address</td><td><input type="text" name="txtAddress" id="address" /></td> </tr> <tr> <td>Phone</td><td><input type="text" name="txtPhone" id="phone" /></td> </tr> <tr> <td>Mail</td><td><input type="text" name="txtMail" id="mail" /></td> </tr> <tr> <td>Money</td><td><input type="text" name="txtMoney" id="money" /></td> </tr> </table> <input type="button" name="btnAddUser" value="添加" id="add_user" /> </div> <%--修改的div--%> <div id="edit_userInfo"> <table > <tr><td>ID</td><td><span id="user_id"></span></td></tr> <tr> <td>LoginId</td><td><input type="text" name="txtUserName" id="edit_loginId" /></td> </tr> <tr> <td>LoginPwd</td><td><input type="text" name="txtPwd" id="edit_loginPwd" /></td> </tr> <tr> <td>Name</td><td><input type="text" name="txtName" id="edit_name" /></td> </tr> <tr> <td>Address</td><td><input type="text" name="txtAddress" id="edit_address" /></td> </tr> <tr> <td>Phone</td><td><input type="text" name="txtPhone" id="edit_phone" /></td> </tr> <tr> <td>Mail</td><td><input type="text" name="txtMail" id="edit_mail" /></td> </tr> <tr> <td>Money</td><td><input type="text" name="txtMoney" id="edit_money" /></td> </tr> </table> <input type="button" name="btnEdit" value="修改" id="btnEditUserInfo" /> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using WebApplication1; namespace Asp_EF_AJAX.Ashx { /// <summary> /// LoadAllUsers 的摘要说明 /// </summary> public class LoadAllUsers : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; bookshopEntities dbContext = new bookshopEntities(); // var userList = dbContext.Users.ToList(); //把当前的标签取出来 int pageIndex=context.Request.QueryString["pageIndex"]==null?1:int.Parse(context.Request.QueryString["pageIndex"]); //总条数 int totalCount=dbContext.Users.Count(); string strNav = WebApplication1.Common.PageNav.ShowPageNavigate(10, pageIndex, totalCount); //当前页的数据 var pageData = dbContext.Users.OrderBy<Users, int>(b => b.Id).Skip<Users>((pageIndex - 1) * 10).Take<Users>(10); //封装数据到前台, 匿名类 var data = new {Nav=strNav,Rows=pageData }; System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); //string strJson = javaScriptSerializer.Serialize(userList); string strJson = javaScriptSerializer.Serialize(data); context.Response.Write(strJson); } public bool IsReusable { get { return false; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Ashx { /// <summary> /// AddUsers 的摘要说明 /// </summary> public class AddUsers : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); string userName = context.Request.Form["LoginId"]; string password = context.Request.Form["LoginPwd"]; string realName = context.Request.Form["Name"]; string address = context.Request.Form["Address"]; string phone = context.Request.Form["Phone"]; string mail = context.Request.Form["Mail"]; decimal money = decimal.Parse(context.Request.Form["Money"]); Users model = new Users(); model.LoginId = userName; model.LoginPwd = password; model.Name = realName; model.Address = address; model.Phone = phone; model.Mail = mail; model.UserRoleId = 1; model.UserStateId = 1; model.Money = money; bookshopEntities dbContext = new bookshopEntities(); dbContext.Users.AddObject(model); dbContext.SaveChanges(); context.Response.Write("ok"); } public bool IsReusable { get { return false; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Ashx { /// <summary> /// GetModelById 的摘要说明 /// </summary> public class GetModelById : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); int id = context.Request.QueryString["id"] == null ? 0 : int.Parse(context.Request.QueryString["id"]); bookshopEntities dbContext = new bookshopEntities(); var user = dbContext.Users.Where<Users>(u => u.Id == id).FirstOrDefault(); System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); string strJson = javaScriptSerializer.Serialize(user); context.Response.Write(strJson); } public bool IsReusable { get { return false; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Ashx { /// <summary> /// GetModelById 的摘要说明 /// </summary> public class GetModelById : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); int id = context.Request.QueryString["id"] == null ? 0 : int.Parse(context.Request.QueryString["id"]); bookshopEntities dbContext = new bookshopEntities(); var user = dbContext.Users.Where<Users>(u => u.Id == id).FirstOrDefault(); System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); string strJson = javaScriptSerializer.Serialize(user); context.Response.Write(strJson); } public bool IsReusable { get { return false; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Ashx { /// <summary> /// DeleteUserById 的摘要说明 /// </summary> public class DeleteUserById : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); int id = context.Request.Form["id"] == null ? 0 : int.Parse(context.Request.Form["id"]); bookshopEntities dbContext = new bookshopEntities(); Users user = dbContext.Users.Where<Users>(u => u.Id == id).FirstOrDefault(); dbContext.DeleteObject(user); dbContext.SaveChanges(); context.Response.Write("ok"); } public bool IsReusable { get { return false; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Text; namespace WebApplication1.Common { public class PageNav { public static string ShowPageNavigate(int pageSize, int currentPage, int totalCount) { string redirectTo = ""; pageSize = pageSize == 0 ? 3 : pageSize; var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数 var output = new StringBuilder(); if (totalPages > 1) { if (currentPage != 1) {//处理首页连接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize); } if (currentPage > 1) {//处理上一页的连接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize); } else { // output.Append("<span class='pageLink'>上一页</span>"); } output.Append(" "); int currint = 5; for (int i = 0; i <= 10; i++) {//一共最多显示10个页码,前面5个,后面5个 if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages) { if (currint == i) {//当前页处理 //output.Append(string.Format("[{0}]", currentPage)); output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage); } else {//一般页处理 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint); } } output.Append(" "); } if (currentPage < totalPages) {//处理下一页的链接 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + 1, pageSize); } else { //output.Append("<span class='pageLink'>下一页</span>"); } output.Append(" "); if (currentPage != totalPages) { output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize); } output.Append(" "); } output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages);//这个统计加不加都行 return output.ToString(); } } }
OK了。。。。呵呵,我上面说的那些,可以不用看了,代码倒是可以看看的,我有注视的哦....