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

最新推荐文章于 2022-06-21 17:56:03 发布

lori

最新推荐文章于 2022-06-21 17:56:03 发布

阅读量2.9k

点赞数

分类专栏： .net 文章标签： jquery json string javascript regex function

本文链接：https://blog.csdn.net/hou_yongkui/article/details/6155301

版权

.net 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以前用.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" οnchange="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文件中的城市数据我就不贴出来了，你完全可以在前面的日志中找到