• 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,至此一个简单的小例子完成了。

  • 相关阅读:
    webpack 报错(Cannot find moudle ‘webpack-cliinconfig-yargs‘)
    js图片压缩推荐
    Object.assign()更新对象
    poj 2063完全背包
    poj 3592 缩点+SPFA
    hdu2546 01背包 重学背包
    hdu 2503 1713 1108 最小公倍数&最大公约数
    poj3249 拓扑排序+DP
    poj2914无向图的最小割模板
    poj2942(双联通分量,交叉染色判二分图)
  • 原文地址:https://www.cnblogs.com/janes/p/1796609.html
Copyright © 2020-2023  润新知