本人最近在學習Ajax之中看見【孟子E章】有這樣的一篇文章,所以借鑒學習一下,好了,先看看他的代碼吧。 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView.aspx.cs" Inherits="GridView" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script runat="server"><!-- System.Data.DataView CreateDataSourceByXianhuiMeng() { System.Data.DataTable dt = new System.Data.DataTable(); System.Data.DataRow dr; dt.Columns.Add(new System.Data.DataColumn(" id ", typeof(System.Int32))); dt.Columns.Add(new System.Data.DataColumn(" 学生姓名 ", typeof(System.String))); dt.Columns.Add(new System.Data.DataColumn(" 语文 ", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn(" 数学 ", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn(" 英语 ", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn(" 计算机 ", typeof(System.Decimal))); for (int i = 1; i < 10; i++) { System.Random rd = new System.Random(Environment.TickCount * i); ; dr = dt.NewRow(); dr[0] = i; dr[1] = " 【孟子E章】 " + i.ToString(); dr[2] = System.Math.Round(rd.NextDouble() * 100, 2); dr[3] = System.Math.Round(rd.NextDouble() * 100, 2); dr[4] = System.Math.Round(rd.NextDouble() * 100, 2); dr[5] = System.Math.Round(rd.NextDouble() * 100, 2); dt.Rows.Add(dr); } System.Data.DataView dv = new System.Data.DataView(dt); return dv; } protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["id"] != null) { Response.ClearContent(); GridView1.DataSource = CreateDataSourceByXianhuiMeng(); GridView1.DataBind(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); Literal header = new Literal(); header.Text = " <h2>项目 " + Request.QueryString["id"] + "</h2> "; Header.Controls.Add(header); Header.RenderControl(htw); GridView1.RenderControl(htw); Response.Write(" 这里查询数据,输出结果就可以了。结果: " + sb.ToString()); Response.End(); } } public override void VerifyRenderingInServerForm(Control control) { } // --></mce:script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title > 使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现 </title > <script type ="text/javascript" > function GetData(p) { document.getElementById( "d" ).innerHTML = " 正在读取数据…… " ; h = window.XMLHttpRequest?new window.XMLHttpRequest():new ActiveXObject("MSXML2.XMLHTTP"); h.open( "GET" , '<%=Request.FilePath%>?id='+p.value, true ); h.onreadystatechange = function () { if (h.readyState == 4 ) { if (h.status >= 200 && h.status < 300 ) { document.getElementById( "d" ).innerHTML = h.responseText; } else { document.getElementById( "d" ).innerHTML = " <h2>数据操作错误:</h2> " + h.responseText; } } } h.send( null ); } alert( " 这个提示,只出现在第一次打开页面。 " ); </script > </head> <body> <form id ="form1" runat ="server" > <asp:GridView ID ="GridView1" runat ="server" ></asp:GridView > <asp:Panel ID ="Header" runat ="server" ></asp:Panel > <select onchange ="GetData(this)" > <option value ="1" > 项目一 </option > <option value ="2" > 项目二 </option > </select > </form > <div id ="d" ></div > </body> </html> 根據學習自己也做了個測試學習。舉一反三嘛。以後還是這樣跟大家好好的學習! <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script runat="server"><!-- System.Data.DataView CreateDataSourceByXianhuiMeng(string table) { System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(); conn.ConnectionString = "Data Source=3D00A111//SQLEXPRESS;Initial Catalog=Test;Integrated Security=True"; conn.Open(); System.Data.SqlClient.SqlDataAdapter cmd = new System.Data.SqlClient.SqlDataAdapter("select * from "+table, conn); //DataSet ds = new DataSet(); System.Data.DataTable dt = new System.Data.DataTable(); cmd.Fill(dt); conn.Close(); System.Data.DataView dv = new System.Data.DataView(dt); return dv; } protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["id"] != null) { Response.ClearContent(); if (Request.QueryString["id"] == "1") { GridView1.DataSource = CreateDataSourceByXianhuiMeng("test"); } else { GridView1.DataSource = CreateDataSourceByXianhuiMeng("grades"); } GridView1.DataBind(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); Literal header = new Literal(); header.Text = " <h2>项目 " + Request.QueryString["id"] + "</h2> "; Header.Controls.Add(header); Header.RenderControl(htw); GridView1.RenderControl(htw); Response.Write(" 这里查询数据,输出结果就可以了。结果: " + sb.ToString()); Response.End(); } } public override void VerifyRenderingInServerForm(Control control) { } // --></mce:script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title > 使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现 </title > <script type ="text/javascript" > function GetData(p) { document.getElementById( "d" ).innerHTML = " 正在读取数据…… " ; h = window.XMLHttpRequest?new window.XMLHttpRequest():new ActiveXObject("MSXML2.XMLHTTP"); h.open( "GET" , '<%=Request.FilePath%>?id='+p.value, true ); h.onreadystatechange = function () { if (h.readyState == 4 ) { if (h.status >= 200 && h.status < 300 ) { document.getElementById( "d" ).innerHTML = h.responseText; } else { document.getElementById( "d" ).innerHTML = " <h2>数据操作错误:</h2> " + h.responseText; } } } h.send( null ); } </script > </head> <body> <form id ="form1" runat ="server" > <asp:GridView ID ="GridView1" runat ="server" ></asp:GridView > <asp:Panel ID ="Header" runat ="server" ></asp:Panel > <select onchange ="GetData(this)" > <option value ="1" > 项目一 </option > <option value ="2" > 项目二 </option > </select > </form > <div id ="d" ></div > </body> </html>