用AJAX异步的方式来获取数据,并在页面动态的展示数据
<1>
创建一个UserService类。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; namespace ModelService { public class UserService { public static string SelectDataToJson() { //将从数据库查询出来的数据保存到 一个DataTable中 DataTable dt= sqlHelper.ExecuteDataTable("select * from T_User"); //将这个dt表转换成Json格式 示例:{"Json":[{"Id":"1","UserName":"张三"}]} string JsonStr = DataTableToJson.DtToJson("Json",dt); //返回这个Json格式的字符串 return JsonStr; } } }
<2>
创建一个Handler1.ashx (让AJAX请求从这里获得数据)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using 实体类.ModelService; namespace 实体类 { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; //调用UserService类下的SelectDataToJson()方法,获取到一个Json格式的字符串(字符串保存了执行sql语句查询到的数据) string str = UserService.SelectDataToJson(); //将数据写到浏览器 context.Response.Write(str); } public bool IsReusable { get { return false; } } } }
<3>
WebForm1.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="实体类.WebForm1" %> <!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> <script type="text/javascript" src="jquery-1.11.2.js"></script> <script type="text/javascript"> <!--一个Post类型AJAX异步请求--> $.post("Handler1.ashx",function (strJson) { //strJson是请求成功后服务器返回的数据 //strJson的值为{"Json":[{"Id":"1","UserName":"张三","Age":"25","Gender":"0"},{"Id":"2","UserName":"李四","Age":"26","Gender":"1"}]} var oJson = $.parseJSON(strJson); //将这个数据转换成Json格式 //oJson.Json是获取key为Json这个对象的值;因为这个值为一个数组,那么.length就获取到了这个数组的长度(为2) var oJsonLength = oJson.Json.length; //遍历这个数组的长度() for (var i = 0; i < oJsonLength; i++) { //当i=0的时候oJson.Json[i]就代表数组的第一个元素,这个元素又是一个Json对象。所以就可以通过.Id来获得数据了 var tr = "<tr><td>" + oJson.Json[i].Id + "</td><td>" + oJson.Json[i].UserName + "</td><td>" + oJson.Json[i].Age + "</td><td>" + oJson.Json[i].Gender + "</td></tr>"; $("#t1").append(tr); //将这个tr字符串添加到id为t1的这个Table中去 } }) </script> </head> <body> <form id="form1" runat="server"> <div> <table id="t1" border="1px"> <tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr> </table> </div> </form> </body> </html>
用Session传值的形式,将数据传递到WebForm.aspx页面来展示数据
<1>
首先创建一个实体类 User
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace 实体类 { public class User { public int Id { get; set; } public string UserName { get; set; } public int Age { get; set; } public int Gender { get; set; } } }
<2>
调用sqlHelper将这个查询出来的数据转换成一个 list对象(将查询出来的数据映射到实体类上)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; namespace 实体类.ModelService { public class UserService { public static List<User> SelectDataToEntity() { //通过查询数据库,将获取到的数据转换成一个list List<User> list = sqlHelper.SelectDataToList<User>("select * from T_User"); return list; } } }
<3>
WebForm1.aspx.cs页面 (注意:WebForm1.aspx页面是继承WebForm1.aspx.cs类的)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using 实体类.ModelService; namespace 实体类 { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender,EventArgs e) { //将获取到的list(List<User> lsit)存放到 Session里。然后可以在WebForm1.aspx页面中来遍历这个list 从而取到实体类的数据 Session.Add("User",UserService.SelectDataToEntity()); } } }
<4>
WebForm1.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="实体类.WebForm1" %> <!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> </head> <body> <form id="form1" runat="server"> <div> <table border="1px"> <% var list = (List<实体类.User>)Session["User"];%> <1--获取到这个key为User的Session,强转为List<实体类.User>类型--> <tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr> <% foreach( var r in list){ %> <tr><td><%=r.Id %></td><td><%=r.UserName %></td><td><%=r.Age %></td><td><%=r.Gender %></td></tr> <% }%> </table> </div> </form> </body> </html>