Method of realizing provincial and municipal two-level linkage function with jQuery + ASP. Net

Time:2021-9-11

This paper describes the method of realizing provincial and municipal two-level linkage function with jQuery + ASP. Net. Share with you 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 > dropdownlist three-level linkage < / Title >
<style type="text/css">
*{margin:0; padding:0;}
Body {font size: 12px; font family: Arial @ Arial;}
</style>
<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Bind data after loading
$. Getjson ("default. ASPX", function (data) {// 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 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 in the county drop-down box first
document.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 changes
$("#selCity").change(function(){
document.getElementById("selArea").options.length=1; // Clear the data in 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 runat="server">
<div>
Three level linkage: < Select >
< option value = "select province" > = = select province = = < / option >
< / Select > < Select > < option > = = select city = = < / option > < / Select > & amp; nbsp; < Select > < option > = = select County = = < / option > < / Select >
</div>
</form>
</body>
</html>

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 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();   // Parent ID of city or region
      string sql = "select * from " + type + " where father='" + fid + "'";
      //Type of construction data [{"text": "Nanchang", "value": "0001"}, {"text": "Shangrao", "value": "0002"}]
      //string strTemp = "{\"text\":\"{0}\",\"value\":\"{1}\"}";// A mistake has been made here: the direct construction will make mistakes, because there are format braces in braces, and the parsing will make mistakes
      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 + "},"); // The curly braces on both sides are formatted and added
      }
      reader.Close();
      string json = sb.ToString();
      context.Response.Write("[" + json.Substring(0, json.Length - 1) + "]"); // Substring is used to remove the last 'comma'
    }
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

For more information about asp.net, readers who are interested can see the special topics on this site:《Summary of asp.net optimization skills》、《Summary of asp.net string operation skills》、《Summary of asp.net operating XML skills》、《Summary of asp.net file operation skills》、《Asp.net Ajax skills summary topic》And《Summary of asp.net cache operation skills》。

I hope this article will help you in ASP. Net programming.

Recommended Today

Beautify your code VB (VBS) code formatting implementation code

However, vb.net does have many new functions that VB6 does not have. The automatic typesetting of code is one, which is the function we want to realize today – VB code formatting.Let’s look at the effect: Before formatting: Copy codeThe code is as follows: For i = 0 To WebBrowser1.Document.All.length – 1 If WebBrowser1.Document.All(i).tagName = […]