asp.net实现无刷新DropDownList联动控件

asp.net|控件|刷新|无刷新

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

时间: 2024-09-01 12:29:02

asp.net实现无刷新DropDownList联动控件的相关文章

AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件,支持多样式多数据绑定_php技巧

本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式,配合css控制效果则更好! 1.分页样式效果图: 2.如何使用: 于bin目录下添加:AspNetAjaxPager.dll引用 aspx文件内容: 复制代码 代码如下: <%@ Page Language="C#"

实现无刷新DropdownList联动效果

刷新|无刷新 ASP.NET给我们带了了事件模型的编程机制,这使得我们将所有的任务都放在服务器上执行哪怕是一个小小变动,其实这到不是什么问题,可是有一点我们无法忍受,如果我们改变某一个输入框中的内容页面要刷新,改变DropDownlist的选择项需要更新另一个Dropdownlist需要刷新,真是郁闷. 下面我将描述一种原始的方法,之所以说它原是是因为这种方法在ASP.NET之前就已经有了,我想这两者之间的关系我不必详细描述,我们今天要说的是如何不刷新页面更新DropDownList,该方法旨在

Jquery实现无刷新DropDownList联动实现代码_jquery

先看HTML,我们引用Jquery,放两个DropDownList: 复制代码 代码如下: <style type="text/css"> #ddlEmployeeCars { display:none; position:absolute; top:50px; left:9px; } </style> <script language="javascript" type="text/javascript" src=

适用与firefox ASP.NET无刷新二级联动下拉列表_实用技巧

可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的测试平台:ie6,firefox  功能:二级无刷新连动  特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新  请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大

一个无刷新二级联动下拉列表,同样适用与firefox,这算ajax么?

ajax|刷新|无刷新|下拉|下拉列表 可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的,不知道这算ajax么? 测试平台:ie6,firefox 功能:二级无刷新连动 特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新 请求:如果您能

asp.net 简便无刷新文件上传系统

asp.net 简便无刷新文件上传系统 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简便无刷新文件上传系统</title> <s

实现 asp 的服务器无刷新推技术

服务器|刷新|无刷新 关于推送技术-----------------------------转载请注明出处:一鹤.NET_WWW.1HE.NET Client PULL(客户端拉技术)通常,聊天室通过不断刷新来显示服务器的最新信息,即所谓的Client PULL(客户端拉技术)Client PULL必须不停的建立连接,刷新信息,断开连接,这样效率很低,而且速度很慢.(如果加快速度,频繁的建立断开连接刷新页面都会增加服务器与客户端的资源消耗) Server Push(服务器推技术)推技术就是建立一

ajax+php无刷新二级联动下拉菜单(省市联动)源码

ajax.js /** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow <arcow@126.com> * @version 1.0 * @lastupdate 2005-12-29 * */ var http_request = false; function send_request(url,method) {//初始化.指定处理函数.发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(win

Asp.net实现无刷新检测用户名

本文将向大家介绍Asp.net实现无刷新检测用户名的方法,功能为:当用户输入用户名,用户名的文本框失去焦点后就检测用户名是否重复,不用再点击一个按钮才能检测(如今很多网站都具备这个功能哦). 下面就给出实现这一功能的代码: 前台代码: 以下是引用片段: <script type="text/javascript" language="javascript"> var xmlHttp = null; function CheckUser() { try {