使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现
2011-01-07 18:12 音乐让我说 阅读(1054) 评论(0) 编辑 收藏 举报代码如下:
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPager.aspx.cs" Inherits="AjaxPager" %> <!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>使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现</title> <script type="text/javascript" language="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" Width="50%"> </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>
后台代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class AjaxPager : System.Web.UI.Page { /// <summary> /// 加载事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Page_Load(object sender, EventArgs e) { if(!IsPostBack) { 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(); } } } protected 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 < 30; i++) { System.Random rd = new System.Random(Environment.TickCount * i); ; dr = dt.NewRow(); dr[0] = i; dr[1] = "【张三】" + 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; } /// <summary> /// 添加这个override void VerifyRenderingInServerForm(Control control),是为了避免出现 /// 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。 /// 的异常 /// </summary> /// <param name="control"></param> public override void VerifyRenderingInServerForm(Control control) { } }
谢谢浏览!
作者:音乐让我说(音乐让我说 - 博客园)
出处:http://music.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。