一個ajax.Net庫的使用例子－－下拉框聯動

時間 2021-08-15

標籤 javascript html java ajax 數據庫小程序 ide this spa .net 欄目 Ajax 简体版

原文原文鏈接

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace AjaxText
{
    public partial class _Default : System.Web.UI.Page
    {
        public ArrayList DataSource = new ArrayList();

        protected void Page_Load(object sender, EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
        }
        /// <summary>
        /// 初始化數據源
        /// </summary>
        public void initDataSource()
        {
            DataSource.Add(new address("湖南", "長沙"));
            DataSource.Add(new address("湖南", "衡陽"));
            DataSource.Add(new address("湖南", "郴州"));
            DataSource.Add(new address("湖南", "岳陽"));
            DataSource.Add(new address("廣東", "廣州"));
            DataSource.Add(new address("廣東", "清遠"));
            DataSource.Add(new address("廣東", "汕頭"));
            DataSource.Add(new address("湖北", "武漢"));
            DataSource.Add(new address("湖北", "十堰"));
            DataSource.Add(new address("湖北", "仙桃"));
            DataSource.Add(new address("湖北", "天門"));
        }

        /// <summary>
        /// 獲取第一個下拉框的數據。
        /// </summary>
        /// <returns></returns>
        [Ajax.AjaxMethod]
        public string GetFirstSelectData()
        {
            initDataSource();
            ArrayList arr = new ArrayList();
            foreach (address add in DataSource)
            {
                if (!arr.Contains(add.strProvince))
                {
                    arr.Add(add.strProvince);
                }
            }
            string result = "";
            foreach (string str in arr)
                result += str + ";";
            if (result.Length > 0)
                result = result.Substring(0, result.Length - 1);
            return result;
        }

        /// <summary>
        /// 根據省份獲取城市。
        /// </summary>
        /// <param name="province"></param>
        /// <returns></returns>
        [Ajax.AjaxMethod]
        public string GetCitys(string province)
        {
            initDataSource();
            string result = "";
            if (province != null && province != string.Empty)
            {
                foreach (address add in DataSource)
                {
                    if (add.strProvince == province)
                        result += add.strCity + ";";
                }
            }
            if (result.Length > 0)
                result = result.Substring(0, result.Length - 1);
            return result;
        }

        //地址對象實體類
        public class address
        {
            public string strProvince;
            public string strCity;
            public address(string province,string city)
            {
                strProvince = province;
                strCity = city;
            }
        }
    }
}

Default.aspx頁面的html代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxText._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無標題頁</title>
    <script language="javascript" type="text/javascript">
    //初始化第一個下拉框，從服務端讀取數據。
    //其實這裏應該直接在服務端綁定數據，此處爲了演示ajax特意也使用ajax技術綁定數據。
    function initSelect1()
    {
          var Data=_Default.GetFirstSelectData().value
          var strData=new String(Data);
          var select1=document.getElementById("aa");
          select1.options.length = 0;
          var arr=strData.split(";");
          for(var i=0;i<arr.length;i++)
          {
             var varItem = new Option(arr[i],arr[i]);
             select1.options.add(varItem);
          }
    }

    //第一個下拉框更改選擇時，ajax調用服務端方法更新第二個下拉框數據。
    function selectchanged()
    {
          var select1=document.getElementById("aa");
          var Data=_Default.GetCitys(select1.value).value;
          var strData=new String(Data);
          var select2=document.getElementById("bb");
          select2.options.length = 0;
          var arr=strData.split(";");
          for(var i=0;i<arr.length;i++)
          {
             var varItem = new Option(arr[i],arr[i]);
             select2.options.add(varItem);
          }
    }
    </script>
</head>
<body onload="initSelect1()">
    <form id="form1" runat="server">
    <div>
        <select id="aa" onchange="selectchanged()">
            <option>unbounded</option>
        </select>
        <br /><br />
        <select id="bb">
            <option>unbounded</option>
        </select>

    </div>
    </form>
</body>
</html>

使用ajax.net時應該注意的問題：

1.在pageload事件中
Ajax.Utility.RegisterTypeForAjax(typeof(_Default));
這句必須是typeof(命名空間.類名)，而不能是this.GetType()等。javascript中調用的時候直接用這裏的類名。

2.調用服務端方法後加.value
如_Default.GetCitys(select1.value).value

-----------------------------------------------------------------