原文请见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='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='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" onclick="CallServer1(TextBox1, Label1)"/>
42 <input id="Button2" type="button" value="提交到Label2" onclick="CallServer1(TextBox1, 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="刷新" onclick="CallServer2(DropDownList1)"/>
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 &