asp.net实现无刷新DropDownList联动控件

出处：麦客学吧 [2007-11-28 8:57:19] 点击数：772

在网上看到了一些无刷新的联动控件。下下了测试以后，显示英文和数字可以，但是不可以显示中文，后来把从网上down下来的文件做了一个翻修改，做了一个省市的联动控件。给大家共享一下。可以显示中文了。

<%@ Page language="c#" Codebehind="Example.aspx.cs" AutoEventWireup="false" Inherits="Webs.other.Example" %> 

<HTML> 

<HEAD> 

<title>Example</title> 

<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> 

<meta name="CODE_LANGUAGE" Content="C#"> 

<meta name="vs_defaultClientScript" content="JavaScript"> 

<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> 

<script> 

function load(state){ 

var drp2 = document.getElementById("DropDownList2"); 

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

drp2.options.remove(i); 

} 



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

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



oHttpReq.open("POST", "getData.aspx?state="+state, false); 

oHttpReq.send(""); 

result = oHttpReq.responseText; 

oDoc.loadXML(result); 

items1 = oDoc.selectNodes("//CITY/Table/Id"); 

items2 = oDoc.selectNodes("//CITY/Table/shiname"); 



var itemsLength=items1.length; 

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



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

　　{ 

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

　　newOption.text=items2[i].text; 

　　newOption.value=items1[i].text; 

　　drp2.options.add(newOption); 

　　} 

} 

window.onload = function(){load('1');} 



</script> 

</HEAD> 

<body MS_POSITIONING="FlowLayout"> 

<form id="Form1" method="post" runat="server"> 

<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList> 

<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList> 

<asp:TextBox id="TH" runat="server"></asp:TextBox> 

<asp:Button id="Button1" runat="server" Text="Button"></asp:Button> 

</form> 

</body> 

</HTML>

cs源文件:

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;



namespace Webs.other

...{

/**//// <summary>

/// Example 的摘要说明。

/// </summary>

public class Example : System.Web.UI.Page

...{

protected System.Web.UI.WebControls.DropDownList DropDownList1;

protected System.Web.UI.WebControls.TextBox TH;

protected System.Web.UI.WebControls.Button Button1;

protected System.Web.UI.WebControls.DropDownList DropDownList2;



private void Page_Load(object sender, System.EventArgs e)

...{

// 在此处放置用户代码以初始化页面

if(!this.IsPostBack)

...{

// 建立数据源加载第一个DropDownList，也可以默认加载第二个

SqlConnection con = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("connStr1"));

SqlDataAdapter da = new SqlDataAdapter("select Id,shengname from Province",con);

DataSet ds = new DataSet();

da.Fill(ds);

this.DropDownList1.DataSource = ds;

this.DropDownList1.DataTextField = "shengname";

this.DropDownList1.DataValueField = "Id";

this.DropDownList1.DataBind();

// 这里是绑定客户端事件，当第一个DropDownList的选项改变时激发下面的事件onchange，这个事件将调用一个客户端方法load()

this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");

}

}

Web Form Designer generated code#region Web Form Designer generated code

override protected void OnInit(EventArgs e)

...{

//

// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。

//

InitializeComponent();

base.OnInit(e);

}



/**//// <summary>

/// 设计器支持所需的方法 - 不要使用代码编辑器修改

/// 此方法的内容。

/// </summary>

private void InitializeComponent()

...{ 

this.Button1.Click += new System.EventHandler(this.Button1_Click);

this.Load += new System.EventHandler(this.Page_Load);



}

#endregion

private void Button1_Click(object sender, System.EventArgs e)

...{

TH.Text=this.Request.Form["DropDownList2"].ToString();

}

}

}

Getdata.cs源文件：

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using System.Xml;

using System.Configuration;

using System.Text;



namespace Webs.other

...{

/**//// <summary>

/// GetData 的摘要说明。

/// </summary>

public class GetData : System.Web.UI.Page

...{

private void Page_Load(object sender, System.EventArgs e)

...{

// 在此处放置用户代码以初始化页面

//Response.Write(Request["state"]);

int shengNo=int.Parse(Request["state"].ToString()); 

SqlConnection con = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("connStr1"));

SqlDataAdapter da = new SqlDataAdapter("select Id,shiname from City where Shengid='"+shengNo+"'",con);

DataSet ds = new DataSet("CITY");

da.Fill(ds);



XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,Encoding.UTF8);

writer.Formatting = Formatting.Indented;

writer.Indentation = 4;

writer.IndentChar = ' ';

writer.WriteStartDocument();

ds.WriteXml(writer);

writer.Flush();

Response.End();

writer.Close(); 

}



Web Form Designer generated code#region Web Form Designer generated code

override protected void OnInit(EventArgs e)

...{

//

// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。

//

InitializeComponent();

base.OnInit(e);

}

/**//// <summary>

/// 设计器支持所需的方法 - 不要使用代码编辑器修改

/// 此方法的内容。

/// </summary>

private void InitializeComponent()

...{ 

this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

}

}