一个ajax.Net库的使用例子－－下拉框联动

Mike Lee 2010-09-14

展开全文

一个ajax.Net库的使用例子－－下拉框联动

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./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./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

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