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">

// <!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>

<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>

posted on 2007-04-07 22:12 上校阅读(1978) 评论(0) 收藏举报

淡泊以明志,宁静以致远

ajax实现DropDownList 联动