How to make a JQuery's Ajax request for a datatable, and display it on the page. Here is my solution, Firstly, using JQuery to make a async request to ASP.NET common http handler, Secondly retrieve datatable from database in httphanlder class, and formate the datatable to a html table, and respond the plain/text to JQuery's async request.
The code blow is the front page:
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxAndJQuery._Default" %>
<!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>JQuery async request a table</title>
<script language=javascript src=jquery-1.4.2.min.js>
</script>
<script language="javascript">
function DoAsyncCall() {
$.get("GetDataTable.ashx", { Action: "get", Name: "name" }, function(data, textStatus) {
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
// this;
divContent.innerHTML = data;
});
}
</script>
<link rel="Stylesheet" href=Stylesheet1.css />
</head>
<body>
<form id="form1" runat="server">
<input id="btnAjax" type="button" onclick="DoAsyncCall()" value="Do Async Call"/>
<hr />
<div id="divContent"></div>
</form>
</body>
</html>
The blow is the common http handler:
代码
using System.Data;
using System.Web;
using System.Web.Services;
using System.Text;
namespace AjaxAndJQuery
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetDataTable : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
DataSet dataset = DBHelper.Query("select id,name,age from employee");
DataTable table = dataset.Tables[0];
StringBuilder sb = new StringBuilder("<table><tr>");
for (int i = 0; i < table.Columns.Count; i++)
{
sb.Append("<th>" + table.Columns[i].ColumnName + "</th>");
}
sb.Append("</tr>");
for (int i = 0; i < table.Rows.Count; i++)
{
sb.Append(string.Format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>",table.Rows[i][0].ToString(),table.Rows[i][1].ToString(),table.Rows[i][2].ToString()));
}
sb.Append("</table>");
context.Response.Write(sb.ToString());
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
The blow is sql to create data table:
代码
CREATE TABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Age] [int] NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]