您的位置：首页 > 运维架构

AjaxPro2省市区三级联动DropDownList

2012-11-27 14:03 351 查看

网上许多利用vs2005与AjaxPro2实现三级联动，但是许多代码不易理解，测试不好用，经过研究修改，测试成功如下代码：

首先，将AjaxPro.2.dll放入App_Code文件夹下，注意一定要用AjaxPro2的6.0版本（实测使用6.10.6），7.0版本测试不能通过。添加引用。

1、web.config中<system.web>中间加入

        

        <httpHandlers>

            <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>

        </httpHandlers>

2、Default.aspx源码：

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">

    <title>AjaxTest </title>

    <script language="javascript" type="text/javascript">



    //绑定City

    function BindToCity(ProvinceID,DDL_City_ID)

    {

        var DataSet_City = _Default.GetCityData(ProvinceID).value;//注意加Value

        var DDL_City = document.getElementById(DDL_City_ID);

        DDL_City.length = 0;//清除已有选项

        //DDL_City.options.add(new Option("--请选择--",0));

        var Length = DataSet_City.Tables[0].Rows.length;

        if(Length!=0)

        {

            for(var i=0;i <Length;i++)

            {

                var Text = DataSet_City.Tables[0].Rows[i].Text;//必须和DataSet的列名一致

                var Value = DataSet_City.Tables[0].Rows[i].Value;

                DDL_City.options.add(new Option(Text,Value));

            }

        }

        else

        {

            var DDL_Area = document.getElementById("Area");

            DDL_Area.length = 0;

        };

        return;

    }



    //绑定Area

    function BindToArea(CityID,DDL_Area_ID)

    {

        var DataSet_Area = _Default.GetAreaData(CityID).value;

        var DDL_Area = document.getElementById(DDL_Area_ID);

        DDL_Area.length = 0;

        var Length = DataSet_Area.Tables[0].Rows.length;

        for(var i=0;i <Length;i++)

        {

            var Text = DataSet_Area.Tables[0].Rows[i].Text;

            var Value = DataSet_Area.Tables[0].Rows[i].Value;

            DDL_Area.options.add(new Option(Text,Value));

        };

        return;

    }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>请选择您所在的省：

        <asp:DropDownList ID="Province" runat="server" >

        </asp:DropDownList>



        请选择您所在的市：

        <asp:DropDownList ID="City" runat="server">

        </asp:DropDownList>



        请选择您所在的区：

        <asp:DropDownList ID="Area" runat="server">

        </asp:DropDownList>

    </div>

    </form>

</body>

</html>

3、Default.aspx.cs源码如下：

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default),this);

        this.BindToDDL();

    }

    //获得DataSet方法

    private DataSet GetDS(string SqlString)

    {

        SQLHelper runsql = new SQLHelper();

        DataSet myDS=new DataSet();

        runsql.RunProc(SqlString, ref myDS, CommandType.Text);

        return myDS;

    }

    //绑定Province，并添加事件。

    private void BindToDDL()

    {

        string SQLSelect_Province = @"select * from province ";

        this.Province.DataSource = GetDS(SQLSelect_Province);

        this.Province.DataTextField = "PName";

        this.Province.DataValueField = "PrID";

        this.Province.DataBind();

        this.Province.Items.Insert(0, "--不限--");

        //this.Province.Items.Insert(0, new ListItem("--不限--","-1"));

        //在事件onchange上添加函数BindTo×××，也可以添加在onclick事件上

        this.Province.Attributes.Add("onchange", "BindToCity(this.options[selectedIndex].value,'City');");

        this.City.Attributes.Add("onchange", "BindToArea(this.options[selectedIndex].value,'Area');");

    }

    //根据省ID查询相应的城市

    [AjaxPro.AjaxMethod]

    public DataSet GetCityData(string ProvinceID)

    {

        string SQLSelect_City = @"select CIName as Text,CiID as Value from city where PrID='" + ProvinceID + "'";

        return GetDS(SQLSelect_City);

    }

    //根据城市ID查询相应的区域

    [AjaxPro.AjaxMethod]

    public DataSet GetAreaData(string CityID)

    {

        string SQLSelect_Area = @"select ScName as Text,ScID as Value from section where CiID='" + CityID + "'";

        return GetDS(SQLSelect_Area);

    }

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： C# dataset Server

相关文章推荐

新的分享

章节导航