DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax簡單示例之改變下拉框動態生成表格
Ajax簡單示例之改變下拉框動態生成表格
編輯: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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved