How to work with dropdown control from a usercontrol

Posted on 2012-09-04
Last Modified: 2012-09-05
I've an user control where as a dropdown control is placed there. I placed the usercontrol in my aspx page. How to get the dropdown value in ASPX page and how and where to handle the selection changed event of the dropdown?

Please guide me.
Question by:Easwaran Paramasivam
    LVL 25

    Expert Comment

    by:Luis Pérez
    Are you working exclusively with server code or with Javascript too?
    LVL 16

    Author Comment

    by:Easwaran Paramasivam
    Please tell me both.
    LVL 25

    Accepted Solution

    Well, if you got a UserControl with a DropDownList inside, you need a way to populate the DropDownList selected value to the Usercontrol's container page. You can do this thru a property in the UserControl:

     public ListItem SelectedItem {
            get {
                return this.DropDownList1.SelectedItem;

    Open in new window

    So, in the container page, you can do this (for example, in page_load):

    if (this.IsPostBack) {
        ListItem item = this.WebUserControl1.SelectedItem;

    Open in new window

    And into javascript, you can check at every moment the selected item of the dropdownlist:
    <script type="text/javascript">
        function checkDropDown() {
            var selectedValue = document.getElementById('<%=DropDownList1.ClientID%>').value;

    Open in new window

    Note that you must place that Javascript inside the UserControl.

    And about how to handle the selection changed event, you can use the AutoPostback property of the DropDownList. If you set AutoPostback to true, every time the user changes the selection the page reloads, and you can check the selected value in Page_Load event (you can use this.IsPostBack to know if the page has reloaded or not). If you prefer to detect changes in javascript, you must add this code to the UserControl's Page_Load method:


    Open in new window

    And you must write this function to handle the change in javascript:

    function dropDownListChanged(dropdown) {
        //you can access dropdown.value to know the selected value

    Open in new window

    Because the question you are posting, I guess you must be a bit newbie in I know this can be messy. Good luck. Hope that helps.
    LVL 16

    Author Closing Comment

    by:Easwaran Paramasivam

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
    Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
    This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor ( If you're looking for how to monitor bandwidth using netflow or packet s…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now