This article describes the use of jquery Ajax features and ASP.net to achieve the three-level linkage effect of the provincial urban area, the other two, three or multi-level linkage can also be completed in accordance with this method.
The data table involved in the article is city, for the convenience of management.
Design This table as follows
ID: Self-growing field
City_name: City Name
City_code: City Code
We query the province, city and district according to the city code. The city code structure is roughly as follows:
Inner Mongolia: 150000, Hohhot: 150100, the urban district: 150101.
Other region code like this, provincial-level number +0000, municipal level for the provincial number + city-level number +00, the region for the provincial number + city-level number + area number.
city.aspx Code is：
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery + ASP. NET realizes three level linkage </title>
<script src= "/scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
#dpCity {display:none; position:relative;}
#dpArea {display:none;position:relative;}
</style>
<body>
<div>
Province: <asp:dropdownlist id= "dpprovince" runat= "Server" ></asp:DropDownList>
City: <asp:dropdownlist id= "dpcity" runat= "Server" ></asp:DropDownList>
Zone: <asp:dropdownlist id= "Dparea" runat= "Server" ></asp:DropDownList>
</div>
</body>
JS Code：
Copy Code code as follows:
JQuery (document). Ready (function () {
var dp1 = jQuery ("#dpProvince");
var DP2 = jQuery ("#dpCity");
var dp3 = jQuery ("#dpArea");
Fill in the province's data
Loadareas ("", "dpprovince");
Bind events to a province, and then populate the city with data after triggering events
JQuery (DP1). bind ("Change KeyUp", function () {
var Provinceid = dp1.attr ("value");
Loadareas (Provinceid, "dpcity");
Dp2.fadein ("slow");
});
Bind the event to the city, triggering the event to populate the data in the area
JQuery (DP2). bind ("Change KeyUp", function () {
var Cityid = dp2.attr ("value");
Loadareas (Cityid, "Dparea");
Dp3.fadein ("slow");
});
});
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 ("<option value= ' selected= ' selected ' > Please choose </option>");
for (i = 0; i < json.length; i++) {
jquery ("#" + Item). Append (jquery ("<option></option>"). Val (json[i].c_code). HTML (json[i].c_name));
};
}
});
}
Background Code：
Copy Code code as follows:
Instance class
public class Citymodel
{
int _id;
String _cityname;
String _citycode;
public int ID
{
set {_id = value;}
get {return _id;}
}
public string CityName
{
set {_cityname = value;}
get {return _cityname;}
}
public string Citycode
{
set {_citycode = value;}
get {return _citycode;}
}
}
Dal layer, return DataTable, using Universal 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) <> ' and left (citycode,4) =left (@pcode, 4) ";
}
Else
{
sql = SQL + "and Right" (citycode,2) = ' All ' and left (right (citycode,4), 2) <> ' and left (citycode,2) =left (@pcode, 2) ";
}
}
Else
{
sql = SQL + "and Left (citycode,2) <> '" and Right (citycode,4) = ' 0000 ';
}
sql = SQL + "ORDER by sorts 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 layer, returning the generic list of city
Public list<citymodel> CityList (string code)
{
list<citymodel> list = new list<citymodel> ();
DAL. Citydal cd = new DAL. Citydal ();
DataTable dt = CD. CityList (code);
if (dt. Rows.Count > 0)
{
for (int i = 0; i < dt. Rows.Count; 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);
}
}
return list;
}
Cityloader.asmx:
Copy Code code as follows:
<summary>
Summary description of Cityloader
</summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
[System.ComponentModel.ToolboxItem (False)]
To allow the use of ASP.net AJAX to invoke this Web service from a script, uncomment the downlink.
[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 ();
list<citymodel> cm = cb. CityList (code);
Sb. Append ("[");
if (cm. Count > 0)
{
for (int i = 0; i < cm.) Count; i++)
{
Citymodel model = Cm[i];
Sb. Append ("{");
Sb. AppendFormat (@ "" "C_name" ":" "{0}" ",", model. CityName);
Sb. AppendFormat (@ "" "C_code" ":" "{0}" ", model. Citycode);
Sb. Append ("}");
if (I < cm. COUNT-1)
{
Sb. Append (",");
}
}
}
Sb. Append ("]");
System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding ("Utf-8");
System.Web.HttpContext.Current.Response.Write (sb.) ToString ());
}
}
