Reader Level:
ARTICLE

DropDown Control in AJAX

Posted by Davin Martyn Articles | AJAX November 27, 2011
In this article I will demonstrate how to bind the data from a database into a DropDownExtender control in AJAX.
  • 0
  • 0
  • 4798

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.
COB1.gif

Step 2 : Drag and drop control from Toolbox.

  • Drag ScriptManager, DropDown, UpdatePanel, GridView.
da3.gif

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.
da2`.gif
da2.gif

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.
da4.gif

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.
da5.gif

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.
da6.gif

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

Code : 

<title>my ajax application</title>
    </head
>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:.ConnectionString2 %>"
             SelectCommand="SELECT [CUSTOMERID], [NAME], [PICTURE] FROM [CUSTMERINFORMATIN]">
        </asp:SqlDataSource>
        <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server"
            DataSourceID="SqlDataSource1" DataTextField="CUSTOMERID"
            DataValueField="CUSTOMERID" Width = "50px" ForeColor ="Blue">
        </asp:DropDownList>
         </ContentTemplate>
        </asp:UpdatePanel>
         <br />
        <br />
         <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
                ForeColor ="Red" Font-Bold = "true"
                onselectedindexchanged="GridView1_SelectedIndexChanged">
            </asp:GridView>
             <br />
            <br />
             </div>
    </form
>
</body>
</
html>

Step 9 : Now press F5 and run the application.

OUTDROP1.gif

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

DRPOUT12.gif

COMMENT USING

Trending up