点击按钮,刷新 GridView 中的数据,而不是这个页面刷新。使用简单的 XMLHttpRequest 就可以直接实现。具体代码如下:
<% @ Page Language ="C#"%>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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("学生姓名", 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 ] ="【Test】"+ 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();
}
}
// / 添加这个override void VerifyRenderingInServerForm(Control control),是为了避免出现
// / 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。
// / 的异常
public override void VerifyRenderingInServerForm(Control control)
{ }
</script>
<html xmlns ="http://www.w3.org/1999/xhtml">
<head id ="Head1" 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>