AjaxPro.2.dll级联下拉框，省市县

AjaxPro.2.dll级联下拉框，省市县

1.说明AjaxPro.2.dll的简单使用。实现省市县级联下拉框异步刷新。
2. 首先添加引用。在bin->添加引用->添加AjaxPro.2.dll即可。
3. 修改web.config。在System.web和compilation节点之间添加。如下所示：

代码

<system.web>

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

    <compilation debug="true" targetFramework="4.0"/>

4. 在page_load先注册一下，如下所示。注意参数名字为该页面的类名称。

代码

  public partial class CascadeDropdownlist : System.Web.UI.Page
   {
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(CascadeDropdownlist));
。。。。。。

5. 添加方法。注意先要添加[AjaxPro.AjaxMethod]。而且在返回城市列表的时候本人返回的是dataset或者datatable，如果返回的是数组或者字符串之类的，那么前台控件绑定的时候会出错。本人也是初学，具体的原理不是很清楚。还望高手指教。

代码

  [AjaxPro.AjaxMethod]
    public DataSet   BindCity(string ProvinceID)
    {
        string sql = "select * from City where ProvinceID='" + ProvinceID + "'";
        db db = new db();
        DataSet ds = db.GetDataSet(sql, "city");
        db.Close();
        return ds;
    }

6. 前台页面

代码

   <body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlProvince" runat="server" >
        </asp:DropDownList>
        <asp:DropDownList ID="ddlCity" runat="server">
        </asp:DropDownList>
        <asp:DropDownList ID="ddlArea" runat="server">
        </asp:DropDownList>
    </div>
    </form>
</body>

7. JS脚本。这两个方法其实差不多，搞明白一个就基本OK了。起初将列表绑定到下拉框总想用city.Options.Add(new Option(value,text))这样的方法，结果失败了。调用不到。后来改用的下面的写法。

代码

<script language ="javascript" type ="text/javascript" >
    //根据省ID绑定市列表
        function BindCity() {
            var province = document.getElementById("ddlProvince");
            var id = province.value;
            var city = document.getElementById("ddlCity");
            city.length = 1;
            var area = document.getElementById("ddlArea");
            area.length = 1;
            var ds = CascadeDropdownlist.BindCity(id).value;
            if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                if (ds.Tables[0].Rows.length > 0) {
                    for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
                        var op = document.createElement("option");
                        op.setAttribute("value",ds.Tables[0].Rows[i]["CityID"]);
                        var txt = document.createTextNode(ds.Tables[0].Rows[i]["City"]);
                        op.appendChild(txt);
                        city.appendChild(op);
                    }
                }
            }
        }
        //根据市ID绑定县列表
           function BindArea() {
            var city = document.getElementById("ddlCity");
            var id = city.value;
            var area = document.getElementById("ddlArea");
            area.length = 1;
            var ds = CascadeDropdownlist.BindArea(id).value;
            if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                if (ds.Tables[0].Rows.length > 0) {
                    for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
                        var op = document.createElement("option");
                        op.setAttribute("value", ds.Tables[0].Rows[i]["AreaID"]);
                        var txt = document.createTextNode(ds.Tables[0].Rows[i]["Area"]);
                        op.appendChild(txt);
                        area.appendChild(op);
                    }
                }
            }
    </script>

OK，至此一个简单的小例子完成了。

【推广】免费学中医，健康全家人

原文地址：https://www.cnblogs.com/janes/p/1796609.html