Ajax简单示例之改变下拉框动态生成表格

晨曦之光 发布于 2012/03/09 15:07
阅读 294
收藏 0


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);
            }

        }

    }


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

            
else
            
{
                
return "";
            }

        }

    }

    
#endregion


    
#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


    
#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 = ;
        
while (dr.Read())
        
{
            
if (m % 2 == )
            
{
                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


    
#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
 
原文链接:http://blog.csdn.net/21aspnet/article/details/1534284
加载中
返回顶部
顶部