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

开发环境 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" "">

//通过 DOM 创建下拉框
//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> 加入

标签: