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

最新推荐文章于 2022-03-25 11:45:56 发布
最新推荐文章于 2022-03-25 11:45:56 发布
阅读量991 收藏
点赞数
分类专栏： SQL数据库 文章标签： asp.net

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" οnlοad="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 ();
  }
       }
------------------

 



清空回声
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp.net DropDownList 三级联动下拉菜单实现代码
10-29
asp.net DropDownList 三级联动下拉菜单效果代码，需要的朋友可以参考下。
使用dropdownlist能实现不刷新页面的效果具体例子
qhzhen的博客
10-05 2553
至少VS2008 sp1 以上 &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt; //ASP.NET中使用UpdatePanel实现局部异步刷新 &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt
asp.net_DropDownList应用
BeJav
03-25 2861
记录三个DropDownList的实践操作 1. 先上效果图 多选框选择其中一个选项，多行文本框输出这个选项的基本数据，以及下面的两个按钮的功能。 前端代码： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
用XMLTHHP实现DropDownList无刷新联动菜单[联动菜单]
ldw701的专栏
11-18 819
ASP.NET给我们带了了事件模型的编程机制，这使得我们将所有的任务都放在服务器上执行哪怕是一个小小变动，其实这到不是什么问题，可是有一点我们无法忍受，如果我们改变某一个输入框中的内容页面要刷新，改变DropDownlist的选择项需要更新另一个Dropdownlist需要刷新，真是郁闷。       下面我将描述一种原始的方法，之所以说它原是是因为这种方法在ASP.NET之前就已经有了，我想这两
asp.net DropDownList下拉列表无刷联动
01-03
asp.net DropDownList下拉列表无刷联动，使用ScriptManager和UpdatePanel实现无刷
asp.net DropDownList实现二级联动效果
10-22
主要介绍了asp.net DroDownList实现二级联动效果的相关资料,需要的朋友可以参考下
【ASP.NET编程知识】asp.net DropDownList实现二级联动效果.docx
05-15
"ASP.NET DropDownList实现二级联动效果" 在 ASP.NET 编程中，实现 DropDownList 的二级联动效果是非常...ASP.NET DropDownList 的二级联动效果是一个非常有用的技术，可以帮助我们实现复杂的交互效果，提高用户体验。
asp.net无刷新二级联动下拉菜单
04-16
asp.net无刷新二级联动下拉菜单,Droplist
ASP.NET中DropDownList无刷新联动实现方法
04-06 862
DropDownList联动在实际的编程工作中被广泛使用，如果使用微软提供的事件操作方法，
ASP.NET 两个DropDownList控件的动态联动
shaoyanning的博客
04-06 4114
通过一个简单的例子，展示了，两个Dropdownlist控件的动态联动。
asp.net实现DropDownList、ListBox无刷新三级联动的两种方法
学无止境的专栏
09-17 2271
asp.net实现DropDownList、ListBox无刷新三级联动的两种方法2007-09-14 来自：xuejinyoulan  show_ads_zone(203);来源：netshuai博客园　　方法一：使用javascript　　此为DropDownList无刷新三级联动的另一种方法，使用javascript操作，因是在客户端操作，所以切换速度较快，但如果数据量大时，
c# Asp:DropDownList 增加属性AutoPostBack="true"后，页面不断刷新的原因。
xxx355200的博客
11-29 2852
        今天在使用 Asp:DropDownList控件时，想要做一个绑定数据功能，且要有OnSelectedIndexChanged事件，需要增加属性AutoPostBack="true"，否则OnSelectedIndexChanged事件触发不了。 aspx内容：  &lt;tr&gt; &lt;td style=" width:8%"&gt;数据库IP：&lt;/td...
asp.net中Request.Form使用注意点
web开发自学
02-15 653
我们先看这样一个例子 前台代码： &lt;asp:TextBox&lt;wbr&gt;&lt;/wbr&gt;ID="TextBox1"&lt;wbr&gt;runat&lt;/wbr&gt;="server"&lt;wbr&gt;ReadOnly&lt;/wbr&gt;="True"&lt;wbr&gt;&lt;
asp.net dropdownlist二级联动代写代码
最新发布
08-18
ASP.NET中的DropDownList控件可以通过绑定数据源实现二级联动效果。下面是一个使用C#代码实现的示例: 首先，需要在页面上定义两个DropDownList控件，分别表示一级和二级选项: ``` <asp:DropDownList ID=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值