JQuery + Asp. Net method for implementing the provincial/municipal level 2 linkage function, jqueryasp.net
This article describes how jQuery + Asp. Net achieves the provincial/municipal level-2 linkage function. We will share this with you for your reference. The details are as follows:
Page html:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "ddlAjax. aspx. cs" Inherits = "ThreeAjaxDrop_ddlAjax" %> <! 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 =" server "> <title> DropDownList three-level linkage </title> <style type =" text/css "> * {margin: 0; padding: 0 ;}body {font-size: 12px; font-family: Arial @; ;}</style> <script type = "text/javascript" src = ".. /js/jquery-1.4.min.js "> </script> <script type =" text/javascript "> $ (document ). ready (function () {// bind the province data after loading $. getJSON ("Default. aspx ", function (data) {// data format [{" text ":" Beijing "," value ":" 0001 "},{" text ": "Jiangxi", "value": "0031"}] // alert (data [0]. text + "|" + data [0]. value); $. each (data, function (index, value) {// alert (value. text + "|" + value. value); $ ("# selProvince "). append ("<option value = '" + value. value + "'>" + value. text + "</option>") ;}) ;}; // if the province value is changed, bind the city drop-down box $ ("# selProvince "). change (function () {document. getElementById ("selArea "). options. length = 1; // clear the data document in the county drop-down box first. getElementById ("selCity "). options. length = 1; // clear the data in the city drop-down box first $. getJSON ("HandlerDropDownAjax. ashx ", {" type ":" city "," fid ": $ (this ). val ()}, function (data) {$. each (data, function (index, value) {$ ("# selCity "). append ("<option value = '" + value. value + "'>" + value. text + "</option>") ;}) ;};}); // The value of the city drop-down box is changed $ ("# selCity "). change (function () {document. getElementById ("selArea "). options. length = 1; // clear the county drop-down box data first $. getJSON ("HandlerDropDownAjax. ashx ", {" type ":" area "," fid ": $ (this ). val ()}, function (data) {$. each (data, function (index, value) {$ ("# selArea "). append ("<option value = '" + value. value + "'>" + value. text + "</option> ");});});});}); </script>
Asp.net:
(1) Default. aspx. cs
Public partial class ThreeAjaxDrop_Default: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {string SQL = "select * from province"; string strTemp = "\" text \": \ "{0 }\", \ "value \": \ "{1} \" "; // construct the format string {" text ":" Beijing ", "value": "00001"} StringBuilder sb = new StringBuilder (); OleDbDataReader reader = OleDBHelper. executeReader (SQL); while (reader. read () {string str1 = string. format (strTemp, reader ["province"]. toString (), reader ["provinceID"]. toString (); sb. append ("{" + str1 + "},");} reader. close (); string json = sb. toString (); Response. write ("[" + json. substring (0, json. length-1) + "]") ;}}
(2) HandlerDropDownAjax. ashx
Public class HandlerDropDownAjax: IHttpHandler {public void ProcessRequest (HttpContext context) {if (context. Request. QueryString ["type"]! = Null & context. Request. QueryString ["fid"]! = Null) {string type = context. request. queryString ["type"]. toString (); // It is mainly used to identify whether to query the city or area table string fid = context. request. queryString ["fid"]. toString (); // The parent ID of the city or region string SQL = "select * from" + type + "where father = '" + fid + "'"; // construct the Data Type [{"text": "Nanchang", "value": "0001" },{ "text": "Shangrao", "value ": "0002"}] // string strTemp = "{\" text \ ": \" {0} \ ", \" value \": \ "{1} \"} "; // an error is reported here: an error occurs when the structure is like this, because the braces are in the format of braces, an error occurred while parsing string strTemp = "\" text \ ": \" {0} \ ", \" value \ ": \" {1 }\""; // construct the format string {"text": "Beijing", "value": "00001"} StringBuilder sb = new StringBuilder (); OleDbDataReader reader = OleDBHelper. executeReader (SQL); while (reader. read () {string str1 = string. format (strTemp, reader [2]. toString (), reader [1]. toString (); sb. append ("{" + str1 + "},"); // format the braces on both sides and add} reader. close (); string json = sb. toString (); context. response. write ("[" + json. substring (0, json. length-1) + "]"); // the function of Substring is to remove the last 'comma '} public bool IsReusable {get {return false ;}}}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
