Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use AJAX DropDownExtender in ASP.NET

Author: Jeff Nava

In this article, we will see how we can use AJAX DropDownExtender in ASP.NET.

 

DropDownExtender is one of the AJAX Toolkit controls that can be attached to a server control to show DropDown menu. Most commonly it is used with TextBox control. It provides a nice drop down layout to the items attached to control.

We will use two types of list controls in our example to see the DropDownExtender control. You have to download AJAX Control Toolkit and include it in your Visual Studio Toolbox to use DropDownExtender control.

 

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > Add New Item > Web Form
  5. Open Toolbox > Right Click > Add Tab
  6. Name the Tab As “AJAX Control Toolkit”
  7. Click on Tab > Choose Items
  8. Browse the “AjaxControlToolkit.dll” > Click Ok
  9. I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
  10. Open web form and add a ScriptManager control from “AJAX Extensions” tab.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>


    ScriptManager control is necessary when you are using Ajax functionality in your web site. 
     
  11.  Add two TextBox controls and write it’s attributes as below.

    <asp:TextBox ID="txtBoxLanguage" Text="Select your preferred language" Width="200px" runat="server" ></asp:TextBox>
    <asp:TextBox ID="txtBoxDbServer" Text="Select your preferred Db Server" Width="200px" runat="server" ></asp:TextBox>


    As we are using DropDownExtender with these TextBox controls so we have set the Text attribute.
     
  12.  Add two Panels and add a BulletedList in first panel and RadiobuttonList in second panel like below.

    <asp:Panel ID="Panel1" runat="server">
        <asp:BulletedList ID="BulletedList1" DisplayMode="LinkButton" OnClick="BulletedList1_Click" runat="server">
             <asp:ListItem>Visual Basic</asp:ListItem>
             <asp:ListItem>C#</asp:ListItem>
             <asp:ListItem>PHP</asp:ListItem>
             <asp:ListItem>JAVA</asp:ListItem>
             <asp:ListItem>C++</asp:ListItem>
        </asp:BulletedList>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"
              onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
             <asp:ListItem>SQL Server</asp:ListItem>
             <asp:ListItem>MySQL</asp:ListItem>
             <asp:ListItem>Oracle</asp:ListItem>
             <asp:ListItem>Informix</asp:ListItem>
             <asp:ListItem>DB2</asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>
     
    We have added BulletedList control in first Panel and the “DisplayMode” attribute of the BulletedList is set as “LinkButton”.  BulletedList has five list items of different programming languages. “onClick” attribute is also set to write code in it in code behind file.  Second Panel contains RadioButtonList control. Its “onselectedindexchanged” attribute is also set to write code in it in code behind file. RadioButtonList has five database server names in its items.
     
  13. Add two DropDownExtender controls from “AJAX Control Toolkit” tab and set its attribute as below.

    <ajax:DropDownExtender ID="DropDownExtender1" TargetControlID="txtBoxLanguage" DropDownControlID="Panel1" runat="server">
    </ajax:DropDownExtender>
    <ajax:DropDownExtender ID="DropDownExtender2" TargetControlID="txtBoxDbServer" DropDownControlID="Panel2" runat="server">
    </ajax:DropDownExtender>

    DropDownExtender has two more ID attributes along with its own “ID”. We are attaching first DropDownExtender to our first TextBox which is for language selection. So its “TargetControlID” is set to “txtBoxLanguage”. Our languages list is in BulletedList control which is in Panel1 so “DropDownControlID” is set to “Panel1.” Same process is repeated for DropDownExtender2 for database server selection.
     
  14. Now add two labels to show the result

    <asp:Label ID="lblLanguage" runat="server" ></asp:Label>
    <br />
    <asp:Label ID="lblDbServer" runat="server" ></asp:Label>

     
  15. Open code behind file and add code below in it

    C#
     
    protected void BulletedList1_Click(object sender, BulletedListEventArgs e) {
        txtBoxLanguage.Text = BulletedList1.Items[e.Index].Text;
        lblLanguage.Text = "Your have selected '" + BulletedList1.Items[e.Index].Text + "' as your preferred language";
    }
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) {
        txtBoxDbServer.Text = RadioButtonList1.SelectedItem.Text;
        lblDbServer.Text = "Your have selected '" + RadioButtonList1.SelectedItem.Text + "' as your preferred Db Server";
    }
     
    VB.NET
     
    Protected Sub BulletedList1_Click(ByVal sender As Object, ByVal e As BulletedListEventArgs) Handles BulletedList1.Click
        txtBoxLanguage.Text = BulletedList1.Items(e.Index).Text
        lblLanguage.Text = "Your have selected '" + BulletedList1.Items(e.Index).Text & "' as your preferred language"
    End Sub
    Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles RadioButtonList1.SelectedIndexChanged
        txtBoxDbServer.Text = RadioButtonList1.SelectedItem.Text
        lblDbServer.Text = "Your have selected '" + RadioButtonList1.SelectedItem.Text & "' as your preferred Db Server"
    End Sub
     
    We have added Click event of BulletedList and selectedIndexChange event of RadioButtonList. In both events we are getting the value of selected item and displaying it in TextBox as well as on Label.
     
  16. Now see the web site in browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to sort items of Bulleted List control using jQuery in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net