一般在網頁常常用到連動式的下拉式選單,比如縣市名稱帶出郵遞區號。
為了不讓頁面閃一下,常用的方法是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>
.aspx.vb
這樣就可以用CallBack方式達到不用換頁(Postback)就更新頁面的效果,