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]()