减小字体
增大字体- ·上一篇文章：DataGrid实例（简单易懂，无复杂功能，适合初学者）
- ·下一篇文章：在 ASP.NET 中使用计时器(Timer)
ASP.NET 2.0 正式版中无刷新页面的开发(示例代码的补充
原文请见Leon.Zhou的：http://pfzhou.cnblogs.com/archive/2006/03/31/363342.html
下载了示例代码，并转换成VB了，AJAX功能测试成功。但遇到些小问题：
Demo1很正常。
Demo2按Leon原来的写法testAJAX.aspx.vb中Line 22不成功。所以我直接在IDE环境中，修改button3的OnClientClick属性，见testAJAX.asp的Line 52。测试成功。
Demo3按原来的加入客户端属性无法成功，在testAJAX.aspx.vb中第20行并未起作用。不知道是什么原因。 因此我只有加上一个button3来引发客户端事件。
这是个很好的例子，值得学习，详细原理说明请见作者的原文。测试时，请在您项目的web.config中添加<add name="NorthWind" connectionString="...相应的数据库连接串...">
testAJAX.aspx
1<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testAJAX.aspx.vb" Inherits="testAJAX" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head id="Head1" runat="server">
7 <title>ASP.NET 2.0 页面提交无刷新演示</title>
8 <script type="text/javascript" language ="javascript">
9 Function CallServer1()function CallServer1(inputcontrol, context)
10 {
11 context.innerHTML = "<IMG SRC='http://www.aspcool.com/lanmu/images/pie.gif' />Loading";
12 arg = 'ServerMethod1|' + inputcontrol.value;
13 <%= ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData1", "context")%>;
14 }
15
16 Function ReceiveServerData1()function ReceiveServerData1(result, context)
17 {
18 context.innerHTML = context.id + "：" + result;
19 }
20
21 Function CallServer2()function CallServer2(obj)
22 {
23 context = gridspan;
24 context.innerHTML = "<IMG SRC='http://www.aspcool.com/lanmu/images/pie.gif' />数据加载中";
25 arg = "ServerMethod2|" + obj.value;
26 <%= ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData2", "context")%>;
27 }
28
29 Function ReceiveServerData2()function ReceiveServerData2(result, context)
30 {
31 context.innerHTML = result;
32 }
33
34 </script>
35</head>
36<body>
37 <form id="form1" runat="server">
38 <div>
39 <h1>Demo1:html按钮提交数据</h1><br />
40 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
41 <input id="Button1" type="button" value="提交到Label1" />
42 <input id="Button2" type="button" value="提交到Label2" />
43 <br />
44 <asp:Label ID="Label1" runat="server" Text="Label1:"></asp:Label>
45 <br />
46 <asp:Label ID="Label2" runat="server" Text="Label2:"></asp:Label>
47 </div>
48 <hr />
49 <div>
50 <h1>Demo2:服务器按钮提交数据</h1><br />
51 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
52 <asp:Button ID="Button3" runat="server" Text="Button" OnClientClick="CallServer1(TextBox2, Label3);return false;" /><br />
53 <asp:Label ID="Label3" runat="server" Text="Label3:"></asp:Label></div>
54 <hr />
55 <div>
56 <h1>Demo3:下拉列表框和gridview绑定数据</h1><br />
57 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ connectionStrings:NorthWind %>"
58 SelectCommand="select distinct(country) from customers"></asp:SqlDataSource>
59 <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ connectionStrings:NorthWind %>"
60 SelectCommand="select customerid, companyname, country from customers where country=@Country">
61 <SelectParameters>
62 <asp:ControlParameter Name="Country" ControlID="DropDownList1" PropertyName="SelectedValue" />
63 </SelectParameters>
64 </asp:SqlDataSource>
65 <div>
66 <asp:DropDownList ID="DropDownList1" runat="server" Width="239px"
67 DataSourceID="SqlDataSource1" DataTextField="Country" DataValueField="Country">
68 </asp:DropDownList>
69 <input id="Button4" type="button" value="刷新" />
70 </div>
71 <br />
72 <span id="gridspan">
73 <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource2" CellPadding="4" ForeColor="#333333" GridLines="None">
74 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
75 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
76 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
77 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
78 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
79 <AlternatingRowStyle BackColor="White" />
80 </asp:GridView>
81 </span>
82 </div>
83 </form>
84</body>
85</html>
86
testAJAX.aspx.vb
1
2Imports System
3Imports System.Data
4Imports System.Configuration
5Imports System.Web
6Imports System.Web.Security
7Imports System.Web.UI
8Imports System.Web.UI.WebControls
9Imports System.Web.UI.WebControls.WebParts
10Imports System.Web.UI.HtmlControls
11Imports System.IO
12Imports System.Globalization
13
14Partial Public Class testAJAXClass testAJAX
15
下载了示例代码，并转换成VB了，AJAX功能测试成功。但遇到些小问题：
Demo1很正常。
Demo2按Leon原来的写法testAJAX.aspx.vb中Line 22不成功。所以我直接在IDE环境中，修改button3的OnClientClick属性，见testAJAX.asp的Line 52。测试成功。
Demo3按原来的加入客户端属性无法成功，在testAJAX.aspx.vb中第20行并未起作用。不知道是什么原因。 因此我只有加上一个button3来引发客户端事件。
这是个很好的例子，值得学习，详细原理说明请见作者的原文。测试时，请在您项目的web.config中添加<add name="NorthWind" connectionString="...相应的数据库连接串...">
testAJAX.aspx
1<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testAJAX.aspx.vb" Inherits="testAJAX" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head id="Head1" runat="server">
7 <title>ASP.NET 2.0 页面提交无刷新演示</title>
8 <script type="text/javascript" language ="javascript">
9 Function CallServer1()function CallServer1(inputcontrol, context)
10 {
11 context.innerHTML = "<IMG SRC='http://www.aspcool.com/lanmu/images/pie.gif' />Loading";
12 arg = 'ServerMethod1|' + inputcontrol.value;
13 <%= ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData1", "context")%>;
14 }
15
16 Function ReceiveServerData1()function ReceiveServerData1(result, context)
17 {
18 context.innerHTML = context.id + "：" + result;
19 }
20
21 Function CallServer2()function CallServer2(obj)
22 {
23 context = gridspan;
24 context.innerHTML = "<IMG SRC='http://www.aspcool.com/lanmu/images/pie.gif' />数据加载中";
25 arg = "ServerMethod2|" + obj.value;
26 <%= ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData2", "context")%>;
27 }
28
29 Function ReceiveServerData2()function ReceiveServerData2(result, context)
30 {
31 context.innerHTML = result;
32 }
33
34 </script>
35</head>
36<body>
37 <form id="form1" runat="server">
38 <div>
39 <h1>Demo1:html按钮提交数据</h1><br />
40 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
41 <input id="Button1" type="button" value="提交到Label1" />
42 <input id="Button2" type="button" value="提交到Label2" />
43 <br />
44 <asp:Label ID="Label1" runat="server" Text="Label1:"></asp:Label>
45 <br />
46 <asp:Label ID="Label2" runat="server" Text="Label2:"></asp:Label>
47 </div>
48 <hr />
49 <div>
50 <h1>Demo2:服务器按钮提交数据</h1><br />
51 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
52 <asp:Button ID="Button3" runat="server" Text="Button" OnClientClick="CallServer1(TextBox2, Label3);return false;" /><br />
53 <asp:Label ID="Label3" runat="server" Text="Label3:"></asp:Label></div>
54 <hr />
55 <div>
56 <h1>Demo3:下拉列表框和gridview绑定数据</h1><br />
57 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ connectionStrings:NorthWind %>"
58 SelectCommand="select distinct(country) from customers"></asp:SqlDataSource>
59 <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ connectionStrings:NorthWind %>"
60 SelectCommand="select customerid, companyname, country from customers where country=@Country">
61 <SelectParameters>
62 <asp:ControlParameter Name="Country" ControlID="DropDownList1" PropertyName="SelectedValue" />
63 </SelectParameters>
64 </asp:SqlDataSource>
65 <div>
66 <asp:DropDownList ID="DropDownList1" runat="server" Width="239px"
67 DataSourceID="SqlDataSource1" DataTextField="Country" DataValueField="Country">
68 </asp:DropDownList>
69 <input id="Button4" type="button" value="刷新" />
70 </div>
71 <br />
72 <span id="gridspan">
73 <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource2" CellPadding="4" ForeColor="#333333" GridLines="None">
74 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
75 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
76 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
77 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
78 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
79 <AlternatingRowStyle BackColor="White" />
80 </asp:GridView>
81 </span>
82 </div>
83 </form>
84</body>
85</html>
86
testAJAX.aspx.vb
1
2Imports System
3Imports System.Data
4Imports System.Configuration
5Imports System.Web
6Imports System.Web.Security
7Imports System.Web.UI
8Imports System.Web.UI.WebControls
9Imports System.Web.UI.WebControls.WebParts
10Imports System.Web.UI.HtmlControls
11Imports System.IO
12Imports System.Globalization
13
14Partial Public Class testAJAXClass testAJAX
15