使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现

很多用户都有这样需求，比如：点击按钮，刷新 GridView 中的数据，而不是这个页面刷新。使用简单的 XMLHttpRequest
就可以直接实现。具体代码如下：



ASPX
代码

<%
@ 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
]
=

"
【孟子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();

}

}


//
/ 添加这个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
>

以上代码直接拷贝执行即可看到结果。