中国省份城市级联选择--asp.net +jquery +json +xml

来源：互联网发布：高分遥感数据特点编辑：程序博客网时间：2024/04/30 17:01

以前用.net实现中国省份城市的级联选择，但是ajax是用.net的scripManager和updatePanel来实现的，总感觉有点类似于作弊器的感觉，而且有些朋友似乎对这个。net服务端控件很是反感，所以今天抽个空写了些使用JavaScript类库jquery来请求ajax的城市，实现的效果基本上相同，不想用的话就当是学习喽

首先新建一个页面Index.aspx,代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Province_Index" %><!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></title>  <mce:script language="javascript" type="text/javascript" src="../Script/jquery-1.4.1-vsdoc.js" mce_src="Script/jquery-1.4.1-vsdoc.js" ></mce:script>  <mce:script language="javascript" type="text/javascript" src="ajaxCity.js" mce_src="ajaxCity.js" ></mce:script> <mce:script language="javascript" type="text/javascript"></mce:script></head><body> <form id="form1" runat="server"> <div> 请选择 <select id="ddlProvince" name="ddlProvince" onchange="BindCity()" runat="server" style="width:110px;"> <option value="省份">省份</option> </select> <select id="ddlCity" name="ddlCity" style="width:110px;"> <option value="城市">城市</option> </select> </div> </form></body></html>

然后呢，还有引用的ajaxCity.js文件，代码如下

var provinces;var citys;function BindProvince() { $.getJSON("CityBind.aspx", { "op": "province" }, ProvincePro);} function ProvincePro(responseData) { provinces = responseData; var proCount = provinces.length; var str = ""; for (var i = 0; i < proCount; i++) { if (provinces[i] == selectProvince) { str += "<option selected value=/"" + provinces[i] + "/">" + provinces[i] + "</option>"; } else { str += "<option value=/"" + provinces[i] + "/">" + provinces[i] + "</option>"; } } $("#ddlProvince").html(str); if (selectProvince != "省份") { BindCity(); }}function BindCity() { $.getJSON("CityBind.aspx", { "op": "city", "provinceName": $("#ddlProvince").val() }, CityPro);}function CityPro(responseData) { citys = responseData; var cityCount = citys.length; var str = ""; for (var i = 0; i < cityCount; i++) { if (citys[i] == selectCity) { str += "<option selected value=/"" + citys[i] + "/">" + citys[i] + "</option>"; } else { str += "<option value=/"" + citys[i] + "/">" + citys[i] + "</option>"; } } $("#ddlCity").html(str);}

最后就是后台的c#页面了，我又新建了一个，当然可以使用Index.aspx ,新建一个CityBind.aspx，在后置代码页中代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Xml;public partial class Province_CityBind : System.Web.UI.Page{ private string Province="省份"; protected void Page_Load(object sender, EventArgs e) { if (Request["op"] == "province") { GetProvinces(); } else if (Request["op"] == "city") { this.Province = Request["provinceName"]; GetCitys(); } } void GetProvinces() { string CurrentPath = this.Server.MapPath("."); if (System.IO.File.Exists(CurrentPath + "//Province.xml")) { System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.Load(CurrentPath + "//Province.xml"); XmlNodeList nodes = doc.DocumentElement.ChildNodes; List<String> provinces = new List<String>(); foreach (XmlNode node in nodes) { provinces.Add(node.Attributes["Name"].Value); } string jsonString = JsonHelper.JsonSerializer<List<String>>(provinces); Response.Write(jsonString); Response.End(); } } void GetCitys() { string CurrentPath = this.Server.MapPath("."); if (System.IO.File.Exists(CurrentPath + "//Province.xml")) { System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.Load(CurrentPath + "//Province.xml"); XmlNode nodeProvince= doc.DocumentElement.SelectSingleNode(@"Province[@Name='" + this.Province + "']"); XmlNodeList nodes = nodeProvince.ChildNodes; List<String> citys = new List<string>(); foreach (XmlNode node in nodes) { citys.Add(node.Attributes["Name"].Value); } string jsonString = JsonHelper.JsonSerializer<List<String>>(citys); Response.Write(jsonString); Response.End(); } } }

最后，细心的呢一定会发现有一个类不能用，JsonHelper类，不用怕，当然会把它也贴出来的，不过这可不是我自己写的，也是学习别人的

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Runtime.Serialization.Json;using System.IO;using System.Text;using System.Text.RegularExpressions;/// <summary>///JsonHelper 的摘要说明/// </summary>public class JsonHelper{public JsonHelper(){} public static string JsonSerializer<T>(T t) { DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T)); MemoryStream ms = new MemoryStream(); ser.WriteObject(ms, t); string jsonString = Encoding.UTF8.GetString(ms.ToArray()); ms.Close(); string p = @"///Date/((/d+)/+/d+/)///"; MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString); Regex reg = new Regex(p); jsonString = reg.Replace(jsonString, matchEvaluator); return jsonString; } public static T JsonDeserializer<T>(string jsonString) { string p = @"/d{4}-/d{2}-/d{2}/s/d{2}:/d{2}:/d{2}"; MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertDateStringToJsonDate); Regex reg = new Regex(p); jsonString = reg.Replace(jsonString, matchEvaluator); DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T)); MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes (jsonString)); T obj = (T)ser.ReadObject(ms); return obj; } public static string ConvertJsonDateToDateString(Match match) { string result = string.Empty; DateTime dt = new DateTime(1970, 1, 1); dt = dt.AddMilliseconds(long.Parse(match.Groups[1].Value)); dt = dt.ToLocalTime(); result = dt.ToString("yyyy-MM-dd HH:mm:ss"); return result; } public static string ConvertDateStringToJsonDate(Match match) { string result = string.Empty; DateTime dt = DateTime.Parse(match.Groups[0].Value); dt = dt.ToUniversalTime(); TimeSpan ts = dt - DateTime.Parse("1970-1-1"); result = string.Format("///Date({0}+0800)///",ts.TotalMilliseconds); return result; }}

当然，你也可以不使用这个jsonHelper类，而使用JavaScriptSerializer类也可以更简单的实现json，自己选择吧

关于Province.xml文件中的城市数据我就不贴出来了，你完全可以在前面的日志中找到