適用與firefox ASP.NET無刷新二級聯(lián)動下拉列表
更新時間:2007年08月18日 22:50:58 作者:
可能"極好的"又會帶來很多的非議,但是我認(rèn)為這確實很好,我看了大約20個無刷新的連動下拉列表,他們在firefox下面就一團糟.為了這個我差不多搞了兩天,就是如果提交窗體后如何保持第二個列表框的值,因為通過js 給下拉框添加條目那么他的狀態(tài)是不會被保存的測試平臺:ie6,firefox
功能:二級無刷新連動
特點:跨瀏覽器;提交窗體取第二下拉框的值;數(shù)據(jù)來源于數(shù)據(jù)庫;以xmlhttp來發(fā)送請求,實現(xiàn)無刷新
請求:如果您能夠找到更好的方法請告訴我,非常感謝,您的批評和建議對我是莫大的鼓勵
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函數(shù)會根據(jù)不同的瀏覽器初始化個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函數(shù)是父列表框改變的時候調(diào)用,參數(shù)是選擇的條目
function Go(obj)
{
//得到選擇框的下拉列表的value
var svalue = obj.value;
//定義要處理數(shù)據(jù)的頁面
var weburl = "webform1.aspx?parent_id="+svalue;
//初始化個xmlhttp對象
var xmlhttp = jb();
//提交數(shù)據(jù),第一個參數(shù)最好為get,第三個參數(shù)最好為true
xmlhttp.open("get",weburl,true);
// alert(xmlhttp.responseText);
//如果已經(jīng)成功的返回了數(shù)據(jù)
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)//4代表成功返回數(shù)據(jù)
{
var result = xmlhttp.responseText;//得到服務(wù)器返回的數(shù)據(jù)
//先清空dListChild的所有下拉項
document.getElementById("dListChild").length = 0;
//給dListChild加個全部型號的,注意是Option不是option
document.getElementById("dListChild").options.add(new Option("全部型號","0"));
if(result!="")//如果返回的數(shù)據(jù)不是空
{
//把收到的字符串按照,分割成數(shù)組
var allArray = result.split(",");
//循環(huán)這個數(shù)組,注意是從1開始,因為收到的字符串第一個字符是,號,所以分割后第一個數(shù)組為空
for(var i=1;i<allArray.length;i++)
{
//在把這個字符串按照|分割成數(shù)組
var thisArray = allArray[i].split("|");
//為dListChild添加條目
document.getElementById("dListChild").options.add(new Option(thisArray[1].toString(),thisArray[0].toString()));
}
}
}
}
//發(fā)送數(shù)據(jù),請注意順序和參數(shù),參數(shù)一定為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也綁定數(shù)據(jù)庫,后面想沒必要
//if(!IsPostBack)
//{
//綁定父dListParent
// BindParent();
//}
//獲得傳遞過來的parent_id值,如果是第一次請求他為null
string str = Request.QueryString["parent_id"];
string str1 = dListParent.SelectedValue;;
Response.Write(str1);
//如果str加個字符串!=原來的字符串則說明觸發(fā)過dListParent的onchange事件
if((str+"abc")!="abc")
{
//綁定 dListChild控件
BindChild(str);//把傳來的父DropDownList的value做為參數(shù)
}
else
BindParent(str1);
}
protected void BindParent(string str)
{
//如果是第一次請求或者是刷新這個頁面則根據(jù)dListParent的值來選擇
//把參數(shù)轉(zhuǎn)化成int
int i = Convert.ToInt32(str);
dListChild.Items.Clear();
dListChild.Items.Add(new ListItem("全部型號","0"));
//得到數(shù)據(jù)庫連接字符串
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
//初始化個conn對象
SqlConnection conn = new SqlConnection(connStr);
//數(shù)據(jù)庫語句
string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i);
//建立數(shù)據(jù)庫命令對象
SqlCommand comm = new SqlCommand(commStr,conn);
//打開數(shù)據(jù)庫
conn.Open();
//執(zhí)行命令
SqlDataReader dr = comm.ExecuteReader();
//循環(huán)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;
//添加下面這話的意思是當(dāng)點提交按鈕提交窗體的時候第二個dListChild的狀態(tài)能夠得到保存
dListChild.SelectedValue = Request.Form["dListChild"];
dr.Close();
conn.Close();
}
protected void BindChild(string str)
{
//通過js給包括dropdownlist任何控件添加的內(nèi)容不會被保存狀態(tài)
//把參數(shù)轉(zhuǎn)化成int
int i = Convert.ToInt32(str);
//定義個字符串用保存從數(shù)據(jù)庫返回的數(shù)據(jù)
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()));
}
//把從數(shù)據(jù)庫得到的信息輸出到客戶端
Response.Write(result);
//輸出完成關(guān)閉Response,以免造成不必要的輸出
Response.Flush();
Response.Close();
dr.Close();
conn.Close();
}
#region Web 窗體設(shè)計器生成的代碼
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 設(shè)計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內(nèi)容。
/// </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());
}
}
}
功能:二級無刷新連動
特點:跨瀏覽器;提交窗體取第二下拉框的值;數(shù)據(jù)來源于數(shù)據(jù)庫;以xmlhttp來發(fā)送請求,實現(xiàn)無刷新
請求:如果您能夠找到更好的方法請告訴我,非常感謝,您的批評和建議對我是莫大的鼓勵
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函數(shù)會根據(jù)不同的瀏覽器初始化個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函數(shù)是父列表框改變的時候調(diào)用,參數(shù)是選擇的條目
function Go(obj)
{
//得到選擇框的下拉列表的value
var svalue = obj.value;
//定義要處理數(shù)據(jù)的頁面
var weburl = "webform1.aspx?parent_id="+svalue;
//初始化個xmlhttp對象
var xmlhttp = jb();
//提交數(shù)據(jù),第一個參數(shù)最好為get,第三個參數(shù)最好為true
xmlhttp.open("get",weburl,true);
// alert(xmlhttp.responseText);
//如果已經(jīng)成功的返回了數(shù)據(jù)
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)//4代表成功返回數(shù)據(jù)
{
var result = xmlhttp.responseText;//得到服務(wù)器返回的數(shù)據(jù)
//先清空dListChild的所有下拉項
document.getElementById("dListChild").length = 0;
//給dListChild加個全部型號的,注意是Option不是option
document.getElementById("dListChild").options.add(new Option("全部型號","0"));
if(result!="")//如果返回的數(shù)據(jù)不是空
{
//把收到的字符串按照,分割成數(shù)組
var allArray = result.split(",");
//循環(huán)這個數(shù)組,注意是從1開始,因為收到的字符串第一個字符是,號,所以分割后第一個數(shù)組為空
for(var i=1;i<allArray.length;i++)
{
//在把這個字符串按照|分割成數(shù)組
var thisArray = allArray[i].split("|");
//為dListChild添加條目
document.getElementById("dListChild").options.add(new Option(thisArray[1].toString(),thisArray[0].toString()));
}
}
}
}
//發(fā)送數(shù)據(jù),請注意順序和參數(shù),參數(shù)一定為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也綁定數(shù)據(jù)庫,后面想沒必要
//if(!IsPostBack)
//{
//綁定父dListParent
// BindParent();
//}
//獲得傳遞過來的parent_id值,如果是第一次請求他為null
string str = Request.QueryString["parent_id"];
string str1 = dListParent.SelectedValue;;
Response.Write(str1);
//如果str加個字符串!=原來的字符串則說明觸發(fā)過dListParent的onchange事件
if((str+"abc")!="abc")
{
//綁定 dListChild控件
BindChild(str);//把傳來的父DropDownList的value做為參數(shù)
}
else
BindParent(str1);
}
protected void BindParent(string str)
{
//如果是第一次請求或者是刷新這個頁面則根據(jù)dListParent的值來選擇
//把參數(shù)轉(zhuǎn)化成int
int i = Convert.ToInt32(str);
dListChild.Items.Clear();
dListChild.Items.Add(new ListItem("全部型號","0"));
//得到數(shù)據(jù)庫連接字符串
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
//初始化個conn對象
SqlConnection conn = new SqlConnection(connStr);
//數(shù)據(jù)庫語句
string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i);
//建立數(shù)據(jù)庫命令對象
SqlCommand comm = new SqlCommand(commStr,conn);
//打開數(shù)據(jù)庫
conn.Open();
//執(zhí)行命令
SqlDataReader dr = comm.ExecuteReader();
//循環(huán)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;
//添加下面這話的意思是當(dāng)點提交按鈕提交窗體的時候第二個dListChild的狀態(tài)能夠得到保存
dListChild.SelectedValue = Request.Form["dListChild"];
dr.Close();
conn.Close();
}
protected void BindChild(string str)
{
//通過js給包括dropdownlist任何控件添加的內(nèi)容不會被保存狀態(tài)
//把參數(shù)轉(zhuǎn)化成int
int i = Convert.ToInt32(str);
//定義個字符串用保存從數(shù)據(jù)庫返回的數(shù)據(jù)
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()));
}
//把從數(shù)據(jù)庫得到的信息輸出到客戶端
Response.Write(result);
//輸出完成關(guān)閉Response,以免造成不必要的輸出
Response.Flush();
Response.Close();
dr.Close();
conn.Close();
}
#region Web 窗體設(shè)計器生成的代碼
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 設(shè)計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內(nèi)容。
/// </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());
}
}
}
您可能感興趣的文章:
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- ASP.NET MVC下拉框聯(lián)動實例解析
- asp.net DropDownList實現(xiàn)二級聯(lián)動效果
- ASP.NET中DropDownList和ListBox實現(xiàn)兩級聯(lián)動功能
- asp.net下使用AjaxPro實現(xiàn)二級聯(lián)動代碼
- asp.net DropDownList 三級聯(lián)動下拉菜單實現(xiàn)代碼
- asp.net兩級聯(lián)動(包含添加和修改)
- ASP.NET實現(xiàn)級聯(lián)下拉框效果實例講解
- ASP.NET Ajax級聯(lián)DropDownList實現(xiàn)代碼
- jQuery+Asp.Net實現(xiàn)省市二級聯(lián)動功能的方法
相關(guān)文章
實例解析Java中的synchronized關(guān)鍵字與線程安全問題
首先要清楚的是synchronized鎖住的不是代碼而是對象,因而在編寫相關(guān)的代碼塊時要注意線程同步安全問題,下面就來以實例解析Java中的synchronized關(guān)鍵字與線程安全問題2016-06-06.NET讀寫Excel工具Spire.Xls使用 Excel單元格控制(3)
這篇文章主要為大家詳細(xì)介紹了.NET讀寫Excel工具Spire.Xls使用,Excel單元格控制,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11asp.net 動態(tài)生成rdlc報表(原創(chuàng))
因為公司需求 研究微軟的Reportviewer 因為有許多特別要求所以動態(tài)調(diào)用 比較靈活 我的需求是 根據(jù)數(shù)據(jù)不同的合并表頭 (參考了隨心所欲的博客文檔 再次表示感謝)2011-12-12C# FTP,GetResponse(),遠(yuǎn)程服務(wù)器返回錯誤
C# FTP,GetResponse(),遠(yuǎn)程服務(wù)器返回錯誤:(550) 文件不可用(例如,未找到文件,無法訪問文件)2009-06-06