連動下拉式選單
一般在網頁常常用到連動式的下拉式選單，比如縣市名稱帶出郵遞區號。
為了不讓頁面閃一下，常用的方法是AJAX或是PageMethod。
這次用ASP.NET當中的Call Back機制來呈現出AJAX效果。
.aspx
01 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head runat="server">
06 <title>連動下拉式選單-使用Call back</title>
07
08 <script type="text/javascript">
09 function CallBackResponse(result , ctx)
10 {
11 var lstItems = document.forms[0].elements['ddl_Emplyee'];
12 var lblE = document.getElementById("lbl_Employee");
13 var options = lstItems.getElementsByTagName("option");
14
15 lblE.innerText = lstItems.options[lstItems.selectedIndex].innerText;
16 var lstOrders = document.forms[0].elements['ddl_orders'];
17 lstOrders.innerHTML= "";
18
19 /* 將callback回傳回來的結果字串切成陣列 */
20 var rows = result.split('||');
21 for (var i = 0; i < rows.length - 1; ++i)
22 {
23 /* 將Text 和 Value 拆開並塞給 ddl_orders */
24 var fields = rows[i].split('|');
25 var OrderID = fields[0];
26 var OrderName = fields[1];
27 var option = document.createElement("option");
28
29 option.value = OrderID;
30 option.innerHTML = OrderName;
31 lstOrders.appendChild(option);
32
33 }
34
35
36 }
37 /*例外處理*/
38 function ErrorFunction(error , ctx)
39 {
40 alert("錯誤訊息： " + error);
41 }
42 </script>
43
44 </head>
45 <body>
46 <form id="form1" runat="server">
47 <div>
48 Employee：
49 <asp:DropDownList ID="ddl_Emplyee" runat="server" DataSourceID="SqlDataSource1"
50 DataTextField="LastName" DataValueField="EmployeeID">
51 </asp:DropDownList>
52 <br />
53 <asp:Label ID="lbl_Employee" runat="server" ForeColor="Red"></asp:Label>Emplayee訂單：<asp:DropDownList ID="ddl_orders"
54 runat="server">
55 </asp:DropDownList>
56 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
57 SelectCommand="SELECT [EmployeeID], [LastName] FROM [Employees]"></asp:SqlDataSource>
58 </div>
59 </form>
60 </body>
61 </html>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head runat="server">
06 <title>連動下拉式選單-使用Call back</title>
07
08 <script type="text/javascript">
09 function CallBackResponse(result , ctx)
10 {
11 var lstItems = document.forms[0].elements['ddl_Emplyee'];
12 var lblE = document.getElementById("lbl_Employee");
13 var options = lstItems.getElementsByTagName("option");
14
15 lblE.innerText = lstItems.options[lstItems.selectedIndex].innerText;
16 var lstOrders = document.forms[0].elements['ddl_orders'];
17 lstOrders.innerHTML= "";
18
19 /* 將callback回傳回來的結果字串切成陣列 */
20 var rows = result.split('||');
21 for (var i = 0; i < rows.length - 1; ++i)
22 {
23 /* 將Text 和 Value 拆開並塞給 ddl_orders */
24 var fields = rows[i].split('|');
25 var OrderID = fields[0];
26 var OrderName = fields[1];
27 var option = document.createElement("option");
28
29 option.value = OrderID;
30 option.innerHTML = OrderName;
31 lstOrders.appendChild(option);
32
33 }
34
35
36 }
37 /*例外處理*/
38 function ErrorFunction(error , ctx)
39 {
40 alert("錯誤訊息： " + error);
41 }
42 </script>
43
44 </head>
45 <body>
46 <form id="form1" runat="server">
47 <div>
48 Employee：
49 <asp:DropDownList ID="ddl_Emplyee" runat="server" DataSourceID="SqlDataSource1"
50 DataTextField="LastName" DataValueField="EmployeeID">
51 </asp:DropDownList>
52 <br />
53 <asp:Label ID="lbl_Employee" runat="server" ForeColor="Red"></asp:Label>Emplayee訂單：<asp:DropDownList ID="ddl_orders"
54 runat="server">
55 </asp:DropDownList>
56 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
57 SelectCommand="SELECT [EmployeeID], [LastName] FROM [Employees]"></asp:SqlDataSource>
58 </div>
59 </form>
60 </body>
61 </html>
.aspx.vb
01 
Imports System.Data
02
Imports System.Data.SqlClient
03
Partial Class _Default
04 Inherits System.Web.UI.Page
05 Implements ICallbackEventHandler
06
07 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
08
'利用GetCallbackEventReference產生JavaScript的Call Back指令
09 Dim CallBackRef As String = Me.ClientScript.GetCallbackEventReference(Me, "document.all['ddl_Emplyee'].value", "CallBackResponse", "null", "ErrorFunction", True)
10 '將CallBack指令掛到ddl_Emplyee的onchange事件
11 Me.ddl_Emplyee.Attributes("onchange") = CallBackRef
12
End Sub
13
14 Dim cbrg As String
15 '將處理結果回傳Client端
16
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
17 Dim sbl As StringBuilder = New StringBuilder
18 Try
19 Using conn As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("NorthwindConnectionString1").ConnectionString)
20 conn.Open()
21 Using command As New SqlCommand
22 With command
23 .Connection = conn
24 .CommandText = "select OrderID,ShipName from Orders where EmployeeID=@EmployeeID"
25 .Parameters.AddWithValue("@EmployeeID", cbrg)
26 Using dr As SqlDataReader = .ExecuteReader
27 While dr.Read
28 sbl.Append(dr.Item("OrderID"))
29 sbl.Append("|")
30 sbl.Append(dr.Item("ShipName"))
31 sbl.Append("||")
32 End While
33 End Using
34 End With
35 End Using
36 End Using
37 Catch ex As Exception
38 Throw New ApplicationException(ex.Message.ToString)
39 End Try
40 Return sbl.ToString
41 End Function
42 '接收ddl_Emplyee Client端傳入的參數
43 Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
44 cbrg = eventArgument
45 End Sub
46End Class
Imports System.Data 
Imports 02
Imports System.Data.SqlClient 03
Partial Class _Default 04
Inherits System.Web.UI.Page 05
Implements ICallbackEventHandler 06
07
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 08
'利用GetCallbackEventReference產生JavaScript的Call Back指令 09
Dim CallBackRef As String = Me.ClientScript.GetCallbackEventReference(Me, "document.all['ddl_Emplyee'].value", "CallBackResponse", "null", "ErrorFunction", True) 10
'將CallBack指令掛到ddl_Emplyee的onchange事件 11
Me.ddl_Emplyee.Attributes("onchange") = CallBackRef 12
End Sub 13
14
Dim cbrg As String 15
'將處理結果回傳Client端 16
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult 
Public17
Dim sbl As StringBuilder = New StringBuilder 18
Try 19
Using conn As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("NorthwindConnectionString1").ConnectionString) 20
conn.Open() 21
Using command As New SqlCommand 22
With command 23
.Connection = conn 24
.CommandText = "select OrderID,ShipName from Orders where EmployeeID=@EmployeeID" 25
.Parameters.AddWithValue("@EmployeeID", cbrg) 26
Using dr As SqlDataReader = .ExecuteReader 27
While dr.Read 28
sbl.Append(dr.Item("OrderID")) 29
sbl.Append("|") 30
sbl.Append(dr.Item("ShipName")) 31
sbl.Append("||") 32
End While 33
End Using 34
End With 35
End Using 36
End Using 37
Catch ex As Exception 38
Throw New ApplicationException(ex.Message.ToString) 39
End Try 40
Return sbl.ToString 41
End Function 42
'接收ddl_Emplyee Client端傳入的參數 43
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent 44
cbrg = eventArgument 45
End Sub 46
End Class這樣就可以用CallBack方式達到不用換頁(Postback)就更新頁面的效果，