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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 使用AjaxPro開發四級無刷新聯動下拉框

編輯：AJAX詳解

開發環境 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.knowsky.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> 加入

上一頁:ajax的server部分(php版)
下一頁:微軟Asp.net Ajax 1.0的AutoComplete控件的幾處修正和增強

AJAX詳解

解析Ajax如何處理響應信息: 戶的交互操作(interaction)驅動著Web站點。理解如何處理響應信息，特別是在
msSQL注入通殺，只要有注入點就有系統權限: 不知道大家看過這篇文章沒有，可以在db_owner角色下添加SYSADMIN帳號，這招真狠啊，存在
AjaxPro.dll基礎教程: AJax技術的風起雲湧，也使得B/S應用的表現力日益增強，大有逐步吞食C/S領地之勢。利用AJax

AJAX基礎知識 AJAX詳解

DIV CSS 佈局教程網

相關文章