用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>