使用AjaxPro开发四级无刷新联动下拉框

　2007-06-02 11:19:07　来源：WEB开发网　　　

核心提示：开发环境 VS.NET 2005 C# Oracle AjaxPRo 最近忙没时间详细解释，先把通用的源码贴出自己看，使用AjaxPro开发四级无刷新联动下拉框，出于对性能的考虑，把省市两级写成JS数组，将选择好的地区保存，方便的读/存城市信息以便做成控件等等），把县区（镇）两级写在 Oracle 里，通过 JS

开发环境 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.cncms.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> 加入