AjaxPro を使用して 4 レベルの非リフレッシュ連携ドロップダウンボックスを開発する

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

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

最近忙しくて詳しく説明する時間がないので、自分の目で確認するために大まかなソースコードを載せておきます。

パフォーマンス上の理由から、州と市のレベルは JS 配列として書き込まれ、郡と地区 (町) のレベルは Oracle で書き込まれます。 C# をトリガーして JS 経由でデータベースを読み取り、データを JS に返し、表示用にバインドします。

操作 <select> は、options.add() を使用する代わりに、より一般的な createElement() を使用します。

<%@ 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 ">

<html xmlns=" http://www.w3.org/1999/xhtml " >
<head runat="サーバー">
<title>地域</title>
</head>
<本文>
<form id="form1" runat="server">
<テーブル>
<tr>
<td>
<select id="SF">
<option selected="selected">—選択してください—</option>
</選択>
</td>
<td>
<select id="CS">
<option selected="selected">—選択してください—</option>
</選択>
</td>
<td>
<select id="西安">
<option selected="selected">—選択してください—</option>
</選択>
</td>
<td>
<select id="鎮">
<option selected="selected">—選択してください—</option>
</選択>
</td>
</tr>
</table>

//DOM を通じてドロップダウンボックスを作成しますhttp://www.downcodes.com/qq.asp
//obj: ドロップダウンボックスのオプションデータセット
//id: ドロップダウンボックスの ID
関数 CreateDropDownList(obj,id)
...{
var sel=document.getElementById(id);
sel.options.length=1; //保存 "—選択してください—"
//配列ストレージは州や市によく使用され、郡や町のデータベースからの読み取りには C# が使用されます。
if(obj==null)return;
if(配列のオブジェクトインスタンス)
...{
for(var i=0;i<obj.length;i++)
...{
var op=document.createElement("オプション");
op.setAttribute("値",obj[i][0]);
var txt=document.createTextNode(obj[i][1]);
op.appendChild(txt);
sel.appendChild(op);
}
}
それ以外
...{
for(var i=0;i<obj.Rows.length;i++) //これは数ではなく長さであることに注意してください
...{
var op=document.createElement("オプション");
op.setAttribute("value",obj.Rows[i].ID); //大文字と小文字が区別されることに注意してください。
var txt=document.createTextNode(obj.Rows[i].NAME); //ルート DataTable の列名は一貫している必要があります。
op.appendChild(txt);
sel.appendChild(op);
}
}
//次のドロップダウンボックスをバインドします
スイッチ(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; //値を返します。
デフォルト:sel.onchange=function()....{alert(this.value);};break;
}
}

//実行エントリ
var arr=GetArray("0");
CreateDropDownList(arr,"SF");

//必要な配列を取得します。
//tar=所属する県ID
関数 GetArray(val)
...{
var temp=新しい配列();
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++;
}
}
戻り温度;
}

//「町」ドロップダウンボックスをクリアします
関数 ClearZhen()
...{
CreateDropDownList(null,"Zhen");
}
//「郡」と「町」のドロップダウンボックスをクリアします
関数 ClearXianZhen()
...{
CreateDropDownList(null,"西安");
CreateDropDownList(null,"Zhen");
</script>

</form>

</body>
</html>

システムを使用する;
System.Data を使用します。
System.Data.OracleClient を使用する

パブリック部分クラス領域: System.Web.UI.Page
...{
protected void Page_Load(オブジェクト送信者, EventArgs e)
...{
//C#のクラスと列挙型をそれぞれJSに登録
AjaxPro.Utility.RegisterTypeForAjax(typeof(Area));
AjaxPro.Utility.RegisterEnumForAjax(typeof(AreaEnum));
}

/**//// <概要>
/// ドロップダウンボックスに必要なデータを取得します
/// </概要>
/// <param name="UpID">上位レベル ID</param>
/// <param name="ae">郡/町</param>
/// <Returns> return datatable </returns>
[AjaxPro.AjaxMethod]
public DataTable GetDataTable(string UpID, AreaEnum ae)
...{
if (String.IsNullOrEmpty(UpID))
null を返す;

文字列リンク = "サーバー=XXX;ユーザー=XXX;pwd=XXX;";
OracleConnection conn = new OracleConnection(link);

//Oracle によって返される DataTable の列名はすべて大文字です。ページ上の値をフェッチするときは、必ず大文字を使用してください。
文字列SQL;
if (Enum.Equals(ae, AreaEnum.Xian))
sql = "都市 WHERE THREEID=0 AND TWOID=" + UpID から ID、名前を選択します。
それ以外
sql = "SELECT id,name FROM City WHERE THREEID=" +

OracleDataAdapter アダプタ = new OracleDataAdapter(sql, conn);
DataTable テーブル = 新しい DataTable();
アダプタ.Fill(テーブル);
テーブルを返します。
}
}

/**//// <概要>
///リージョンの列挙
/// </概要>
パブリックエインムエリアネム
...{
/**//// <概要>
///郡
/// </概要>
西安
/**//// <概要>
/// 町
/// </概要>
ジェン
この

時点では、基本的な機能が実装されており、いくつかの機能もあります (ドメイン名IP を通じて地域を決定し、直接バインドする、選択した地域を保存する、コントロールを作成するために便利な都市情報を読み取り/保存するなど)。時間ができたら終わらせます。

Web.config の <system.web> に

を忘れずに追加してください。

<addverb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpハンドラー>

AjaxPro を使用して 4 レベルの非リフレッシュ連携ドロップダウン ボックスを開発する

AjaxPro を使用して 4 レベルの非リフレッシュ連携ドロップダウンボックスを開発する