|
很多用戶都有這樣需求，比如：點(diǎn)擊按鈕，刷新 GridView 中的數(shù)據(jù)，而不是這個(gè)頁面刷新。使用簡單的 XMLHttpRequest 就可以直接實(shí)現(xiàn)。具體代碼如下：
ASPX 代碼
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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("學(xué)生姓名", typeof(System.String))); dt.Columns.Add(new System.Data.DataColumn("語文", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn("數(shù)學(xué)", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn("英語", typeof(System.Decimal))); dt.Columns.Add(new System.Data.DataColumn("計(jì)算機(jī)", typeof(System.Decimal))); for (int i = 1; i < 30; 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>項(xiàng)目 " + Request.QueryString["id"] + "</h2>"; Header.Controls.Add(header); Header.RenderControl(htw); GridView1.RenderControl(htw); Response.Write("這里查詢數(shù)據(jù)，輸出結(jié)果就可以了。結(jié)果：" + sb.ToString()); Response.End(); } } /// 添加這個(gè)override void VerifyRenderingInServerForm(Control control)，是為了避免出現(xiàn) /// 類型“GridView”的控件“GridView1”必須放在具有 runat=server 的窗體標(biāo)記內(nèi)。 /// 的異常 public override void VerifyRenderingInServerForm(Control control) { } </script> <html xmlns="http://www./1999/xhtml"> <head id="Head1" runat="server"> <title>使用 AJAX，局部刷新 GridView 進(jìn)行數(shù)據(jù)綁定的簡單實(shí)現(xiàn)</title> <script type="text/javascript"> function GetData(p) { document.getElementById("d").innerHTML = "正在讀取數(shù)據(jù)……"; 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>數(shù)據(jù)操作錯(cuò)誤：</h2>" + h.responseText; } } } h.send(null); } alert("這個(gè)提示，只出現(xiàn)在第一次打開頁面。"); </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">項(xiàng)目一</option> <option value="2">項(xiàng)目二</option> </select> </form> <div id="d"></div> </body> </html> |
|
|
