您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 一個(gè)ajax.Net庫(kù)的使用例子－－下拉框聯(lián)動(dòng)

一個(gè)ajax.Net庫(kù)的使用例子－－下拉框聯(lián)動(dòng)

文章來源：365jz.com 點(diǎn)擊數(shù)：748 更新時(shí)間：2009-09-20 09:02 參與評(píng)論

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>
        /// 初始化數(shù)據(jù)源
        /// </summary>
        public void initDataSource()
        {
            DataSource.Add(new address("湖南", "長(zhǎng)沙"));
            DataSource.Add(new address("湖南", "衡陽"));
            DataSource.Add(new address("湖南", "郴州"));
            DataSource.Add(new address("湖南", "岳陽"));
            DataSource.Add(new address("廣東", "廣州"));
            DataSource.Add(new address("廣東", "清遠(yuǎn)"));
            DataSource.Add(new address("廣東", "汕頭"));
            DataSource.Add(new address("湖北", "武漢"));
            DataSource.Add(new address("湖北", "十堰"));
            DataSource.Add(new address("湖北", "仙桃"));
            DataSource.Add(new address("湖北", "天門"));
        }

        /// <summary>
        /// 獲取第一個(gè)下拉框的數(shù)據(jù)。
        /// </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>
        /// 根據(jù)省份獲取城市。
        /// </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;
        }

        //地址對(duì)象實(shí)體類
        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>無標(biāo)題頁</title>
    <script language="javascript" type="text/javascript">
    //初始化第一個(gè)下拉框，從服務(wù)端讀取數(shù)據(jù)。
    //其實(shí)這里應(yīng)該直接在服務(wù)端綁定數(shù)據(jù)，此處為了演示ajax特地也使用ajax技術(shù)綁定數(shù)據(jù)。
    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);
          }
    }

    //第一個(gè)下拉框更改選擇時(shí)，ajax調(diào)用服務(wù)端方法更新第二個(gè)下拉框數(shù)據(jù)。
    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時(shí)應(yīng)該注意的問題：

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

2.調(diào)用服務(wù)端方法后加.value
如_Default.GetCitys(select1.value).value

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