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

N 个 ASP.net DropDownList 无刷新联动菜单

2017-02-08 11:49 609 查看
http://tb.blog.csdn.net/TrackBack.aspx?PostId=1377536

再谈 N 个 ASP.net DropDownList 无刷新联动菜单,牺牲N-1个ASPX来实现自动更新机制,避免刷新的闪动!!

以下代码绝对可以使用,也可以实现多级菜单。。。。

  <script language="javascript">

   function load(state)

   {

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

    for(var i=0;i<=drp2.options.length-1;i++)

    {

     drp2.remove(i);

    }

    var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");    //发送请求

    var oDoc = new ActiveXObject("MSXML2.DOMDocument");    //响应结果

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

    oHttpReq.open("post","webform2.aspx?state="+state, false);

    oHttpReq.send("");

    result = oHttpReq.responseText;

    oDoc.loadXML(result); 

    

   // items = oDoc.selectNodes("//CITY/Table");

       items = oDoc.selectNodes("//address/Table");

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

     { 

      var city = item.selectSingleNode("//address").nodeTypedValue;

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

      newOption.text = city; 

      newOption.value = city; 

      drp2.options.add(newOption); 

      } 

   }

  </script>

 

 

============================

webform1.aspx

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

  {

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

   if(!IsPostBack)

   {

    SqlConnection con = new SqlConnection("packet size=4096;user id=sa;data source=SERVER;persist security info=False;initial catalog=pubs");

    SqlDataAdapter da = new SqlDataAdapter("select state from authors group by state",con);

    DataSet ds = new DataSet("State");

    da.Fill(ds);

    this.DropDownList1.DataSource = ds.Tables[0];

    this.DropDownList1.DataTextField = "state";

    this.DropDownList1.DataValueField = "state"; 

    this.DropDownList1.DataBind();  

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

    //DropDownList1.

   }

  

  }

 

webform2.aspx

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

  {

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

   if(this.Request["state"]!=null)

   {  

    string state = this.Request["state"].ToString();  

    SqlConnection con = new SqlConnection("packet size=4096;user id=sa;data source=SERVER;persist security info=False;initial catalog=pubs");

    SqlDataAdapter da = new SqlDataAdapter("select address from authors where state = '"+state+"'",con);  

    DataSet ds = new DataSet("address");  

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

   }

  }

 

---------------------------------

仔细看看``其实完全不用在响应多个DROPLIST的时候牺牲 N-1 个页面,因为所有的响应都有一个共性,为什么不可以多传一个值进行判断响应那一个方法呢???

var type ="type1";

 oHttpReq.open("post","webform2.aspx?state="+state+"&type="+type, false);

  string type = this.Request["type"].ToString();

switch(type)

{

    case "type1":

      .........................................

}

 

----------------------------------------------

程序需要做几处修改:

1、解决drp2、drp3清楚不完全的问题: drp2.innerText ="";  drp3.......................

2、

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

     { 

      var city = item.nodeTypedValue;

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

      newOption.text = city; 

      newOption.value = city; 

      drp2.options.add(newOption); 

      } 

3、如果传多个值的问题也是一样``

select t1,t2 from tt

只要多加一个条件就可以解决问题

 

=======================================================

这个还有很多可以研究的问题``比如刷新后值的问题。。。。。。。。。。。。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=548121

 

 

程序演示地址:http://www.718.com.cn/other/Example.aspx

在网上看到了一些无刷新的联动控件。下下了测试以后,显示英文和数字可以,但是不可以显示中文,后来把从网上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)");

   }

  }

  #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源文件

 

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

  }

  #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

 }

}

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=472917
 


 ASP.net
DropDownList 无刷新联动!

<TITLE>WebForm2</TITLE>
  <SCRIPT language='javascript'> 

  function load(){ 

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

    drp2.innerText="";

    for(var i = 0;i<=drp2.options.length -1;i++){ 

     drp2.remove(i); 

    } 

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

    for(var i = 0;i<=drp3.options.length -1;i++){ 

     drp3.remove(i); 

    } 

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

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

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

    xmlhttp.open("POST", "webform1.aspx?id="+state,false);

    xmlhttp.send("");

    var res=oDoc.loadXML(xmlhttp.responseText);

    var naItems = oDoc.selectNodes("//Market/Table/maName"); 

    var idItems = oDoc.selectNodes("//Market/Table/maId"); 

    var item;

    var id;

    for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){ 

     var nastr = item.nodeTypedValue; 

     var idstr = id.nodeTypedValue;

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

     newOption.text =nastr; 

     newOption.value = idstr; 

     

     

     drp2.options.add(newOption); 

    } 

    load2();

  

  } 

  function load2(){ 

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

    drp2.innerText="";

    for(var i = 0;i<=drp2.options.length -1;i++){ 

     drp2.remove(i); 

    } 

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

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

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

    xmlhttp.open("POST", "webform3.aspx?id="+state,false);

    xmlhttp.send("");

    var res=oDoc.loadXML(xmlhttp.responseText);

    var naItems = oDoc.selectNodes("//Market/Table/maName"); 

    var idItems = oDoc.selectNodes("//Market/Table/maId"); 

    var item;

    var id;

    for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){ 

     var nastr = item.nodeTypedValue; 

     var idstr = id.nodeTypedValue;

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

     newOption.text =nastr; 

     newOption.value = idstr; 

     

     

     drp2.options.add(newOption); 

    } 

  

  } 

  </SCRIPT>

 </HEAD>

 <BODY ms_positioning="GridLayout" onload="load()">

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

   <ASP:DROPDOWNLIST id="DropDownList1" runat="server"></ASP:DROPDOWNLIST>

   <ASP:DROPDOWNLIST id="DropDownList2" runat="server"></ASP:DROPDOWNLIST>

   <ASP:DROPDOWNLIST id="Dropdownlist3" runat="server"></ASP:DROPDOWNLIST>

  </FORM>

 </BODY>

</HTML>

-----------------------

namespace dropDown

{

 /// <summary>

 /// WebForm2 的摘要说明。

 /// </summary>

 public class WebForm2 : System.Web.UI.Page

 {

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

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

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

 

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

  {

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

   if(!this.IsPostBack)

   { 

    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd="); 

    SqlDataAdapter da = new SqlDataAdapter("select maId,maName from tabMarket  where maCls=0",con); 

    DataSet ds = new DataSet(); 

    da.Fill(ds,"op");

    this.DropDownList1.DataSource=ds.Tables[0];

    this.DropDownList1.DataTextField = "maName"; 

    this.DropDownList1.DataValueField = "maId"; 

    this.DropDownList1.DataBind(); 

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

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

   }

  }
 }

}

-----------------------

public class WebForm1 : System.Web.UI.Page

 {

 

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

  {

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

   // Put user code to initialize the page here 

   //if(this.Request["state"]!=null)

   //{  

     string id =this.Request["id"]; 

    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;"); 

    SqlDataAdapter da = new SqlDataAdapter("select maName,maId  from tabMarket where maParent=@id and maSt=1 ",con); 

       da.SelectCommand.Parameters.Add("@id",id);

    DataSet ds = new DataSet("Market"); 

    da.Fill(ds); 

   

       ds.WriteXml(Response.OutputStream);

       Response.Flush ();

       Response.End ();

       

   //}

  }

       }

-----------------------------

 public class WebForm3 : System.Web.UI.Page

 {

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

  {

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

   string id =Request["id"]; 

   SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;"); 

   SqlDataAdapter da = new SqlDataAdapter("select maName,maId  from tabMarket where maParent=@id and maSt=1",con); 

   da.SelectCommand.Parameters.Add("@id",id);

   DataSet ds = new DataSet("Market"); 

   da.Fill(ds); 

   

   ds.WriteXml(Response.OutputStream);

   Response.Flush ();

   Response.End ();

  }

       }

------------------
 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  asp.net