实现无刷新DropDownList联动效果
生活随笔
收集整理的這篇文章主要介紹了
实现无刷新DropDownList联动效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在做一個文章添加功能時，想在選擇大類后，自動將其所屬二級小類顯示出來，使用DropDownList的SelectedIndexChanged事件可以很容易實現，但每次選擇后頁面總要刷新一次，讓人感覺很不爽。為實現DropDownList無刷新二級聯動，這幾天在網上找了些資料，但都無法達到我想要的效果，經過反復調試，現已基本實現了此功能，現將代碼附下。
一、數據庫設計：
二、設計步驟：
1、首先，我們新建一個頁面DropTest.aspx，在其中放入兩個DropDownList控件：DropDownList1和DropDownList2，其完整代碼如下：
<%@ Page language="c#" Codebehind="DropTest.aspx.cs" AutoEventWireup="false" Inherits="studyWEB.DropTest" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
?<HEAD>
??<title>WebForm2</title>
??<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
??<meta content="C#" name="CODE_LANGUAGE">
??<meta content="JavaScript" name="vs_defaultClientScript">
??<meta content=" http://schemas.microsoft.com/intellisense/ie5 " name="vs_targetSchema">
??<script>
????? function load(ClassID){?????????? //ClassID為接收傳遞的大類編號
????? var drp2 = document.getElementById("DropDownList2");
????? function RemoveAll(oElem) {?????????????//清除DropDownList2的所有項
????? var i = 0;
????? for (i = oElem.length; i >= 0; i--){
????? oElem.options.remove(i);
????? }
????? }
????? RemoveAll(drp2)?
?????? var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
?????? var oDoc = new ActiveXObject("MSXML2.DOMDocument");
?????? oHttpReq.open("POST", "DropChild.aspx?ClassID="+ClassID, false);?????????//調用讀取小類數據的頁面，將大類
?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? //?編號值傳遞過去
?????? oHttpReq.send("");
?????? result = oHttpReq.responseText;
?????? oDoc.loadXML(result);
?????? items1 = oDoc.selectNodes("//CLASSNAME/Table/ClassName");??????????????//讀取所有請求大類所屬小類的類名
?????? items2 = oDoc.selectNodes("//CLASSNAME/Table/ClassID");?????????????????? //讀取所有請求大類所屬小類的編號
?????? var itemsLength=items1.length;
?????? for(i=0;i<itemsLength;i++)?????????????????????????????????????????????????????????????????//將小類的類名和編號賦予DropDownList2
?? {
????? var newOption = document.createElement("OPTION");
????? newOption.text=items1[i].text;
????? newOption.value=items2[i].text;
????? drp2.options.add(newOption);
?? }
????? }
??</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" BorderStyle="None" ForeColor="White" BorderColor="White"></asp:TextBox>
???<asp:Label id="Label1" runat="server"></asp:Label>
???<asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
??</form>
?</body>
</HTML>
該頁面的后臺文件（DropDownList1.aspx.cs）中Page_Load內的代碼如下：
if(!this.IsPostBack)
???{
????SqlConnection con = new SqlConnection("server=localhost;database=gswebDB;uid=sa;pwd=;");
????SqlDataAdapter da = new SqlDataAdapter("select ClassName,ClassID from classname where ClassLevel=1",con);
????DataSet ds = new DataSet();
????da.Fill(ds);
????this.DropDownList1.DataSource=ds.Tables[0].DefaultView;
????this.DropDownList1.DataTextField = "ClassName";
????this.DropDownList1.DataValueField = "ClassID";
????this.DropDownList1.DataBind();
????this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");? //將ClassID作為參數傳遞給腳本函數load(ClassID)，如果要傳遞的是ClassName，應將value改為innerText，但如果大類為中文，則調用小類時出現無法顯示的問題
???//?this.DropDownList2.Attributes.Add("onChange","javascript:document.Form1.TH.value=this.options[this.selectedIndex].value;");?? //讀取DropDownList2的值，將其賦給一個TextBox控件TH，以獲取DropDownList2的值，為獲取DropDownList2的值，網上有人說可通過使用隱藏的TextBox控件來獲取，我未能實現，因為在客戶端隱藏的TextBox控件也是不可用腳本來訪問的，沒法給其賦值，我只能通過將其樣式、字體顏色設于背景相同來達到隱藏效果，這是一個很笨的方法，有誰有好的方法，請幫我。
???}
此頁面實現如下功能：首先從數據庫內讀取所有類級別為1（即大類）的類名和類編號，綁定到DropDownList1控件上；然后通過DropDownList1的Attributes屬性調用javascript函數load(ClassID)；load()函數通過調用DropChild.aspx頁面，讀取XML流，得到大類所屬小類的ClassName和ClassID。
2、新建DropChild.aspx頁面文件，其中不插入任何控件和文本，只在其后臺文件（DropChild.aspx.cs）中的Page_Load中加入以下代碼：
if(this.Request["ClassID"]!=null)
???{
????int state = Convert.ToInt32(this.Request["ClassID"]);
????SqlConnection con = new SqlConnection("server=localhost;database=gswebDB;uid=sa;pwd=;");
????SqlDataAdapter da = new SqlDataAdapter("select ClassName,ClassID from classname where UpClassID='"+state+"'",con);
????DataSet ds = new DataSet("CLASSNAME");
????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();
?????? 該方法得到用戶選擇的大類的編號，通過查詢以后得到一個DataSet對象，使用該對象的WriteXML方法直接將內容寫到Response.OutputStream里面然后傳遞到客戶端，客戶端的load方法通過result =oHttpReq.responseText;句話得到一個XML字符串，最后解析此串。
??? ??? 另外，測試獲取DropDownList2值，添加了TextBox控件TH，當點擊Button時，處理事件代碼如下：
private void Button1_Click(object sender, System.EventArgs e)
??{
???Label1.Text=TH.Text;
??}
一、數據庫設計：
| 字段名 | 數據類型 | 說明 |
| ClassID | 自動編號 | 類編號 |
| ClassName???? | varchar(8) | 類名 |
| UpClassID | int(4) | 上級類編號 |
| ClassLevel | int(4) | 類級別，1為大類，2為小類 |
二、設計步驟：
1、首先，我們新建一個頁面DropTest.aspx，在其中放入兩個DropDownList控件：DropDownList1和DropDownList2，其完整代碼如下：
<%@ Page language="c#" Codebehind="DropTest.aspx.cs" AutoEventWireup="false" Inherits="studyWEB.DropTest" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
?<HEAD>
??<title>WebForm2</title>
??<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
??<meta content="C#" name="CODE_LANGUAGE">
??<meta content="JavaScript" name="vs_defaultClientScript">
??<meta content=" http://schemas.microsoft.com/intellisense/ie5 " name="vs_targetSchema">
??<script>
????? function load(ClassID){?????????? //ClassID為接收傳遞的大類編號
????? var drp2 = document.getElementById("DropDownList2");
????? function RemoveAll(oElem) {?????????????//清除DropDownList2的所有項
????? var i = 0;
????? for (i = oElem.length; i >= 0; i--){
????? oElem.options.remove(i);
????? }
????? }
????? RemoveAll(drp2)?
?????? var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
?????? var oDoc = new ActiveXObject("MSXML2.DOMDocument");
?????? oHttpReq.open("POST", "DropChild.aspx?ClassID="+ClassID, false);?????????//調用讀取小類數據的頁面，將大類
?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? //?編號值傳遞過去
?????? oHttpReq.send("");
?????? result = oHttpReq.responseText;
?????? oDoc.loadXML(result);
?????? items1 = oDoc.selectNodes("//CLASSNAME/Table/ClassName");??????????????//讀取所有請求大類所屬小類的類名
?????? items2 = oDoc.selectNodes("//CLASSNAME/Table/ClassID");?????????????????? //讀取所有請求大類所屬小類的編號
?????? var itemsLength=items1.length;
?????? for(i=0;i<itemsLength;i++)?????????????????????????????????????????????????????????????????//將小類的類名和編號賦予DropDownList2
?? {
????? var newOption = document.createElement("OPTION");
????? newOption.text=items1[i].text;
????? newOption.value=items2[i].text;
????? drp2.options.add(newOption);
?? }
????? }
??</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" BorderStyle="None" ForeColor="White" BorderColor="White"></asp:TextBox>
???<asp:Label id="Label1" runat="server"></asp:Label>
???<asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
??</form>
?</body>
</HTML>
該頁面的后臺文件（DropDownList1.aspx.cs）中Page_Load內的代碼如下：
if(!this.IsPostBack)
???{
????SqlConnection con = new SqlConnection("server=localhost;database=gswebDB;uid=sa;pwd=;");
????SqlDataAdapter da = new SqlDataAdapter("select ClassName,ClassID from classname where ClassLevel=1",con);
????DataSet ds = new DataSet();
????da.Fill(ds);
????this.DropDownList1.DataSource=ds.Tables[0].DefaultView;
????this.DropDownList1.DataTextField = "ClassName";
????this.DropDownList1.DataValueField = "ClassID";
????this.DropDownList1.DataBind();
????this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");? //將ClassID作為參數傳遞給腳本函數load(ClassID)，如果要傳遞的是ClassName，應將value改為innerText，但如果大類為中文，則調用小類時出現無法顯示的問題
???//?this.DropDownList2.Attributes.Add("onChange","javascript:document.Form1.TH.value=this.options[this.selectedIndex].value;");?? //讀取DropDownList2的值，將其賦給一個TextBox控件TH，以獲取DropDownList2的值，為獲取DropDownList2的值，網上有人說可通過使用隱藏的TextBox控件來獲取，我未能實現，因為在客戶端隱藏的TextBox控件也是不可用腳本來訪問的，沒法給其賦值，我只能通過將其樣式、字體顏色設于背景相同來達到隱藏效果，這是一個很笨的方法，有誰有好的方法，請幫我。
???}
此頁面實現如下功能：首先從數據庫內讀取所有類級別為1（即大類）的類名和類編號，綁定到DropDownList1控件上；然后通過DropDownList1的Attributes屬性調用javascript函數load(ClassID)；load()函數通過調用DropChild.aspx頁面，讀取XML流，得到大類所屬小類的ClassName和ClassID。
2、新建DropChild.aspx頁面文件，其中不插入任何控件和文本，只在其后臺文件（DropChild.aspx.cs）中的Page_Load中加入以下代碼：
if(this.Request["ClassID"]!=null)
???{
????int state = Convert.ToInt32(this.Request["ClassID"]);
????SqlConnection con = new SqlConnection("server=localhost;database=gswebDB;uid=sa;pwd=;");
????SqlDataAdapter da = new SqlDataAdapter("select ClassName,ClassID from classname where UpClassID='"+state+"'",con);
????DataSet ds = new DataSet("CLASSNAME");
????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();
?????? 該方法得到用戶選擇的大類的編號，通過查詢以后得到一個DataSet對象，使用該對象的WriteXML方法直接將內容寫到Response.OutputStream里面然后傳遞到客戶端，客戶端的load方法通過result =oHttpReq.responseText;句話得到一個XML字符串，最后解析此串。
??? ??? 另外，測試獲取DropDownList2值，添加了TextBox控件TH，當點擊Button時，處理事件代碼如下：
private void Button1_Click(object sender, System.EventArgs e)
??{
???Label1.Text=TH.Text;
??}
總結
以上是生活随笔為你收集整理的实现无刷新DropDownList联动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用 .NET 对事件进行编程
- 下一篇： ASP.NET中的页面指示标识