Move Data From One ListBox to Other ListBox in ASP.Net

In this article I’ll show you how to move data from one ListBox to another ListBox in ASP.NET using C#.

Where we took two ListBoxes and their list item, we will put that list item inito each other list box.

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, then add two web forms and a SQL Server 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 listbox_demo.aspx.

Design chamber

Step 3

Now open your Listbox_demo.aspx file, where we create our design for our application.

Listbox_demo.aspx

  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.   
  9.     <style type="text/css">  
  10.         .style1  
  11.         {  
  12.             text-decoration: underline;  
  13.             font-size: large;  
  14.             color: #006600;  
  15.         }  
  16.         .style5  
  17.         {  
  18.             width: 69px;  
  19.         }  
  20.         .style6  
  21.         {  
  22.             width: 102px;  
  23.         }  
  24.         .style7  
  25.         {  
  26.             width: 238px;  
  27.             text-decoration: underline;  
  28.             color: #0000FF;  
  29.         }  
  30.         .style8  
  31.         {  
  32.             width: 102px;  
  33.             text-decoration: underline;  
  34.             color: #0000FF;  
  35.         }  
  36.         .style9  
  37.         {  
  38.             width: 238px;  
  39.         }  
  40.         .style10  
  41.         {  
  42.             width: 4px;  
  43.         }  
  44.         .style11  
  45.         {  
  46.             width: 4px;  
  47.             color: #0000FF;  
  48.         }  
  49.     </style>  
  50.   
  51. </head>  
  52. <body id="nil">  
  53.     <form id="form1" runat="server">  
  54.     <div>  
  55.       
  56.         <span class="style1"><strong>Move Data from one ListBox to other ListBox</strong></span><br />  
  57.         <br />  
  58.         <table style="width: 26%; height: 138px;">  
  59.             <tr>  
  60.                 <td class="style8">  
  61.                     <strong>ListBox1</strong></td>  
  62.                 <td class="style11">  
  63.                      </td>  
  64.                 <td class="style7">  
  65.                     <strong>ListBox2</strong></td>  
  66.             </tr>  
  67.             <tr>  
  68.                 <td class="style6">  
  69.       
  70.         <asp:ListBox ID="ListBox1" runat="server" Height="131px" Width="98px"   
  71.             SelectionMode="Multiple" BackColor="#66FF66">  
  72.             <asp:ListItem>Cricket</asp:ListItem>  
  73.             <asp:ListItem>Football</asp:ListItem>  
  74.             <asp:ListItem>Basketball</asp:ListItem>  
  75.             <asp:ListItem>Baseball</asp:ListItem>  
  76.         </asp:ListBox>  
  77.                 </td>  
  78.                 <td class="style10">  
  79.                     <table style="width: 67%; height: 139px;">  
  80.                         <tr>                           
  81.                             <td class="style5">  
  82.                                 <asp:ImageButton ID="ImageButton1" runat="server"   
  83.                                     ImageUrl="~/add 1on 1.jpg" onclick="ImageButton1_Click"   
  84.                                     ImageAlign="Bottom" />  
  85.                             </td>                            
  86.                         </tr>  
  87.                         <tr>       
  88.                             <td class="style5">  
  89.                                 <asp:ImageButton ID="ImageButton2" runat="server"   
  90.                                     ImageUrl="~/remove 1 on 1.jpg" onclick="ImageButton2_Click" />  
  91.                             </td>                         
  92.                         </tr>  
  93.                         <tr>                             
  94.                             <td class="style5">  
  95.                                 <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/add all.jpg"   
  96.                                     onclick="ImageButton3_Click" />  
  97.                             </td>                             
  98.                         </tr>  
  99.                         <tr>                            
  100.                             <td class="style5">  
  101.                                 <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/remove all.jpg"   
  102.                                     onclick="ImageButton4_Click" />  
  103.                             </td>                             
  104.                         </tr>  
  105.                     </table>  
  106.                 </td>  
  107.                 <td class="style9">  
  108.         <asp:ListBox ID="ListBox2" runat="server" Height="131px" Width="98px"   
  109.             SelectionMode="Multiple" BackColor="#66FF66">  
  110.             <asp:ListItem>Volleyball</asp:ListItem>  
  111.             <asp:ListItem>Hockey</asp:ListItem>  
  112.             <asp:ListItem>Boxing</asp:ListItem>  
  113.             <asp:ListItem>Tennis</asp:ListItem>  
  114.         </asp:ListBox>  
  115.                 </td>  
  116.             </tr>  
  117.             <tr>  
  118.                 <td class="style6">  
  119.                      </td>  
  120.                 <td class="style10">  
  121.         <asp:Label ID="lbmsg" runat="server"></asp:Label>  
  122.                 </td>  
  123.                 <td class="style9">  
  124.                      </td>  
  125.             </tr>  
  126.         </table>  
  127.      </div>  
  128.     </form>  
  129. </body>  
  130. </html>  

Your design will look like this:

design

Code chamber

Step 4

Open your listbox_demo.aspx.cs and write some code so that our application works.

  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. using System.Collections;  
  8.   
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     ArrayList ar1 = new ArrayList();  
  12.     ArrayList ar2 = new ArrayList();  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.   
  16.     }  
  17.     protected void ImageButton1_Click(object sender, ImageClickEventArgs e)  
  18.     {  
  19.         if (ListBox1.SelectedIndex >= 0)  
  20.         {  
  21.             for (int i = 0; i < ListBox1.Items.Count; i++)  
  22.             {  
  23.                 if (ListBox1.Items[i].Selected)  
  24.                 {  
  25.                     if (!ar1.Contains(ListBox1.Items[i]))  
  26.                     {  
  27.                         ar1.Add(ListBox1.Items[i]);  
  28.                     }  
  29.                 }  
  30.             }  
  31.             for (int i = 0; i < ar1.Count; i++)  
  32.             {  
  33.                 if (!ListBox2.Items.Contains(((ListItem)ar1[i])))  
  34.                 {  
  35.                     ListBox2.Items.Add(((ListItem)ar1[i]));  
  36.                 }  
  37.                 ListBox1.Items.Remove(((ListItem)ar1[i]));  
  38.             }  
  39.             ListBox2.SelectedIndex = -1;  
  40.         }  
  41.         else  
  42.         {  
  43.             lbmsg.Text = "Please select atleast one listitem";  
  44.             lbmsg.ForeColor = System.Drawing.Color.Red;  
  45.         }  
  46.     }  
  47.     protected void ImageButton2_Click(object sender, ImageClickEventArgs e)  
  48.     {  
  49.         if (ListBox2.SelectedIndex >= 0)  
  50.         {  
  51.             for (int i = 0; i < ListBox2.Items.Count; i++)  
  52.             {  
  53.                 if (ListBox2.Items[i].Selected)  
  54.                 {  
  55.                     if (!ar2.Contains(ListBox2.Items[i]))  
  56.                     {  
  57.                         ar2.Add(ListBox2.Items[i]);  
  58.                     }  
  59.                 }  
  60.             }  
  61.             for (int i = 0; i < ar2.Count; i++)  
  62.             {  
  63.                 if (!ListBox1.Items.Contains(((ListItem)ar2[i])))  
  64.                 {  
  65.                     ListBox1.Items.Add(((ListItem)ar2[i]));  
  66.                 }  
  67.                 ListBox2.Items.Remove(((ListItem)ar2[i]));  
  68.             }  
  69.             ListBox1.SelectedIndex = -1;  
  70.         }  
  71.         else  
  72.         {  
  73.             lbmsg.Text = "Data removed from listbox";  
  74.             lbmsg.ForeColor = System.Drawing.Color.ForestGreen;  
  75.         }  
  76.     }  
  77.     protected void ImageButton3_Click(object sender, ImageClickEventArgs e)  
  78.     {  
  79.         while (ListBox1.Items.Count != 0)  
  80.         {  
  81.             for (int i = 0; i < ListBox1.Items.Count; i++)  
  82.             {  
  83.                 ListBox2.Items.Add(ListBox1.Items[i]);  
  84.                 ListBox1.Items.Remove(ListBox1.Items[i]);  
  85.             }        
  86.         }  
  87.         lbmsg.Text = "All data added to listbox2";  
  88.         lbmsg.ForeColor = System.Drawing.Color.ForestGreen;        
  89.     }  
  90.   
  91.   
  92.     protected void ImageButton4_Click(object sender, ImageClickEventArgs e)  
  93.     {  
  94.         while (ListBox2.Items.Count != 0)  
  95.         {  
  96.             for (int i = 0; i < ListBox2.Items.Count; i++)  
  97.             {  
  98.                 ListBox1.Items.Add(ListBox2.Items[i]);  
  99.                 ListBox2.Items.Remove(ListBox2.Items[i]);  
  100.             }  
  101.         }  
  102.         lbmsg.Text = "All data removed and moved to listbox1";  
  103.         lbmsg.ForeColor = System.Drawing.Color.ForestGreen;  
  104.     }  
  105. }  
Output chamber

listbox

Here the first button is as:
  1. Move data one.
  2. Remove data one.
  3. Add all.
  4. Remove all.

move data from listbox

move data

I hope you like this. Thank you for reading, have a good day.