Example of ListBox Control in ASP.Net Using C#

Initial Chamber

Step 1

Open your Visual Studio 2010 and create an Empty Website, provide a suitable name (ListBox_demo).

Step 2

In Solution Explorer you get your empty website, add a web form and SQL Database as in the following.

For Web Form:

    ListBox_demo (Your Empty Website) then right-click then select Add New Item -> Web Form. Name it as -> ListBox_demo.aspx.

For SQL Server Database:

Accordion_demo (Your Empty Website) then right-click then select Add New Item -> SQL Server Database. (Add the database inside the App_Data_folder).

Database Chamber

Step 3

In Server Explorer, click on your database (Database.mdf) then select Tables -> Add New Table. Make the table like this:

Table -> tbl_data (Don't forget to set the ID as IS Identity -- True).

Identity

Design Chamber

Step 4

Open your ListBox_demo.aspx file from Solution Explorer and begin designing you're application. Here is the code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.       
  13.         <asp:ListBox ID="ListBox2" runat="server" DataSourceID="SqlDataSource1"   
  14.             DataTextField="name" DataValueField="name"></asp:ListBox>  
  15.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  16.             ConnectionString="<%$ ConnectionStrings:ConnectionString %>"   
  17.             SelectCommand="SELECT [name] FROM [tbl_data]"></asp:SqlDataSource>  
  18.       
  19.     </div>  
  20.     <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click Here " />  
  21.     <br />  
  22.     <br />  
  23.     <br />  
  24.     <br />  
  25.     <br />  
  26.     <asp:ListBox ID="ListBox1" runat="server" Width="100px"   
  27.    
  28.        ></asp:ListBox>  
  29.     </form>  
  30. </body>  
  31. </html>  
We will use the DataSource as a SQL Server database, we will not write any code for SQL Connection and by just calling the Datasource of the Listbox it will do our work.

DataSource

SQL Connection

below image

Then press Next then Next. It will then ask you about your table, just select here tbl_data, see the following image.

Test Query

In the last window of configuring the data source, you can test the query. Just press the “Test Query” and it will fetch all the names into your database.

Code Chamber

Finally open your ListBox_demo.aspx.cs file to write the code, for making the list box as we assume.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.   
  13.     }  
  14.     protected void Button1_Click(object sender, EventArgs e)  
  15.     {  
  16.         foreach (ListItem lst  in ListBox2.Items)  
  17.         {  
  18.             if (lst.Selected== true)  
  19.             {  
  20.                 ListBox1.Items.Add(lst.Text);  
  21.             }  
  22.               
  23.         }  
  24.     }  
  25. }  
Output Chamber

Output

I hope you like this, thank you for reading. Have a nice day!


Similar Articles