Please see the original text by Leon.Zhou: http://pfzhou.cnblogs.com/archive/2006/03/31/363342.html.
I downloaded the sample code and converted it into VB. The AJAX function test was successful. But encountered some small problems:
Demo1 is normal.
Demo2 failed to test Line 22 in AJAX.aspx.vb according to Leon's original writing method. So I directly modified the OnClientClick property of button3 in the IDE environment, see Line 52 of testAJAX.asp. Test successful.
Demo3 failed to successfully add client attributes according to the original method, and line 20 in testAJAX.aspx.vb did not work. Don't know why. So I only added a button3 to trigger the client event.
This is a good example and worth learning. For detailed explanation of the principle, please see the author's original text. When testing, please add <add name="NorthWind" connectionString="...corresponding database connection string..."> in your project's web.config
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 page submission without refresh demonstration</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)
twenty two {
23 context = gridspan;
24 context.innerHTML = "<IMG SRC='images/pie.gif' />Data is loading";
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 button submits data</h1><br />
40 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
41 <input id="Button1" type="button" value="Submit to Label1" onclick="CallServer1(TextBox1, Label1)"/>
42 <input id="Button2" type="button" value="Submit to 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: Server button submits data</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: Binding data between drop-down list box and 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="Refresh" 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 <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 Inherits System.Web.UI.Page
16 Implements ICallbackEventHandler
17 Protected Sub Page_Load()Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
18 'Register client event processing method
19 'It seems that this sentence did not work, so I added an additional button4 to trigger the client event by AndyDavis
20 DropDownList1.Attributes.Add("onchange", "CallServer2(this)")
21 'Button3's client event can be set directly in the OnClientClick property in the IDE, no need to add it here by AndyDavis
22 'Button3.Attributes.Add("onclick", "CallServer1(TextBox2, Label3);return false;")
23 End Sub
twenty four
25 Private serverReturn As String
26
27 Public Function GetCallbackResult()Function GetCallbackResult() As String Implements ICallbackEventHandler.GetCallbackResult
28 'In order to facilitate viewing of the loading effect, add a delay
29 System.Threading.Thread.Sleep(2000)
30
31 Dim parts() As String = serverReturn.Split("|"c)
32 'Call according to the passed method name and pass the corresponding parameters. Currently only one parameter is supported
33 Return CStr([GetType]().GetMethod(parts(0)).Invoke(Me, New Object() {parts(1)}))
34 End Function
35
36
37 Public Sub RaiseCallbackEvent()Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements ICallbackEventHandler.RaiseCallbackEvent
38 serverReturn = eventArgument
39 End Sub
40
41 'According to the English country name or abbreviation transmitted from the client, translate it into the corresponding Chinese country name
42 Public Function ServerMethod1()Function ServerMethod1(ByVal arg As String) As String
43 Dim s As String = ""
44 Select Case arg.ToLower()
45 Case "cn"
46 Case "china"
47 s = "China"
48 Exit Select
49 Case "us"
50 s = "United States"
51 Exit Select
52 Case Else
53 s = "Unknown country"
54 Exit Select
55 End Select
56 Returns
57 End Function
58
59 'Update the content of the GridView based on the value passed from the client, and return the updated GridView's html
60 Public Function ServerMethod2()Function ServerMethod2(ByVal arg As String) As String
61 DropDownList1.SelectedValue = arg
62 GridView1.DataBind()
63
64 Return RenderControl(GridView1)
65 End Function
66
67 Private Overloads Function RenderControl()Function RenderControl(ByVal control As Control) As String
68 Dim writer1 As StringWriter = New StringWriter(CultureInfo.InvariantCulture)
69 Dim writer2 As HtmlTextWriter = New HtmlTextWriter(writer1)
70
71 control.RenderControl(writer2)
72 writer2.Flush()
73 writer2.Close()
74
75 Return writer1.ToString()
76 End Function
77End Class
78