Ajax簡單示例之改變下拉框動態生成表格
		
          
		

          


          1.建立一個aspx頁面，html代碼
          

          <html xmlns="http://www.w3.org/1999/xhtml" >
          <head runat="server">
              <title>Untitled Page</title>
              <script type="text/javascript">
                  var xmlHttp;

                  function createXMLHttpRequest() 
                  {
                      if (window.ActiveXObject) 
                      {
                          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                      } 
                      else if (window.XMLHttpRequest) 
                      {
                          xmlHttp = new XMLHttpRequest();
                      }
                  }
                      
                  function startRequest() 
                  {
                      //debugger;
                      var ProvinceID=document.getElementById("DropDownList1");           
                      createXMLHttpRequest();
                      xmlHttp.onreadystatechange = handleStateChange;
                      xmlHttp.open("GET", "?ProvinceID="+ProvinceID.value, true);
                      xmlHttp.send(null);
                  }
                      
                  function handleStateChange() 
                  {
                      if(xmlHttp.readyState == 4) //0(未初始化);1(正在裝載);2 (裝載完畢);3 (交互中);4 (完成) 
                      {
                          if(xmlHttp.status == 200) //200(OK);404(not found)
                          {
                              document.getElementById("gridiv").innerHTML=xmlHttp.responseText;
                          }
                      }
                  }
                  </script>
          </head>
          <body>
              <form id="form1" runat="server">
              <div>
                  <asp:DropDownList ID="DropDownList1" runat="server">
                  </asp:DropDownList>   
              </div>
              <div id ="gridiv"></div>
              </form>
          </body>
          </html>
          
2.cs代碼
          

          using System.Data.SqlClient;
          

          

          protected void Page_Load(object sender, EventArgs e)
              {
                  if (!Page.IsPostBack)
                  {
                      this.DropDownList1.Attributes.Add("onchange", "return startRequest();");
                      ListProvince();
                      if (ProvinceID != "")
                      {
                          GetCityByProvinceID(ProvinceID);
                      }
                  }
              }

              property#region property
              private string ProvinceID
              {
                  get
                  {
                      if (Request["ProvinceID"] != null && Request["ProvinceID"].ToString() != "")
                      {
                          return Request["ProvinceID"];
                      }
                      else
                      {
                          return "";
                      }
                  }
              }
              #endregion

              GetDataSet#region GetDataSet
              private DataSet GetDataSet(string sql)
              {
                  string constring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
                  SqlDataAdapter    sda =new SqlDataAdapter(sql,constring);
                  DataSet ds=new DataSet();
                  sda.Fill(ds);
                  return ds;
              }
              #endregion

              GetCityByProvinceID#region GetCityByProvinceID
              private void GetCityByProvinceID(string ProvinceID)
              {
                  string connStr = ConfigurationSettings.AppSettings["ConnectionString"];
                  SqlConnection conn = new SqlConnection(connStr);
                  string sql = "select * from city where father='" + ProvinceID + "'";
                  SqlCommand cmd = new SqlCommand(sql, conn);
                  conn.Open();
                  SqlDataReader dr = cmd.ExecuteReader();

                  string s = @"<table cellspacing='0' cellpadding='4' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>";
                  s+="<tr style='color:White;background-color:#990000;font-weight:bold;'>";
                      s+="<th scope='col'>流水號</th><th scope='col'>代號</th><th scope='col'>城市</th></tr>";
                  int m = 0;
                  while (dr.Read())
                  {
                      if (m % 2 == 0)
                      {
                          s += "<tr style='color:#333333;background-color:#FFFBD6;'>";
                      }
                      else
                      {
                          s += "<tr style='color:#333333;background-color:White;'>";
                      }
                      m++;
                      s += "<td>" + dr["id"] + "</td>";
                      s += "<td>" + dr["cityID"] + "</td>";
                      s += "<td>" + dr["city"] + "</td>";
                      s += "</tr>";
                  }        
                  s+="</table>";
                  dr.Close();
                  conn.Close();
                  this.Response.Write(s);
                  this.Response.End();
              }
              #endregion

              ListProvince#region ListProvince
              private void ListProvince()
              {
                  string sql = "select * from province";
                  DataSet ds = GetDataSet(sql);
                  DropDownList1.DataSource = ds;
                  DropDownList1.DataTextField = "province";
                  DropDownList1.DataValueField = "provinceID";
                  DropDownList1.DataBind();
              }
              #endregion
          
3.示例數據庫下載area1.rar

          

          
		
          
			posted on 2007-06-20 13:26 chenguo 閱讀(345) 評論(0)  編輯  收藏  所屬分類: AJAX Dev 
		
          
	
          
	
	


	


          
	    
    




          








          

				
				

			
          
			
          
				
					
          
	
          
		
          <2025年7月>
          
	
          日一二三四五六
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789
          

          

					

          導航
          

					

          統計
          
	
					
					

          留言簿
          


		
          隨筆分類(1)
          
		
				
			
	
		
          文章分類(52)
          
		
				
			
	
		
          好友 小山的博客
          
		
				
			
	


          最新隨筆
          



          最新評論
	
          

          
	
			
		

          

				
			
          
			
			
			
			
			 

	

    







          
        
	




主站蜘蛛池模板：
六盘水市|
尼勒克县|
儋州市|
利辛县|
大丰市|
潮安县|
泰来县|
无为县|
微山县|
子长县|
修水县|
确山县|
萨嘎县|
荔波县|
额济纳旗|
永年县|
彭州市|
丰县|
化隆|
西充县|
上思县|
沾化县|
长泰县|
依兰县|
盖州市|
佳木斯市|
延吉市|
绍兴市|
遵化市|
三门峡市|
科技|
临湘市|
长海县|
南投县|
宁化县|
徐闻县|
德保县|
伊宁县|
新平|
秦皇岛市|
梅河口市|