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

可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js 给下拉框添加条目那么他的状态是不会被保存的测试平台:ie6,firefox

功能:二级无刷新连动

特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新

请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励

webform1.aspx:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="drop.WebForm1" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<HTML> 
<HEAD> 
<title>WebForm1</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"> 
//jb函数会根据不同的浏览器初始化个xmlhttp对象 
function jb() 
{ 
var A=null; 
try 
{ 
A=new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch(e) 
{ 
try 
{ 
A=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch(oc) 
{ 
A=null 
} 
} 
if ( !A && typeof XMLHttpRequest != "undefined" ) 
{ 
A=new XMLHttpRequest() 
} 
return A 
}

//下面Go函数是父列表框改变的时候调用，参数是选择的条目 
function Go(obj) 
{ 
//得到选择框的下拉列表的value 
var svalue = obj.value; 
//定义要处理数据的页面 
var weburl = "webform1.aspx?parent_id="+svalue; 
//初始化个xmlhttp对象 
var xmlhttp = jb(); 
//提交数据，第一个参数最好为get，第三个参数最好为true 
xmlhttp.open("get",weburl,true); 
// alert(xmlhttp.responseText); 
//如果已经成功的返回了数据 
xmlhttp.onreadystatechange=function() 
{ 
if(xmlhttp.readyState==4)//4代表成功返回数据 
{ 
var result = xmlhttp.responseText;//得到服务器返回的数据 
//先清空dListChild的所有下拉项 
document.getElementById("dListChild").length = 0; 
//给dListChild加个全部型号的,注意是Option不是option 
document.getElementById("dListChild").options.add(new Option("全部型号","0")); 
if(result!="")//如果返回的数据不是空 
{ 
//把收到的字符串按照，分割成数组 
var allArray = result.split(","); 
//循环这个数组，注意是从1开始，因为收到的字符串第一个字符是，号，所以分割后第一个数组为空 
for(var i=1;i<allArray.length;i++) 
{ 
//在把这个字符串按照|分割成数组 
var thisArray = allArray[i].split("|"); 
//为dListChild添加条目 
document.getElementById("dListChild").options.add(new Option(thisArray[1].toString(),thisArray[0].toString())); 
} 
} 
} 
} 
//发送数据，请注意顺序和参数，参数一定为null或者"" 
xmlhttp.send(null); 
} 
</script> 
</HEAD> 
<body MS_POSITIONING="GridLayout"> 
<form id="Form1" method="post" runat="server"> 
<asp:DropDownList onchange="Go(this)" id="dListParent" style="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 40px" 
runat="server"> 
<asp:ListItem Value="100">摩托罗拉</asp:ListItem> 
<asp:ListItem Value="101">诺基亚</asp:ListItem> 
</asp:DropDownList> 
<asp:DropDownList id="dListChild" style="Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 104px" 
runat="server"></asp:DropDownList> 
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 256px; POSITION: absolute; TOP: 176px" runat="server" 
Text="Button"></asp:Button> 
</form> 
</body> 
</HTML>

后台webform1.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.Configuration; 
using System.Data.SqlClient;

namespace drop 
{ 
/// <summary> 
/// WebForm1 的摘要说明。 
/// </summary> 
public class WebForm1 : System.Web.UI.Page 
{ 
protected System.Web.UI.WebControls.DropDownList dListParent; 
protected System.Web.UI.WebControls.Button Button1; 
protected System.Web.UI.WebControls.DropDownList dListChild;

private void Page_Load(object sender, System.EventArgs e) 
{ 
// 在此处放置用户代码以初始化页面 
//if(!IsPostBack) 
//{ 
BindDrop();//如果不是提交回来就绑定列表框 
//} 
}

protected void BindDrop() 
{ 
//首先我想父dropdownlist也绑定数据库,后面想没必要 
//if(!IsPostBack) 
//{ 
//绑定父dListParent 
// BindParent(); 
//} 
//获得传递过来的parent_id值,如果是第一次请求他为null 
string str = Request.QueryString["parent_id"]; 
string str1 = dListParent.SelectedValue;; 
Response.Write(str1); 
//如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件 
if((str+"abc")!="abc") 
{ 
//绑定 dListChild控件 
BindChild(str);//把传来的父DropDownList的value做为参数 
} 
else 
BindParent(str1); 
}

protected void BindParent(string str) 
{ 
//如果是第一次请求或者是刷新这个页面则根据dListParent的值来选择 
//把参数转化成int 
int i = Convert.ToInt32(str); 
dListChild.Items.Clear(); 
dListChild.Items.Add(new ListItem("全部型号","0")); 
//得到数据库连接字符串 
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString(); 
//初始化个conn对象 
SqlConnection conn = new SqlConnection(connStr); 
//数据库语句 
string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i); 
//建立数据库命令对象 
SqlCommand comm = new SqlCommand(commStr,conn); 
//打开数据库 
conn.Open(); 
//执行命令 
SqlDataReader dr = comm.ExecuteReader(); 
//循环dr，给dListParent添加条目 
while(dr.Read()) 
{ 
dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString())); 
//也可以这样 
//dListParent.Items.Add(new ListItem(dr["phone_text"].ToString(),dr["phone_value"].ToString())); 
} 
dListParent.Items[0].Selected = true; 
//添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存 
dListChild.SelectedValue = Request.Form["dListChild"]; 
dr.Close(); 
conn.Close(); 
}

protected void BindChild(string str) 
{ 
//通过js给包括dropdownlist任何控件添加的内容不会被保存状态 
//把参数转化成int 
int i = Convert.ToInt32(str); 
//定义个字符串用保存从数据库返回的数据 
string result = ""; 
//先清空输出的东西 
Response.Clear(); 
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString(); 
SqlConnection conn = new SqlConnection(connStr); 
SqlCommand comm = conn.CreateCommand(); 
string commStr = string.Format("select type_value,type_text from phone_type where parent_id = {0}",i); 
comm.CommandText = commStr; 
conn.Open(); 
SqlDataReader dr = comm.ExecuteReader(); 
while(dr.Read()) 
{ 
result += ","+dr[0].ToString() +"|" + dr[1].ToString(); 
//dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString())); 
} 
//把从数据库得到的信息输出到客户端 
Response.Write(result); 
//输出完成关闭Response,以免造成不必要的输出 
Response.Flush(); 
Response.Close(); 
dr.Close(); 
conn.Close(); 
} 
#region Web 窗体设计器生成的代码 
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) 
{ 
Response.Write(Request.Form["dListChild"].ToString()); 
} 
} 
}

赞 (0)

相关推荐

  • ASP.NET中DropDownList和ListBox实现两级联动功能

    ASP.NET中DropDownList和ListBox实现两级联动功能

    DropDownList和ListBox实现两级联动功能,它们可以将从后台数据库中搜选的出来的信息加以绑定,这里要实现的功能是在DropDownList中选择"省",然后让ListBox自动将其省份下的"市"显示出来,这就是所谓的两级联动功能,这个功能我们在很多注册网页上看见,今天就为大家解开ASP.NET神秘的面纱. 一.设置前台界面,在Web窗体中添加DropDownList和ListBox两个控件. 界面图如下所示. 二.编写后台代码 在这,后台代码编写在其窗

  • ASP.NET实现级联下拉框效果实例讲解

    ASP.NET实现级联下拉框效果实例讲解

    用ASP.NET控件实现部门和员工的联动,参考过程如下 效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

  • jQuery+Asp.Net实现省市二级联动功能的方法

    本文实例讲述了jQuery+Asp.Net实现省市二级联动功能的方法.分享给大家供大家参考,具体如下: 页面html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax.aspx.cs" Inherits="ThreeAjaxDrop_ddlAjax" %> <!DOCTYPE html PUBLIC "-//W3C//D

  • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi

  • asp.net两级联动（包含添加和修改）

    <script language="javascript" type="text/javascript"> //科目数据初始化 var subcat = new Array(); subcat[0] = new Array('0', '请选择科目', '0'); subcat[1] = new Array('x1', '语文', 'x1yw'); subcat[2] = new Array('x2', '语文', 'x2yw'); subcat[3] =

  • asp.net DropDownList 三级联动下拉菜单实现代码

    复制代码 代码如下: if (!IsPostBack) { //一级分类列表 this.DropDownList1.DataSource = dsbb.SelectSubjct1(); this.DropDownList1.DataTextField = "cName"; this.DropDownList1.DataValueField = "Ccode"; this.DropDownList1.DataBind(); this.DropDownList1.Ite

  • ASP.NET MVC下拉框联动实例解析

    ASP.NET MVC下拉框联动实例解析

    两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上           这里,我打算实现的需求是:有两个DropDownList,一个默认加载所有的省份数据,然后,当我选择省份的时候,把对应的市的数据,绑定到另外一个DropDownList上面,即实现了联动. 好了,这里不打算使用EF了,换用ADO.NET.首先新建好数据库,表: USE master GO IF EXISTS (SELECT * FROM sysdata

  • asp.net下使用AjaxPro实现二级联动代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1

  • asp.net DropDownList实现二级联动效果

    asp.net DropDownList实现二级联动效果

    最近在做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件.代码如下: <tr> <td>新闻风格:</td> <td><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True&q

  • ASP.NET Ajax级联DropDownList实现代码

    ASP.NET Ajax级联DropDownList实现代码

    了解级联DDL 那么考虑以下几种常见情景: · 用户注册时需要选择国家.省.市.地区等. · 用户购买产品时选择产品类别.产品名称.产品型号. 以上的例子有一些共同特点: · 上一级(如省)选择后下一级(如市)才可以选择. · 下一级的内容由上一级的内容决定. 像这样的一组DropDownList就是级联DDL.常见的解决方法是将带有层次的数据写入XML,然后设置DropDownList的AutoPostBack属性为"True"开启自动回调,最后处理SelectedIndexChan

随机推荐