jQuery HttpHandler XML を使用して 3 レベルの linkage_jquery をシミュレートする例

実装プロセスは次のとおりです。
ステップ 1: xml ファイルを準備し、Area.xml という名前で Web サイトのルート ディレクトリに配置します

コードをコピー コードは次のとおりです。

🎜>











省>










" name="龍華区" />

ステップ 2 : XML ファイルで定義された要素に対応するエンティティ クラスを作成します。
は州クラスに対応します

コードをコピー

コードは次のとおりです:

public class 州
{
private string id
///
/// Number
///
public;文字列 ID
{
get { return id; }
set { id = value; }
プライベート文字列名;
///
/ // name
///
パブリック文字列 Name
{
get { return name; }
set { name = value; }


City クラスに対応します:

コードをコピー コードは次のとおりです。次のように:

public class City

{
private string id;
///

///number
///
パブリック文字列 ID
{
get { return id; }
}
プライベート文字列名;

/ // Name
///

public string Name
{
get { return name; }
set { name = value; }
}
}


対応する郡クラス:

コードをコピー

コードは次のとおりです。 public class County {

private string id

///

///

パブリック文字列 ID
{
get { return id; }
set { id = value;
}
プライベート文字列名;
///

/// Name
///

public string Name
{
get { return name; >set { name = value; }
}
}


ステップ 3: サーバー側ハンドラー クラスを作成します: Handler.cs

コードをコピーします

コードは次のとおりです:

///

2 /// ハンドラー
3 ///

4 public class Handler : IHttpHandler
5 {
6
7 private static static JavaScriptSerializer jss = new JavaScriptSerializer();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; = "failure";// デフォルトの戻り結果は失敗です
HttpRequest req = context.Request;
string田舎 = req["province"];//ユーザーが選択した州の番号を取得します
string city = req["city"]; //ユーザーが選択した都市の番号を取得します
string county = req["county"];//ユーザーが選択した郡の番号を取得します
string type = req["type"];//ユーザーが取得する必要があるものを取得します 州、市、郡のリストのタイプ
InitDoc()
if (type.HasValue())
{
switch (type.ToLower())
{
case "province "://ユーザーが州リストを取得する必要がある場合
result = jss.Serialize(GetProvinceList());
break;
case "city"://ユーザーが市区町村リストを取得する必要がある場合
result = jss.Serialize(GetCityListByProvince(province));
case "county; "://ユーザーが郡レベルのリストを取得する必要がある場合
result = jss.Serialize(GetCountyListByCity(province , city));
break;
デフォルト:
break;
}
}
// 結果をテキスト形式でクライアントに返します。
}
///
// / ドキュメント オブジェクトを初期化します
///
private void InitDoc()
{
if (doc == null)
{
doc = XDocument.Load (filePath);
}
}
///

// / 地方リストを初期化します
///
private List GetProvinceList()
{
List = new List();
if (doc != null)
{
XElement root = doc.Root; >foreach (var prov in root.XPathSelectElements("province"))
{
list.Add( new states()
{
Id = prov.Attribute("id").Value,
Name = prov.Attribute("name").Value
});
}
}
戻りリスト;
}
///
/// 州番号に基づいて市区町村番号を取得します
///

>
/// 州番号 private ListGetCityListByProvince(string provId)
{
List list = new List();
if (doc != null) = doc.Root;
//xpath 式: /area/province[@id='1' ]/city
string queryPath = "/area/province[@id='" provId "']/city ";
foreach (var city in root.XPathSelectElements(queryPath))
{
list.Add(new City()
{
Id = city.Attribute("id").値、
Name = city.Attribute("name").Value
});
}
}
戻りリスト
}
///

/// 州番号と市番号に基づいて郡番号を取得します
// /

/// 州番号 param>
/// 市番号
private List GetCountyListByCity(string provId, string cityId)
{
List ; list = new List();
if (doc != null )
XElement root = doc.Root
string queryPath = "/area/province= '" provId "']/city[@id='" cityId "']/county ";
foreach (var county in root.Value,
Name = county.Attribute("name").Value
});
}
}
return list;
}
public bool IsReusable
{
get
{
return
}
}
}


ここでは、System.Xml.XPath 名前空間で XPathSelectElements(string xpath) メソッドと XPathSelectElement(string xpath) メソッドを使用して、xml をクエリします。この方法では、地方番号に基づいて市区町村番号を取得します。 xpath 式を使用します (渡された州番号が 1 であると仮定します):/area/province[@id='1']/city、この式は「/」で始まり、絶対パスの使用を示します。これは、エリアがルート ノードであるためです。つまり、エリアから始まり、その下に州要素があります。そのエリアの下にあるすべての州要素のうち、id 属性値が 1 の州要素を取得したい場合は、/area/province[@id=] を使用できます。 '1']、つまり、州の後に条件 [@id='1'] を追加すると、エリアの下に id 属性が 1 の州要素を取得します。次に、province 要素の下にあるすべての都市を取得したいので、その後ろに /city を追加するだけで済み、最終的な xpath 式は /area/province[@id='1']/city になります。
また、このクエリの XML は現在の Web サイトのルート ディレクトリにあるため、他の場所にある場合は、クエリを実行するときに名前空間を追加する必要があります。
XML ファイルから読み取られた値は、対応するディレクトリにアセンブルされます。エンティティ オブジェクトを取得した後、System.Web.Script.Serialization 名前空間の JavaScriptSerializer クラスの Serialize メソッドを使用して、取得したエンティティ オブジェクトを json データにシリアル化し、クライアントに返します。
ステップ 4: html と js を記述します。

コードをコピー コードは次のとおりです:

script type="text /javascript">
$(function () {
$.post("/Handler.ashx", { "type": "province" }, function (data, status) {
if ( status == "success") {
if (data != "failure") {
data = $.parseJSON(data); //サーバーから返された json データを解析します
for (var i = 0 ; i var value = data[i].Id ":" data[i].Name; // オプションの値を設定します形式: "number:name"
$("#province").append("" data[i].Name "");
}
}
}
}, "text");
$("#province").change(function () {
var selectValue = $(this). val(); //州オプションの選択された値を取得します
var provId = selectValue.split(':')[0] //数値を取得します
var provTxt = selectValue.split(':') [1]; //名前を取得します
$("#txtProvince").html(provTxt); //選択した州の名前を表示します
$("#city").html("==都市を選択してください=="); //州レベルが変更されると都市レベルをクリアします
$("#county").html("==お願いしますselect a county=="); //州レベルが変更されたときに郡レベルをクリア
$.post("/Handler.ashx", { "province": provId, "type": " city" }, function (データ, ステータス) {
if (ステータス == "成功") {
if (データ != "失敗") {
データ = $.parseJSON(データ);
for (var i = 0; i var value = data[i].Id ":" data[i].Name; ).append("" data[i].Name ""); "テキスト");
});
$("#city").change(function () {
var provId = $("#province").val().split(': ')[0];
var selectValue = $(this).val(); //上と同じ
var cityId = selectValue.split(':')[0]; //上と同じ🎜>var cityTxt = selectValue.split(':')[1]; //上と同じ
$("#txtCity").html(cityTxt); //選択した都市の名前を表示します
$("#county").html("==郡を選択してください =="); //上記と同じ
$.post("/Handler.ashx", { "province": provId, "city": cityId, "type": "county" }, function (data, status) {
if (status == "success") {
if (data != "失敗") {
data = $.parseJSON(data);
for (var i = 0; i var value = data[i].Id " :" data[i].Name;
$("#county").append(" " data[i].Name "") ;
}
}
}
}, "テキスト")
});
$("#county").change(function () {
$ ("#txtCounty").html($(this).val().split(':' )[1]) //選択した郡の名前を表示します
});








🎜>- > ;-
> jQueryを使ったサーバーとの通信については、$.postメソッドを使用しています。このメソッドの具体的な使い方については、jQueryの公式ドキュメントを参照してください。ここで言いたいのは、トラバーサル後にobject.property経由でアクセスする場合です。サーバーはエンティティ オブジェクトをサーバー側でシリアル化するため、このプロパティの名前はサーバー側で定義された名前です。
この例で重要なのは、XPath 式の使用方法と、System.Xml.XPath 名前空間で XPathSelectElements(string xpath) メソッドを呼び出す方法です。
最終結果は以下のようになります。


コードの 13、31、50 行目は最適化できます。
DOM 構造を複数回変更することはお勧めできません。文字列を結合して 1 回追加することはできます。
データ ソースは xml を使用して、xml を解析し、 を直接出力します。フロントエンドで文字列を接続する必要はありません。すべてのノード ID を同じにすることはできません。




コードをコピー

コードは次のとおりです:

==请选择市==



==请选择县==