ajax实现DropDownList 联动
方法一：
a.aspx
html部分
<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="a.aspx.cs" Inherits="ASPNET.wzh.shopDoNet.admin_a" %>
<HTML>
<HEAD>
<title>a</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="Javascrīpt" name="vs_defaultClientscrīpt">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<scrīpt>
function load(state){
var drp2 = document.getElementById("DropDownList2");
for(var i = 0;i<=drp2.options.length -1;i++){
drp2.remove(i);
}
var ōHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
var ōDoc = new ActiveXObject("MSXML2.DOMDocument");
oHttpReq.open("POST", "a.aspx?state="+state, false);
oHttpReq.send("");
result = oHttpReq.responseText;
oDoc.loadXML(result);
items = oDoc.selectNodes("//CITY/Table");
for (var item = items.nextNode(); item; item = items.nextNode()){
var city = item.selectSingleNode("//city").nodeTypedValue;
var newOption = document.createElement("OPTION");
newOption.text = city;
newOption.value = city;
drp2.options.add(newOption);
}
}
</scrīpt>
</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:Button ID="Button1" runat="server" ōnClick="Button1_Click" Text="Button" />
</form>
</body>
</HTML>
cs部分
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=;");
SqlCommand cmd = new SqlCommand("select state from authors group by state", con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader(Commandbehavīor.CloseConnection);
DropDownList1.DataSource = dr;
this.DropDownList1.DataTextField = "State";
this.DropDownList1.DataValueField = "State";
this.DropDownList1.DataBind();
this.DropDownList1.Attributes.Add("onchange", "load(this.options[this.selectedIndex].innerText)");
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(DropDownList1.SelectedValue+" "+DropDownList2.SelectedValue);
}
b.aspx
cs部分
protected void Page_Load(object sender, EventArgs e)
{
if (this.Request["state"] != null)
{
string state = this.Request["state"].ToString();
SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=;");
SqlDataAdapter da = new SqlDataAdapter("select city from authors where state = '" + state + "'", con);
DataSet ds = new DataSet("CITY");
da.Fill(ds);
XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
writer.Formatting = Formatting.Indented;
writer.Indentation = 4;
writer.IndentChar = ' ';
ds.WriteXml(writer);
writer.Flush();
Response.End();
writer.Close();
}
}
方法二：
后台代码：
using
System;
using
System.Data;
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
Microsoft.Practices.EnterpriseLibrary.Data;
public
partial
class
ajaxtest : System.Web.UI.Page
{
private static Database db = DatabaseFactory.CreateDatabase("mkstaffConn"); private string sqlcommand = string.Empty; protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(ajaxtest)); if (!Page.IsPostBack) { SystemName(); TeamList.DataSource = TeamName(SystemList.SelectedValue.Trim()); TeamList.DataTextField = "name"; TeamList.DataValueField = "name"; TeamList.DataBind(); SystemList.Attributes.Add("onchange", "GetTeamList();");
} } private void SystemName() { try { sqlcommand = "SELECT DISTINCT system FROM MKTeam"; SystemList.DataSource = db.ExecuteDataSet(CommandType.Text, sqlcommand).Tables[0]; SystemList.DataTextField = "system"; SystemList.DataValueField = "system"; SystemList.DataBind(); } catch { } } [AjaxPro.AjaxMethod] /// <summary> /// ajax调用方法 /// </summary> /// <param name="systemselectname"></param> public DataTable TeamName(string systemselectname) { try { sqlcommand = "select name from mkteam where system='" + systemselectname + "'"; return db.ExecuteDataSet(CommandType.Text, sqlcommand).Tables[0]; } catch { return null; } }
}
前台代码：
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
ajaxtest.aspx.cs
"
Inherits
=
"
ajaxtest
"
%>
<!
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
>
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
//
<!CDATA[
function GetTeamList()
{ var System=document.getElementById("SystemList"); ajaxtest.TeamName(System.value,TeamCallBack);}
function TeamCallBack(response)
{ if(response.value !=null) { var team=document.getElementById("TeamList"); var dt=response.value; team.length=0; for(var i=0;i<dt.Rows.length;i++) { var team_text=dt.Rows[i]["name"]; var team_value=dt.Rows[i]["name"]; team.options.add(new Option(team_text,team_value)); } } }
//
]]>
</
script
>
</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
div
>
<
asp:DropDownList ID
=
"
SystemList
"
runat
=
"
server
"
Width
=
"
120px
"
>
</
asp:DropDownList
>
<
asp:DropDownList ID
=
"
TeamList
"
runat
=
"
server
"
Width
=
"
120px
"
>
</
asp:DropDownList
></
div
>
</
form
>
</
body
>
</
html
>