您的位置：首页 > 编程语言 > ASP

asp.net无刷新三级联动

2007-12-09 18:46 225 查看
无刷新三级联动，这个在网上有很多，方法也很好。但是有一点比较特别的就是我的这个，是因为单位已经建立好了数据库，你得在这个上面进行添加。所以很麻烦啊。在网上也找了一些，可是大多数数据库都不一样，有一些是用vs2005和ajaxpro做的，可是我单位使用的是vs2003没有法子，只能找一些可以用了。这里要感谢的是 Eric 它在baidu的BLOG里的方法不错，我基本是采用它的方法来做的，只不过这里做了一些改动。

首先是。ThreeDDL.aspx页面,我把程序全写上来，

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>无标题页</title>

<script language="javascript">

<!--

function SelectProvince()

{

var drp2=document.getElementById("DropDownList2");//市县一级

var drp3=document.getElementById("DropDownList3");//区一级

for (var i=drp2.options.length;i>=0;i--)

{

drp2.remove(i);

}

for (var i=drp3.options.length;i>=0;i--)

{

drp3.remove(i);

}

var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP");

var oDoc=new ActiveXObject("MSXML2.DOMDocument");

var province=document.getElementById("DropDownList1").value;

oHttpReq.open("post","selectarea.aspx?flag=1&province="+province,false);

oHttpReq.setrequestheader("content-type","application/x-www-form-urlencoded");

oHttpReq.send("");

var result=oHttpReq.responseText;

var newOption_0 = document.createElement("OPTION");

newOption_0.text = "-请选择-";

newOption_0.value = '-1';

drp2.options.add(newOption_0);

oDoc.loadXML(result);

//这里要说一下，items1和items2是你在后面程序中得到的一个xml表。对于//NewDataSet/city/name是怎么来的，你可以用alert(result);看一下就行

items1 = oDoc.selectNodes("//NewDataSet/city/name");

items2 = oDoc.selectNodes("//NewDataSet/city/sz_code");

var itemsLength=items1.length;

for(i=0;i<itemsLength;i++)

//将小类的类名和编号赋予DropDownList2

{

var newOption = document.createElement("OPTION");

newOption.text=items1[i].text;

newOption.value=items2[i].text;

drp2.options.add(newOption);

}

}

function SelectCity()

{

var drp3=document.getElementById("DropDownList3");

for (var i=drp3.options.length;i>=0;i--)

{

drp3.remove(i);

}

var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP");

var oDoc=new ActiveXObject("MSXML2.DOMDocument");

var city=document.getElementById("DropDownList2").value;

oHttpReq.open("post","selectarea.aspx?flag=2&city="+city,false);

oHttpReq.setrequestheader("content-type","application/x-www-form-urlencoded");

oHttpReq.send("");

var result=oHttpReq.responseText;

var newOption_0 = document.createElement("OPTION");

newOption_0.text = "-请选择-";

newOption_0.value = '-1';

drp3.options.add(newOption_0);

oDoc.loadXML(result);

var items = oDoc.selectNodes("//NewDataSet/area");

for (var item = items.nextNode();item;item = items.nextNode())

{　

　

　var areaName = item.selectSingleNode("name").nodeTypedValue;

　var areaCode = item.selectSingleNode("sz_code").nodeTypedValue;

var newOption = document.createElement("OPTION");　

　newOption.text = areaName;　

　newOption.value = areaCode;　

　drp3.options.add(newOption);　

}　

}

-->

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:DropDownList ID="DropDownList1" runat="server">

</asp:DropDownList>

<asp:DropDownList ID="DropDownList2" runat="server">

</asp:DropDownList>

<asp:DropDownList ID="DropDownList3" runat="server">

</asp:DropDownList></div>

</form>

</body>

</html>

下面是ThreeDDl.aspx.cs的代码

protected void Page_Load(object sender, EventArgs e)

{

SqlConnection conn = new SqlConnection("Data Source=CG;Initial Catalog=area;User ID=sa;Password=chen123");

SqlDataAdapter da = new SqlDataAdapter("select * from area where right(sz_code,4)='0000'",conn);

DataSet ds = new DataSet();

da.Fill(ds, "Province");

this.DropDownList1.DataSource = ds.Tables["Province"];

this.DropDownList1.DataTextField = "name";

this.DropDownList1.DataValueField = "sz_code";

this.DropDownList1.DataBind();

this.DropDownList1.Attributes.Add("onchange", "SelectProvince()");

this.DropDownList2.Attributes.Add("onchange", "SelectCity()");

}

selectarea.aspx这个页面上面没有什么东西，只有在其selectarea.aspx.cs中才有代码，在下面

using System;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Xml;

public partial class selectarea : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

SqlConnection conn = new SqlConnection("Data Source=CG;Initial Catalog=area;User ID=sa;Password=chen123");

int flag = Convert.ToInt32(Request.QueryString["flag"].ToString());

if (Request.QueryString["flag"] != null || Request.QueryString["flag"].ToString() != "")

{

switch(flag)

{

case 1:

string strprv = Request.QueryString["province"].ToString();

SqlDataAdapter da = new SqlDataAdapter("select * from area where left(sz_code,2)='" + strprv.Substring(0, 2).ToString() + "' and right(sz_code,2)='00' and right(sz_code,4)<>'0000'", conn);

DataSet ds = new DataSet();

da.Fill(ds,"city");

XmlTextWriter writerCity = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);

writerCity.Formatting = Formatting.Indented;

writerCity.Indentation = 4;

writerCity.IndentChar = ' ';

ds.WriteXml(writerCity);

writerCity.Flush();

Response.End();

writerCity.Close();

break;

case 2:

string strcity = Request.QueryString["city"].ToString();

SqlDataAdapter da1 = new SqlDataAdapter("select * from area where left(sz_code,4)='" + strcity.Substring(0, 4).ToString() + "' and right(sz_code,2)<>'00'", conn);

DataSet ds1 = new DataSet();

da1.Fill(ds1, "area");

XmlTextWriter writerCity1 = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);

writerCity1.Formatting = Formatting.Indented;

writerCity1.Indentation = 4;

writerCity1.IndentChar = ' ';

ds1.WriteXml(writerCity1);

writerCity1.Flush();

Response.End();

writerCity1.Close();

break;

}

}

}

}

这里我把数据库的大概情况给大家发一下，如果想要数据库ftp://down:down@ftp.netc.hutc.zj.cn/city.rar这个是Eric朋友提供的下载我不知道能用多长时间，我单位的数据库与它差不多，因为我无法提供我的数据库，所以以上代码全是根据它的数据库格式写的。

表名area

id name Rome sz_code zm_code

1 北京 Beijing Shi 110000 BJ

这里说一下，省一级的包括北京，天津这样的独立的市，sz_code全是前二位有数，后四位全是0000

而下面一级的，市县一级的则是前二位与省级一样，中间二位不同，后二位是00

而最后一级，区一级的，前二位与省级一样，中间与市级一样，最后二位是自己的号。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航