省市区无刷新联动

前端之家收集整理的这篇文章主要介绍了省市区无刷新联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

蓝驿轨迹-ajax+xml实现省市区无刷新联动源码

帮助:

1.前台添加html控件
<script language="javascript" src="js/PCA.js"></script>

<!--省市区-->
<INPUT id="lbl_provice" type="text" runat="server" style="DISPLAY: none" value="浙江省">
<INPUT id="lbl_city" type="text" runat="server" style="DISPLAY: none" value="杭州市">
<INPUT id="lbl_area" type="text" runat="server" style="DISPLAY: none">
前台拖放3个DropDownList控件:DropDownList1,DropDownList2,DropDownList3

2.cs页面添加代码
复制ajax 三级省市区联动xml 内的代码到你的项目中->在Class1.cs中
同时引用命名空间 using System.Xml;
同时在Page_Load()添加
Ajax.Utility.RegisterTypeForAjax(typeof(register));//register 为你页面的类文件名,如果更改请同时替换PCA.js中调用的类名
BindDropDownList();

3.拷贝ChinaArea.xml 文件到您所在项目跟目录中

4.web.config 中配置ajax
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" />
</httpHandlers>
</system.web>


作者:蓝驿轨迹 来源于:http://twh.cnblogs.com

效果图如下:

关键代码:

/// <summary>
		/// 初始化绑定省级下拉框
		/// </summary>
		protected void BindDropDownList()
		{
			XmlDocument xmlDoc = new XmlDocument();
			xmlDoc.Load(Server.MapPath("ChinaArea.xml"));
			XmlNodeList nodelist = xmlDoc.SelectNodes("area/province[@provinceID]");
			ListItem li = null;
			foreach (XmlNode myNode in nodelist)
			{
				li = new ListItem();
				li.Value =myNode.Attributes["provinceID"].Value;
				li.Text = myNode.Attributes["province"].Value;
				this.DropDownList1.Items.Add(li);
			}
			this.DropDownList1.SelectedIndex= 10;

			nodelist = xmlDoc.SelectNodes("area/province[@provinceID=330000]/City");
			foreach (XmlNode myNode in nodelist)
			{
				li = new ListItem();
				li.Value =myNode.Attributes["CityID"].Value;
				li.Text = myNode.Attributes["City"].Value;
				this.DropDownList2.Items.Add(li);
			}
			this.DropDownList2.SelectedIndex = 0;

			nodelist = xmlDoc.SelectNodes("area/province/City[@CityID=330100]/Piecearea");
			foreach (XmlNode myNode in nodelist)
			{
				li = new ListItem();
				li.Value =myNode.Attributes["PieceareaID"].Value;
				li.Text = myNode.Attributes["Piecearea"].Value;
				this.DropDownList3.Items.Add(li);
			}

			DropDownList1.Attributes.Add("onchange","CityResult(this.options[selectedIndex],'DropDownList2')");
			DropDownList2.Attributes.Add("onchange","AreaResult(this.options[selectedIndex],'DropDownList3')");
			DropDownList3.Attributes.Add("onchange","AreaResultV(this.options[selectedIndex],'DropDownList3')");
        
		}

		//创建服务器端方法。只要给一个方法加上[AjaxPro.AjaxMethod]标记,该方法就变成一个AjaxPro可进行映射调用方法
        [Ajax.AjaxMethod]
        //该方法我们将实现从客户端传入一个参数,在服务器端进行查询后返回到客户端。
        public DataSet BindCity(string parent_id,string _ddl)
        {            
            XmlDocument xmlDoc = new XmlDocument();
            try
            {
                xmlDoc.Load(Server.MapPath("../ChinaArea.xml"));
            }
            catch (Exception ex)
            {
                string aa = ex.Message;
                string i = "";
            }
            XmlNodeList nodelist = xmlDoc.SelectNodes("area/province[@provinceID=" + parent_id + "]/City");
            DataTable myDataTable = new DataTable();
            DataColumn myColumn;
            DataRow myRow;
            string Value = "",Text = "";
            myColumn = new DataColumn();
            myColumn.DataType = System.Type.GetType("System.String");
            myColumn.ColumnName = "Value";
            myDataTable.Columns.Add(myColumn);

            myColumn = new DataColumn();
            myColumn.DataType = Type.GetType("System.String");
            myColumn.ColumnName = "Text";
            myDataTable.Columns.Add(myColumn);

            foreach (XmlNode myNode in nodelist)
            {
                myRow = myDataTable.NewRow();
                Value = myNode.Attributes["CityID"].Value;
                Text = myNode.Attributes["City"].Value;
                myRow["Value"] = Value;
                myRow["Text"] = Text;
                myDataTable.Rows.Add(myRow);
            }
            DataSet ds = new DataSet();
            ds.Tables.Add(myDataTable);
            return ds;
        }

		[Ajax.AjaxMethod]
		public DataSet BindArea(string child_id,string _ddl)
		{			
			XmlDocument xmlDoc = new XmlDocument();
			xmlDoc.Load(Server.MapPath("../ChinaArea.xml"));
			XmlNodeList nodelist = xmlDoc.SelectNodes("area/province/City[@CityID="+child_id+"]/Piecearea");
			DataTable myDataTable = new DataTable();
			DataColumn myColumn;
			DataRow myRow; 
			string Value = "",Text="";
			myColumn = new DataColumn();
			myColumn.DataType = System.Type.GetType("System.String");
			myColumn.ColumnName = "Value";
			myDataTable.Columns.Add(myColumn);

			myColumn = new DataColumn();
			myColumn.DataType = Type.GetType("System.String");
			myColumn.ColumnName = "Text";
			myDataTable.Columns.Add(myColumn);

			foreach (XmlNode myNode in nodelist)
			{
				myRow = myDataTable.NewRow();
				Value =myNode.Attributes["PieceareaID"].Value;
				Text = myNode.Attributes["Piecearea"].Value;
				myRow["Value"] = Value;
				myRow["Text"] = Text;
				myDataTable.Rows.Add(myRow);			
			}
			DataSet ds = new DataSet();
			ds.Tables.Add(myDataTable);
			return ds;
		}


案例下载地址1:http://download.csdn.net/detail/lovegonghui/9175805

案例下载地址2:http://down.51cto.com/data/2104898

原文链接:https://www.f2er.com/ajax/162848.html

猜你在找的Ajax相关文章