摘要:javascript- 利用 JavaScript 做到簡單的 AJAX功能。
功能簡述：
在執行畫面中有 ddlMenu1、ddlMenu2 兩個 DroipDownList 控制項。
我想要在 ddlMenu1 選項改變時，透過呼叫CallBack.aspx 來達到將資料動態填入ddlMenu2選項中。
wf1.aspx (執行畫面)
1. 首先在 wf1.aspx 加入 ddlMenu1、ddlMenu2 兩個 DroipDownList 控制項，並設定相關的Text、Value。
wf1.aspx (HTML原始碼)
1: <%@ Page language="c#" Codebehind="wf1.aspx.cs" AutoEventWireup="false" Inherits="WebTestApp2.wf1" %>
2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3: <HTML>
4: <HEAD>
5: <title>wf1</title>
6: <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
7: <meta content="C#" name="CODE_LANGUAGE">
8: <meta content="JavaScript" name="vs_defaultClientScript">
9: <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10: <script id="RunObj"></script>
11: <script language="javascript">
12: function CallBackPage(CtrlName1,CtrlName2)
13: {
14: var Menu1Value = document.getElementById(CtrlName1).value;
15: RunObj.src="backPage.aspx?name="+CtrlName2+"&value="+Menu1Value;
16: }
17: </script>
18: </HEAD>
19: <body>
20: <form id="Form1" method="post" runat="server">
21: <FONT face="新細明體">
22: <asp:dropdownlist id="ddlMenu1" runat="server">
23: <asp:ListItem Value="001">Menu1-1</asp:ListItem>
24: <asp:ListItem Value="002">Menu1-2</asp:ListItem>
25: <asp:ListItem Value="003">Menu1-3</asp:ListItem>
26: <asp:ListItem Value="004">Menu1-4</asp:ListItem>
27: </asp:dropdownlist>
28: <asp:dropdownlist id="ddlMenu2" runat="server"></asp:dropdownlist>
29: </FONT>
30: </form>
31: </body>
32: </HTML>
2. 接著在 wf1.aspx.cs 裡針對 ddlMenu1 控制項加上onChange事件之屬性值。
3. 在 wf1.aspx (HTML原始碼) 加上 CallBackPage function 的javascript程式碼。
4. 在 wf1.aspx (HTML原始碼) 加上 <script id="RunObj"></script>。
5. CallBackPage function 中，將呼叫backPage.aspx，並抓回相關的JavaScript語法。
wf1.aspx.cs
1: using System;
2: using System.Collections;
3: using System.ComponentModel;
4: using System.Data;
5: using System.Drawing;
6: using System.Web;
7: using System.Web.SessionState;
8: using System.Web.UI;
9: using System.Web.UI.WebControls;
10: using System.Web.UI.HtmlControls;
11:
12: namespace WebTestApp2
13: {
14: /// <summary>
15: /// wf1 的摘要描述。
16: /// </summary>
17: public class wf1 : System.Web.UI.Page
18: {
19: protected System.Web.UI.WebControls.DropDownList ddlMenu1;
20: protected System.Web.UI.WebControls.DropDownList ddlMenu2;
21:
22: private void Page_Load(object sender, System.EventArgs e)
23: {
24: // 在這裡放置使用者程式碼以初始化網頁
25: if(!IsPostBack)
26: {
27: ddlMenu1.Attributes.Add("onChange","CallBackPage('" + ddlMenu1.ClientID.ToString() +"','" + ddlMenu2.ClientID.ToString() +"')");
28: }
29: }
30:
31: #region Web Form 設計工具產生的程式碼
32: override protected void OnInit(EventArgs e)
33: {
34: //
35: // CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
36: //
37: InitializeComponent();
38: base.OnInit(e);
39: }
40:
41: /// <summary>
42: /// 此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改
43: /// 這個方法的內容。
44: /// </summary>
45: private void InitializeComponent()
46: {
47: this.Load += new System.EventHandler(this.Page_Load);
48:
49: }
50: #endregion
51: }
52: }
6. 在 backPage.aspx (HTML模式)中，其他HTML相關Tag 通通刪除，只留下 <%@ Page Language ... 此行。
backPage.aspx
7. 在backPage.aspx.cs 中抓取從 wf1.aspx/javascript function/RunObj.src 網址中所送過來的參數值。
8. 將相關參數值經過處理後，產生對應的JavaScript語法，並列印在backPage.aspx網頁畫面上，傳回wf1.aspx。
9. 而且wf1.aspx 接收到回傳的javascript語法後並執行，就會動態填入資料進 ddlMenu2 控制項的選項中。
backPage.aspx.cs
1: using System;
2: using System.Collections;
3: using System.ComponentModel;
4: using System.Data;
5: using System.Drawing;
6: using System.Web;
7: using System.Web.SessionState;
8: using System.Web.UI;
9: using System.Web.UI.WebControls;
10: using System.Web.UI.HtmlControls;
11:
12: namespace WebTestApp2
13: {
14: /// <summary>
15: /// backPage 的摘要描述。
16: /// </summary>
17: public class backPage : System.Web.UI.Page
18: {
19: private void Page_Load(object sender, System.EventArgs e)
20: {
21: // 在這裡放置使用者程式碼以初始化網頁
22:
23: Response.CacheControl = "no-cache";
24: Response.AddHeader ("Pragma", "no-cache");
25: Response.Expires = -1;
26:
27: string m_1 = Request.QueryString["name"].ToString().Trim();
28: string m_2 = Request.QueryString["value"].ToString().Trim();
29: string Htm;
30:
31: Htm = "document.all."+m_1+".options.length=0;";
32: Htm += "document.all."+m_1+".options[0]=new Option('Menu2-"+m_2+"','00"+m_2+"');";
33:
34: Response.Write(Htm);
35: }
36:
37: #region Web Form 設計工具產生的程式碼
38: override protected void OnInit(EventArgs e)
39: {
40: //
41: // CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
42: //
43: InitializeComponent();
44: base.OnInit(e);
45: }
46:
47: /// <summary>
48: /// 此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改
49: /// 這個方法的內容。
50: /// </summary>
51: private void InitializeComponent()
52: {
53: this.Load += new System.EventHandler(this.Page_Load);
54: }
55: #endregion
56: }
57: }
若有任何問題，歡迎指教！謝謝 ~