使用AjaxPro開發四級無刷新聯動下拉框

作者：Eve Cole 更新時間：2009-07-06 16:39:16

開發環境VS.NET 2005 C# Oracle AjaxPro

最近忙沒時間詳細解釋，先把通用的源碼貼出自己看。

出於對性能的考慮，把省市兩級寫成JS數組，把縣區（鎮）兩級寫在Oracle 裡。透過JS 觸發C# 去讀取資料庫，然後將資料回傳給JS ，再綁定顯示。

操作<select> 採用更通用的createElement() 而沒有使用options.add()

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Area.aspx.cs" Inherits="Area" %>

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

//透過DOM 建立下拉方塊http://www.downcodes.com/qq.asp
//obj:下拉框的options 資料集
//id:下拉框的id
function CreateDropDownList(obj,id)
....{
var sel=document.getElementById(id);
sel.options.length=1; //儲存"—請選擇—"
//對於省份、城市常用Array 存儲，對於縣、鎮則用C#從資料庫讀取
if(obj==null)return;
if(obj instanceof Array)
....{
for(var i=0;i<obj.length;i++)
....{
var op=document.createElement("option");
op.setAttribute("value",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
else
....{
for(var i=0;i<obj.Rows.length;i++) //注意這裡是length 不是Count
....{
var op=document.createElement("option");
op.setAttribute("value",obj.Rows[i].ID); //注意區分大小寫
var txt=document.createTextNode(obj.Rows[i].NAME); //根DataTable 的列名稱要一致
op.appendChild(txt);
sel.appendChild(op);
}
}
//綁定下一個下拉框
switch(id)
....{
case "SF":sel.onchange=function()......{ClearXianZhen();CreateDropDownList(GetArray(this.value),"CS");};break;
case "CS":sel.onchange=function()......{ClearZhen();CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Xian).value,"Xian");};break; / /JS 向C# 傳遞參數，並取得C# 的回傳值
case "Xian":sel.onchange=function()......{CreateDropDownList(Area.GetDataTable(this.value,AreaEnum.Zhen).value,"Zhen");};break; //傳回值. value
default:sel.onchange=function()......{alert(this.value);};break;
}
}

//執行入口
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//取得要求的陣列
//tar=所屬的省份ID
function GetArray(val)
....{
var temp=new Array();
var j=0;
for(var i=0;i<aDQ.length;i++)
....{
if(aDQ[i][2].toString()==val)
....{
temp[j]=aDQ[i];
//temp[j].push(aDQ[i]);
j++;
}
}
return temp;
}

//清空"鎮"下拉框
function ClearZhen()
....{
CreateDropDownList(null,"Zhen");
}
//清空"縣"和"鎮"下拉框
function ClearXianZhen()
....{
CreateDropDownList(null,"Xian");
CreateDropDownList(null,"Zhen");
}

</script>

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

using System;
using System.Data;
using System.Data.OracleClient;

public partial class Area : System.Web.UI.Page
...{
protected void Page_Load(object sender, EventArgs e)
...{
//將C#的類別和枚舉分別註冊到JS裡
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <summary>
/// 取得下拉框所需數據
/// </summary>
/// <param name="UpID">上一級ID</param>
/// <param name="ae">縣/鎮</param>
/// <returns>返回DataTable</returns>
[AjaxPro.AjaxMethod]
public DataTable GetDataTable(string UpID, AreaEnum ae)
...{
if (String.IsNullOrEmpty(UpID))
return null;

string link = "server=XXX;user=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//Oracle 回傳的DataTable 裡的列名全是大寫，在頁面取值時記得大寫
string sql;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "SELECT id,name FROM City WHERE THREEID=0 AND TWOID=" + UpID;
else
sql = "SELECT id,name FROM City WHERE THREEID=" + UpID;

OracleDataAdapter adapter = new OracleDataAdapter(sql, conn);
DataTable table = new DataTable();
adapter.Fill(table);
return table;
}
}

/**//// <summary>
/// 地區枚舉
/// </summary>
public enum AreaEnum
...{
/**//// <summary>
/// 縣
/// </summary>
Xian,
/**//// <summary>
/// 鎮
/// </summary>
Zhen
}

到此基本功能實現，還有些功能（透過網域名稱IP來判斷地區並直接綁定，將選擇好的地區保存，方便的讀取/儲存城市資訊以便做成控制等等）。有空再寫完。

記得在Web.config 的<system.web> 加入