C#中的ajax例子

来源：互联网发布：在日本护肤品档次知乎编辑：程序博客网时间：2024/05/22 15:25

web.config 配置：

</httpHandlers>

前台代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ajax demo</title>
<SCRIPT language="javascript">
        //城市------------------------------
        function cityResult() {
            var city = document.getElementById("DropDownList1");
            WebForm.GetCityList(city.value, get_city_Result_CallBack);
        }
        function get_city_Result_CallBack(response) {
            if (response.value != null) {
                //debugger;
                document.all("DropDownList2").length = 0;
                var ds = response.value;
                if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                    for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
                        var name = ds.Tables[0].Rows[i].city;
                        var id = ds.Tables[0].Rows[i].cityID;
                        document.all("DropDownList2").options.add(new Option(name, id));
                    }
                }
            }
            return
        }
        //市区----------------------------------------
        function areaResult() {
            var area = document.getElementById("DropDownList2");
            WebForm.GetAreaList(area.value, get_area_Result_CallBack);
        }
        function get_area_Result_CallBack(response) {
            if (response.value != null) {
                document.all("DropDownList3").length = 0;
                var ds = response.value;
                if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                    for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
                        var name = ds.Tables[0].Rows[i].area;
                        var id = ds.Tables[0].Rows[i].areaID;
                        document.all("DropDownList3").options.add(new Option(name, id));
                    }
                }
            }
            return
        }
        function getData() {
            var province = document.getElementById("DropDownList1");
            var pindex = province.selectedIndex;
            var pValue = province.options[pindex].value;
            var pText = province.options[pindex].text;
            var city = document.getElementById("DropDownList2");
            var cindex = city.selectedIndex;
            var cValue = city.options[cindex].value;
            var cText = city.options[cindex].text;

            var area = document.getElementById("DropDownList3");
            var aindex = area.selectedIndex;
            var aValue = area.options[aindex].value;
            var aText = area.options[aindex].text;
            var txt = document.getElementById("TextBox1");
            document.getElementById("<%=TextBox1.ClientID%>").innerText = "省:" + pValue + "|" + pText + "市:" + cValue + "|" + cText + "区:" + aValue + "|" + aText;
        }
</SCRIPT>
</head>
<body ms_positioning="GridLayout">
        <form id="Form1" method="post" runat="server">
            <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1" cellPadding="1" width="300" border="1" bgColor="#ccff66">
                <TR>
                    <TD>省市</TD>
                    <TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
                </TR>
                <TR>
                    <TD>城市</TD>
                    <TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
                </TR>
                <TR>
                    <TD>市区</TD>
                    <TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
                </TR>
            </TABLE>
            <asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server" Width="424px"></asp:TextBox>
            <INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px" type="button" value="test" onclick="getData();">
        </form>
    </body>
</html>

后台代码：

public partial class WebForm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm));
            if (!Page.IsPostBack)
            {
                this.DropDownList1.DataSource = WebForm.GetProvinceList();
                this.DropDownList1.DataTextField = "province";
                this.DropDownList1.DataValueField = "provinceID";
                this.DropDownList1.DataBind();

                this.DropDownList1.Attributes.Add("onchange", "cityResult();");
                this.DropDownList2.Attributes.Add("onchange", "areaResult();");
            }
        }
        #region GetProvinceList
        public static DataSet GetProvinceList()
        {
            DataTable dt = new DataTable();
            DataColumn dc;
            dc = new DataColumn("provinceID", System.Type.GetType("System.Int16"));
            dt.Columns.Add(dc);
            dc = new DataColumn("province", System.Type.GetType("System.String"));
            dt.Columns.Add(dc);

            DataRow dr = dt.NewRow();
            dr["provinceID"] = 1; dr["province"] = "河北"; dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["provinceID"] = 2; dr["province"] = "河南"; dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["provinceID"] = 3; dr["province"] = "江西";
            dt.Rows.Add(dr);

            DataSet Result_ds = new DataSet();
            Result_ds.Tables.Add(dt);
            return Result_ds;
        }
        #endregion
        #region GetCityList
        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
        public DataSet GetCityList(int provinceid)
        {
            DataTable dt = new DataTable();
            DataColumn dc;
            dc = new DataColumn("cityID", System.Type.GetType("System.Int16"));
            dt.Columns.Add(dc);
            dc = new DataColumn("city", System.Type.GetType("System.String"));
            dt.Columns.Add(dc);
            DataRow dr = null;
            switch (provinceid)
            {
                case 1:
                    dr = dt.NewRow();
                    dr["cityID"] = 1; dr["city"] = "沧州";dt.Rows.Add(dr);
                    dr = dt.NewRow();
                    dr["cityID"] = 2; dr["city"] = "泊头";dt.Rows.Add(dr);
                    break;
                case 2:
                    dr = dt.NewRow();
                    dr["cityID"] = 3; dr["city"] = "商丘";dt.Rows.Add(dr);
                    dr = dt.NewRow();
                    dr["cityID"] = 4; dr["city"] = "周口";dt.Rows.Add(dr);
                    break;
                case 3:
                    dr = dt.NewRow();
                    dr["cityID"] = 5; dr["city"] = "南昌";dt.Rows.Add(dr);
                    dr = dt.NewRow();
                    dr["cityID"] = 6; dr["city"] = "九江";dt.Rows.Add(dr);
                    break;
            }
            DataSet Result_ds = new DataSet();
            Result_ds.Tables.Add(dt);
            return Result_ds;
        }
        #endregion

        #region GetAreaList
        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
        public DataSet GetAreaList(int cityid)
        {
            DataTable dt = new DataTable();
            DataColumn dc;
            dc = new DataColumn("areaID", System.Type.GetType("System.Int16"));
            dt.Columns.Add(dc);
            dc = new DataColumn("area", System.Type.GetType("System.String"));
            dt.Columns.Add(dc);
            DataRow dr = null;
            switch (cityid)
            {
                case 1:
                    dr = dt.NewRow();
                    dr["areaID"] = 1; dr["area"] = "沧州村"; dt.Rows.Add(dr);
                    break;
                case 2:
                    dr = dt.NewRow();
                    dr["areaID"] = 2; dr["area"] = "泊头村"; dt.Rows.Add(dr);
                    break;
                case 3:
                    dr = dt.NewRow();
                    dr["areaID"] = 3; dr["area"] = "商丘村"; dt.Rows.Add(dr);
                    break;
                case 4:
                    dr = dt.NewRow();
                    dr["areaID"] = 4; dr["area"] = "周口村"; dt.Rows.Add(dr);
                    break;
                case 5:
                    dr = dt.NewRow();
                    dr["areaID"] = 5; dr["area"] = "南昌村"; dt.Rows.Add(dr);
                    break;
                case 6:
                    dr = dt.NewRow();
                    dr["areaID"] = 6; dr["area"] = "九江村"; dt.Rows.Add(dr);
                    break;
            }
            DataSet Result_ds = new DataSet();
            Result_ds.Tables.Add(dt);
            return Result_ds;
        }
        #endregion

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