ajax dropdownlist无刷新联动

83 篇文章 0 订阅
53 篇文章 0 订阅
test1.aspx 

<%@ Page language="c#" Codebehind="test1.aspx.cs" AutoEventWireup="false" Inherits="SC.test1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>test1</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 language="javascript">  
              function   load(statevalue){  
                var   drp2   =   document.getElementById("DropDownList2");  
                   //清空DropDownList2
                      while(drp2.length > 0)
                      { drp2.options.remove(0);}

                      //
                 var   oHttpReq   =   new   ActiveXObject("MSXML2.XMLHTTP");  
                var   oDoc   =   new   ActiveXObject("MSXML2.DOMDocument");  
               // alert(statevalue);
                oHttpReq.open("POST",   "test2.aspx?statevalue="+statevalue,   false);  
                oHttpReq.send("");  
                result   =   oHttpReq.responseText;
                oDoc.loadXML(result);
               // alert(result); 
                var nodes = oDoc.documentElement.childNodes;
                  for(i=0;i<nodes.length;i++)
                  {
                    var PP = nodes[i].childNodes;
                   var newOption = document.createElement("OPTION");
                   
          newOption.text = PP[0].text ;
          newOption.value = PP[1].text;
                 
                  drp2.options.add(newOption);
                }
                  
  
                  
              }  
              function change(obj)
              {
              alert(obj.options[obj.selectedIndex].value);
                document.getElementById("tip").value = obj.options[obj.selectedIndex].value;
              }
  </script>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <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="tip" Runat="server"></asp:TextBox>
   <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 352px; POSITION: absolute; TOP: 32px" runat="server"
    Text="Button"></asp:Button>
  </form>
 </body>
</HTML>


 

<script language="javascript" type="text/javascript"> function load(statevalue){ var drp2 = document.getElementById("DropDownList2"); //清空DropDownList2 while(drp2.length > 0) { drp2.options.remove(0);} // var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP"); var oDoc = new ActiveXObject("MSXML2.DOMDocument"); // alert(statevalue); oHttpReq.open("POST", "test2.aspx?statevalue="+statevalue, false); oHttpReq.send(""); result = oHttpReq.responseText; oDoc.loadXML(result); // alert(result); var nodes = oDoc.documentElement.childNodes; for(i=0;i
test1.aspx.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.Text;
using System.Xml;
using System.Data.SqlClient;
using MyConfig;
using Microsoft.ApplicationBlocks.Data;
using AjaxPro;

namespace SC
{
 /// <summary>
 /// test1 的摘要描述。
 /// </summary>
 public class test1 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.TextBox tip;
  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)
   { 
    SqlConnection   con   =   new   SqlConnection(MyConfig.MyConfigSectionHandler.ConnectionString);  
    con.Open();
    SqlDataAdapter   da   =   new   SqlDataAdapter("select   State,statevalue   from   Astate ",con);  
    DataSet   ds   =   new   DataSet();

    da.Fill(ds);
    con.Close();
    this.DropDownList1.DataSource = ds.Tables[0];
    this.DropDownList1.DataTextField   =   "State";  
    this.DropDownList1.DataValueField   =   "statevalue";  
    this.DropDownList1.DataBind();  
    this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)"); 
    this.DropDownList2.Attributes.Add("onchange","change(this)");
   }
  }

  #region Web Form 設計工具產生的程式碼
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
   //
   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)
  {
   Response.Write(this.tip.Text);
  }
 }
}
 

test2.aspx. 

<%@ Page language="c#" Codebehind="test2.aspx.cs" AutoEventWireup="false" Inherits="SC.test2" %>

test2.aspx.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.Text;
using System.Xml;
using System.Data.SqlClient;
using MyConfig;
using Microsoft.ApplicationBlocks.Data;
using AjaxPro;

namespace SC
{
 /// <summary>
 /// test2 的摘要描述。
 /// </summary>
 public class test2 : System.Web.UI.Page
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在這裡放置使用者程式碼以初始化網頁

   if(this.Request["statevalue"]!=null)
   {  
    string   statevalue   =   this.Request["statevalue"].ToString();  
    SqlConnection   con   =   new   SqlConnection(MyConfig.MyConfigSectionHandler.ConnectionString);  
    
    SqlDataAdapter   da   =   new   SqlDataAdapter("select  city,cityvalue   from   Acity   where   statevalue   =   '"+statevalue+"'",con);  
    DataSet   ds   =   new   DataSet("thiscity");  
    da.Fill(ds);
    
    string   filename   =   "c://myxml.xml";  
    System.IO.FileStream   myFileStream   =   new   System.IO.FileStream(filename,System.IO.FileMode.Create);  
    ds.WriteXml(myFileStream);  
    myFileStream.Close();

/*写出来是这样的XML文件

<thiscity>
  <Table>
    <city>韶關</city>
    <cityvalue>4</cityvalue>
  </Table>
  <Table>
    <city>廣州</city>
    <cityvalue>5</cityvalue>
  </Table>
  <Table>
    <city>汕頭</city>
    <cityvalue>6</cityvalue>
  </Table>
</thiscity>

*/

    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();  

    


   }
  }

  #region Web Form 設計工具產生的程式碼
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改
  /// 這個方法的內容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
 }
}
 

这个是ajax 实现DropDownList刷新联动面有数据库结构和内容,表结构的是sql2000的, 关键代码: <SCRIPT language="javascript"> //城市------------------------------ function cityResult() { var city=document.getElementById("DropDownList1"); AjaxMethod.GetCityList(city.value,get_city_Result_CallBack); } function get_city_Result_CallBack(response) { if (response.value != null) { //debugger; document.all("DropDownList2").length=0;          var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++)      {      var name=ds.Tables[0].Rows[i].CityName;        var id=ds.Tables[0].Rows[i].ProvinceID;        document.all("DropDownList2").options.add(new Option(name,id));      } } } else { document.all("DropDownList2").length=0; } return } //市区---------------------------------------- function areaResult() { var area=document.getElementById("DropDownList2"); AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack); } function get_area_Result_CallBack(response) { if (response.value != null) { document.all("DropDownList3").length=0;          var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++)      {        var name=ds.Tables[0].Rows[i].ProvinceName;        var id=ds.Tables[0].Rows[i].id;        document.all("DropDownList3").options.add(new Option(name,id));      } } } else { document.all("DropDownList3").length=0; } return } </SCRIPT>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值