To demonstrate how to work with the list box control, we will need to create a simple web form. For this example we will add two list boxes to the web form and add some buttons that will allow us to add items back and forth to the two list boxes. To begin, create a new ASP.NET Empty Web Site and:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to design mode.
  7. Drag and drop a listbox onto the web form.
  8. Change the ID property to ‘lstAsset’.
  9. Change the SelectionMode property to ‘Multiple’.
  10. Add the following list items to the list box:
  11. Drag and drop a listbox onto the web form.
  12. Change the ID property to ‘lstSubordinateAsset’.
  13. Change the SelectionMode property to ‘Multiple’.
  14. Add the following list items to the list box:
  15. Add a break line.
  16. Drag and drop a button onto the web form.
  17. Change the Text property to ‘<<’.
  18. Drag and drop a button onto the web form.
  19. Change the Text property to ‘<’.
  20. Drag and drop a button onto the web form.
  21. Change the Text property to ‘>’.
  22. Drag and drop a button onto the web form.
  23. Change the Text property to ‘>>’.

Once we have our form setup, we need to add the functionality for our buttons. But first, we need to create the array lists that will hold our data. To do this, open Default.aspx.vb up for editing and add in the following code:

The first button will move all of the items from our second list box to our first list box. To do this, open Default.aspx up to design mode and double click Button1. Then, add the following code to that event method:

Next, open Default.aspx up to design mode and double click Button2. Then, add the following code to that event method:

This will take the selected items from our second list box and add them to our first list box. Next, open Default.aspx up to design mode and double click Button3. Then, add the following code to that event method:

This will add the selected items from our first list box to our second list box. Next, open Default.aspx up to design mode and double click Button4. Then, add the following code to that event method:

This moves all of the items from our first list box to our second list box.

Testing

To test this out load up the web site. Use the four buttons to move data to and from our list boxes. This demonstrates how you can easily use the list box control.

Download Source Files