Post
Ask Question

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

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.


Similar Articles