DropDown Control in AJAX

Introduction : A DropDownControl is an ASP.NET AJAX extender that can be attached to almost any ASP.NET control to provide a SharePoint-style drop-down menu. The displayed menu is merely another panel or control. The drop-down is activated by left- or right-clicking the attached control. If the behavior is attached to a Hyperlink or LinkButton, clicking on the link itself will operate normally.

DropDown Extender Control Properties :

  • TargetControl ID.
  • DropDownControl ID.
  • Animation.
  • OnShow.
  • OnHide.

Step 1 : Open Visual Studio 2010.

  • Select File->New->WebSite.
  • ASP.NET WebSite.

Step 2 : Drag and drop control from Toolbox.

  • Drag ScriptManager, DropDown, UpdatePanel, GridView.

Now define the DataTable in Database.

Step 3 : Go to Solution Explorer and right-click.

  • Create a App-Data Folder.
  • Right-click in App-DataFolder.
  • Select Add->New Item.
  • Select SQL Server DataBase.

Step 4 : Go to the Server Explorer and select database name.

  • Create Table for the data value.
  • Click->Table->Add New Table.
  • Define all Data.

Step 5 : Go to the Default.aspx page and click in Design option.

Bind The Data :

Step 6 : Select DropDown control and click in DropDownListTask.

  • Select DataSource option.
  • Define SQDataSource1.

Connection String :

Step 7 : Define the DataSource and Connection String.

  • Select the New Connection option and click in our database or server.
  • Give the ServerName.

Step 8 : Go to the Default.aspx page and write the following code.

Code : 

<title>my ajax application</title>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:.ConnectionString2 %>"
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <asp:DropDownList ID="DropDownList1" runat="server"
            DataSourceID="SqlDataSource1" DataTextField="CUSTOMERID"
            DataValueField="CUSTOMERID" Width = "50px" ForeColor ="Blue">
         <br />
        <br />
         <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
                ForeColor ="Red" Font-Bold = "true"
             <br />
            <br />

Step 9 : Now press F5 and run the application.


Step 10 :
When we click in DropDown arrow then we see the single record fetch from the table.