Of Stack

Method of jQuery+Asp. Net to realize provincial and municipal two level linkage function

  • 2021-09-24 22:06:29
  • OfStack

In this paper, the method of jQuery+Asp. Net to realize the two-level linkage function of provinces and cities is described with examples. Share it for your reference, 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>DropDownList3 Level linkage </title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial @ Song Style ;}
</style>
<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Bind provincial data after loading is completed 
$.getJSON("Default.aspx", function(data) { //data Data format of [{"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 value of the province changes, the city drop-down box should be bound 
$("#selProvince").change(function(){
document.getElementById("selArea").options.length=1; // Clear the data of the county drop-down box first 
document.getElementById("selCity").options.length=1; // Clear the data of 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 changes 
$("#selCity").change(function(){
document.getElementById("selArea").options.length=1; // Clear the data of the county drop-down box 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>
</head>
<body>
<form id="form1" runat="server">
<div>
3 Level linkage: <select id="selProvince">
<option value=" Select provinces ">== Select provinces ==</option>
</select> <select id="selCity"><option>== Choose a city ==</option></select>& amp;nbsp; <select id="selArea"><option>== Select County ==</option></select>
</div>
</form>
</body>
</html>

asp. net section:

(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 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 it is a query city Or area Table 
      string fid = context.Request.QueryString["fid"].ToString();   // The father of a city or region ID
      string sql = "select * from " + type + " where father='" + fid + "'";
      // Construct the type of data [{"text":" Nanchang ","value":"0001"},{"text":" Shangrao ","value":"0002"}]
      //string strTemp = "{\"text\":\"{0}\",\"value\":\"{1}\"}";// There is a mistake here: If you construct it directly like this, you will go wrong, because there are format braces in the braces, and the parsing will go wrong 
      string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\""; // Construct 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 + "},"); // After formatting the curly braces on both sides, add 
      }
      reader.Close();
      string json = sb.ToString();
      context.Response.Write("[" + json.Substring(0, json.Length - 1) + "]"); //Substring The function is to remove the last 1 A ' Comma '
    }
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

For more readers interested in asp. net, please check the topics on this site: "Summary of asp. net Optimization Skills", "Summary of asp. net String Operation Skills", "Summary of asp. net Operation XML Skills", "Summary of asp. net File Operation Skills", "Summary of asp. net ajax Skills" and "Summary of asp. net Cache Operation Skills".

I hope this paper is helpful to everyone's asp. net programming.

Related articles: