zoukankan      html  css  js  c++  java
  • 如何在用户控件里联动Dropdownlist

     

    这几天做项目过程中,发现要在用户控件里做一个无刷新的Dropdownlist联动效果时遇到了些问题,现在终于将问题解决了,因此写出来与大家分享一下,呵呵,也许这里的高手们都已知道这问题是如何解决的了,不过为了让自己也留下些印象,还是决定在此献丑了!

    要实现无刷新效果,相信大家都会马上想到AJAX,不错,我现在就是用AJAXPRO来完成的,其实我之前一直解决不了的一个问题就是在用户控件里调用JavaScript获取页面的控件ID,大家都知道如果是在一般的ASPX页面,要获取控件只需要使用

    Document.getElementById(ControlID);

    就可以获取所需的控件了,不过如果是使用用户控件,然后在另一个页面调用此用户控件,那么直接使用上面的方法就获取不了用户控件页面里的子控件了,我想这应该是由于用户控件被另一页面调用,而其实并不属于那个页面的,所以每次用此方法获取时,都会提示“缺少对象”的错误。

    要在用户控件页面里要获取其里面的控件,可以用以下的方法:

    var id = '<%=this. ControlID.ClientID%>';

    var Object=document.getElementById(id);

    通过上面2句,就可以获取实际用户控件页面里的子控件了!

    以下是我的部分实现代码,主要是完成了省份与城市的联动:(关于数据绑定的代码我就不写出来了,在此只写出相关性的代码)

    CS
    文件:

    1、先注册一个AJAXPro组件,然后绑定DropDownList控件的数据,其加上JS的事件

     1private void Page_Load(object sender, System.EventArgs e)
     2        {
     3            AjaxPro.Utility.RegisterTypeForAjax(typeof(Top_test1));
     4            // 在此处放置用户代码以初始化页面
     5            if(!IsPostBack)
     6            {
     7                BindToPro();
     8                BindToCity();
     9                this.ddlProSt_hy.Attributes.Add("onchange","cityResult();");
    10            }

    11        }

    12

    2、发布AJAX服务器端的方法:

    1GetCityList


    ASCX用户控件文件:
    3、加入以下JavaScript代码

     1<SCRIPT language="javascript">            
     2            //根据省份ID获取城市列表
     3            function cityResult() 
     4            
     5               var id = '<%=this.ddlProSt_hy.ClientID%>';//获取所需的控件ID
     6               var Pro=document.getElementById(id);    //根据获取的ID得到控件对象                           
     7               HCWLWebSystem.WebUI.Top_test1.GetCityList(Pro.selectedIndex,get_city_Result_CallBack);//通过AjaxPro调用后台服务器方法
     8            }

     9            //获取后台回调数据的方法
    10            function get_city_Result_CallBack(response)
    11            {
    12                if (response.value != null)
    13                {
    14                    var id = '<%=this.ddlCitySt_hy.ClientID%>';//获取要关联的控件ID
    15                     var city=document.getElementById(id);    //根据ID获取要关联的控件对象
    16                    city.length=0;                
    17                var ds = response.value;
    18                //根据后台返回的DataSet动态地添加DropDownList的项
    19                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
    20                    {                    
    21                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
    22                    {
    23                        var name=ds.Tables[0].Rows[i].CityName;
    24                      var id=ds.Tables[0].Rows[i].cityID;
    25                      city.options.add(new Option(name,id));//为控件添加项
    26                    }

    27                    }

    28                }
                    
    29                return
    30            }

    31</SCRIPT>

    4、然后在Body里的代码:

    1<body MS_POSITIONING="GridLayout">
    2        <form id="Form1" method="post" runat="server">
    3            <FONT face="宋体">
    4                <asp:DropDownList id="ddlProSt_hy" style="Z-INDEX: 101; LEFT: 400px; POSITION: absolute; TOP: 208px"
    5                    runat="server"></asp:DropDownList>
    6                <asp:DropDownList id="ddlCitySt_hy" style="Z-INDEX: 102; LEFT: 552px; POSITION: absolute; TOP: 208px"
    7                    runat="server"></asp:DropDownList></FONT>
    8        </form>
    9    </body>

      呵呵,大概就是这么多啦,由于本人技术有限,而且也是第一次发这类文章,如有错误的地方,望大家多多指教哦:)

  • 相关阅读:
    dubbo总结
    搞懂分布式技术28:微服务(Microservice)那点事
    搞懂分布式技术21:浅谈分布式消息技术 Kafka
    搞懂分布式技术20:消息队列因何而生
    搞懂分布式技术19:使用RocketMQ事务消息解决分布式事务
    搞懂分布式技术17,18:分布式事务总结
    热敏电阻
    eagle学习汇总
    CSS浮动通俗讲解
    总结一下CSS定位
  • 原文地址:https://www.cnblogs.com/winsonet/p/534187.html
Copyright © 2011-2022 走看看