2次/3次/多層連携を実装するためのjqueryのアイデアとコード menu_jquery

この記事では、jQuery の AJAX 機能と asp.net を使用して、地方自治体の 3 レベルの連携効果を実現する方法を紹介します。他の 2 レベル、3 レベル、または複数レベルの連携も、この方法に従って完了できます。

記事に含まれるデータテーブルは管理の都合上、Cityのものです。

このテーブルを次のように設計します
ID: 自己増加フィールド
City_Name: 都市名
City_Code: 都市コード
州と都市に基づいてクエリを実行します市外局番、地区について。都市コードの構造はおおよそ次のとおりです:
内モンゴル自治区: 150000、フフホト市: 150100、新城区: 150101。
他の市外局番は同じで、州レベルは州コード 0000、市レベルは州コード市外局番 00、地域は州コード市外局番です。

City.ASPX コードは :

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

コードをコピーします

コードは次のとおりです: jQuery(document).ready (function () { var dp1 = jQuery("#dpProvince"); var dp2 = jQuery("#dpCity");

var dp3 = jQuery("#dpArea");

//州のデータを入力します
loadAreas("", "dpProvince");
//イベントを州にバインドし、イベントがトリガーされた後に都市のデータを入力します
jQuery(dp1).bind ("キーアップを変更", function () {
var 州ID = dp1.attr("値");
loadAreas(州ID, "dpCity");
dp2.fadeIn("slow");
});
// イベントを都市にバインドし、イベントをトリガーした後にエリアにデータを入力します
jQuery(dp2).bind("change keyup", function () {
var cityID = dp2.attr("value");
loadAreas("dpArea");
}); >function loadAreas(val, item) {
jQuery.ajax ({
type: "post",
url: "CityLoader.asmx/GetCityList",
data: {
code: val,
a: Math.random()
},
error: function () {
return false;
},
success: function (data) {
var i;
var json = eval(data);
jQuery("#" item).append("選択してください") ;
for (i = 0; i jQuery("#" item).append(jQuery("").val( json[i].c_code).html(json[i] .c_name));
}
}
});バックエンド コード
:




コードをコピー


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

//实例类
public class CityModel
{
int _id;
文字列_都市名;
文字列 _citycode;
パブリック int ID
{
set { _id = 値; }
get { return _id; }
}
パブリック文字列 CityName
{
set { _cityname = 値; }
get { return _cityname; }
}
パブリック文字列 CityCode
{
set { _citycode = 値; }
get { return _citycode; }
}
}
//DAL层、返しDataTable、汎用SqlHelperを使用
public DataTable CityList(string pcode)
{
string SQL = "SELECT * FROM city WHERE 1 =1";
if (!string.IsNullOrEmpty(pcode))
{
if (pcode.Substring(2, 2) != "00")
{
SQL = SQL " AND RIGHT( citycode,2)'00' AND LEFT(citycode,4)=LEFT(@pcode,4)";
}
else
{
SQL = SQL " AND RIGHT(citycode,2)='00' AND LEFT(RIGHT(citycode,4),2)'00' AND LEFT(都市コード,2)=LEFT(@pcode,2)";
}
}
else
{
SQL = SQL " AND LEFT(citycode,2)'00' AND RIGHT(citycode,4)='0000'";
}
SQL = SQL " ORDER BY ソート ASC";
SqlParameter[] Param ={
new SqlParameter("@pcode",pcode)
};
using (SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction))
{
DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
return ds.Tables[0];
}
}
//BLL 層、City の泛型列表を返す
public List CityList(文字列コード)
{
List list = 新しい List();
ダル。 CityDAL cd = new DAL.CityDAL();
DataTable dt = cd.CityList(code);
if (dt.Rows.Count > 0)
{
for (int i = 0; i {
CityModel cm = new CityModel();
cm.ID = int.Parse(dt.Rows[i]["id"].ToString());
cm.CityName = dt.Rows[i]["cityname"].ToString();
cm.CityCode = dt.Rows[i]["citycode"].ToString();
list.Add(cm);
}
}
リストを返します。
}

CityLoader.asmx：

复制代码代码如下:

///
/// CityLoader の要約要旨
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
/ / この Web サービスを使用するために ASP.NET AJAX を使用することを許可する必要があります。
// [System.Web.Script.Services.ScriptService]
public class CityLoader : System.Web .Services.WebService
{
[WebMethod]
public void GetCityList(string code)
{
CityBLL cb = new CityBLL();
StringBuilder sb = new StringBuilder();
リスト cm = cb.CityList(コード);
sb.Append("[");
if (cm.Count > 0)
{
for (int i = 0; i {
CityModel モデル = cm[i];
sb.Append("{");
sb.AppendFormat(@"""c_name"":""{0}"",", model.CityName);
sb.AppendFormat(@"""c_code"":""{0}""", model.CityCode);
sb.Append("}");
if (i {
sb.Append(",");
}
}
}
sb.Append("]");
System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8");
System.Web.HttpContext.Current.Response.Write(sb.ToString());
}
}