Thursday, 11 August 2016

ListBox Control in asp.net using C#


In this article I’ll show you how to make and work in listbox in asp.net using c#, where we had taken two listbox, whatever the data chosen in listbox1 is been shown in listbox2 by button click.






INITIAL CHAMBER:

Step1) Open Your Visual Studio 2010 and Create an Empty Website, Give a suitable name [ListBox_demo].

Step2) In Solution Explorer you get your empty website, Add a web form and SQL Database. By going like this –
For Web Form:

ListBox_demo (Your Empty Website) -> Right Click -> Add New Item -> Web Form. Name it as -> ListBox_demo.aspx.

For SQL Server Database:

Accordion_demo (Your Empty Website) -> Right Click -> Add New Item -> SQL Server Database. [Add Database inside the App_Data_folder].



DATABASE CHAMBER:


Step3) In Server Explorer, Click on your Database [Database.mdf] - -> Tables - -> Add New Table -:- Make table like this:
   
  • Table - -> tbl_data [Don’t Forget to make ID as IS Identity -- True]


C:\Users\Nilesh\Desktop\tbl_data.jpg

C:\Users\Nilesh\Desktop\tbl_data_show_data.jpg



DESIGN CHAMBER:

Step4) Open your ListBox_demo.aspx file from solution Explorer and start design you’re Application:

Here is the Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
</head>
<body>
   <form id="form1" runat="server">
   <div>
   
       <asp:ListBox ID="ListBox2" runat="server" DataSourceID="SqlDataSource1"
           DataTextField="name" DataValueField="name"></asp:ListBox>
       <asp:SqlDataSource ID="SqlDataSource1" runat="server"
           ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
           SelectCommand="SELECT [name] FROM [tbl_data]"></asp:SqlDataSource>
   
   </div>
   <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click Here " />
   <br />
   <br />
   <br />
   <br />
   <br />
   <asp:ListBox ID="ListBox1" runat="server" Width="100px"
      ></asp:ListBox>
   </form>
</body>
</html>



We will take DataSource as SQL Server Database, we will not write any code for Sql Connection, and by just calling Datasource of Listbox it will make our work.


C:\Users\Nilesh\Desktop\ListBox_unbound.jpg C:\Users\Nilesh\Desktop\ListBox_Datasource.jpg


C:\Users\Nilesh\Desktop\Choose_data_source.jpg

C:\Users\Nilesh\Desktop\DataSource Configure.jpg


C:\Users\Nilesh\Desktop\Configure Data Source.jpg

After this Press Next – Next , at the end it will ask you about your table, just select here tbl_data, see below image.


C:\Users\Nilesh\Desktop\Configure Data Source1.jpg




At last window of configure data source, you can test the query just press the - - “Test Query” - -  It will fetch all the name in your Database.





CODE CHAMBER:

At Last open your ListBox_demo.aspx.cs file to write the code, for making the list box like we assume.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {

   }
   protected void Button1_Click(object sender, EventArgs e)
   {
       foreach (ListItem lst  in ListBox2.Items)
       {
           if (lst.Selected== true)
           {
               ListBox1.Items.Add(lst.Text);
           }
           
       }
   }
}






OUTPUT CHAMBER:




C:\Users\Nilesh\Desktop\output_listbox_dmeo.jpg



Hope you like this, Thank you for Reading. Have a nice day!