ASP.NET無重新整理二級聯動下拉式清單,同樣適用與firefox

來源:互聯網
上載者:User

 

  可能"極好的"又會帶來很多的非議,但是我認為這確實很好,我看了大約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 Form設計器產生的程式碼
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 該調用是 ASP.NET Web Form設計器所必需的。
   //
   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());
  }
 }
}

資料表:
主鍵id     parent_id(int)          type_value(int)     type_text(varchar)
int遞增   父下拉框的value值        下拉框的value        下拉框的text

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.