In this section we will show a simple web form that contains an instance of the new ListBox that we have created above.

A button is to be added that will handle removing an item from the ListBox.

Two TextBoxes will be added to allow the user to enter a Text and a Value for the new item to be inserted into the ListBox.  In addition, a button is used to add the above values as a new item into the ListBox.

All the above buttons are client side buttons and, hence, the manipulation of the items inside the ListBox is done on the client side using JavaScript.

Finally, a server-side button is used to force a post back to the server to show you how the items inside the ListBox will be preserved.

The web form shall look something similar to the following figure.

Figure 1

You can select an item in the ListBox then press on the Remove Selected Item button.  This will remove the item from the ListBox and add its value to the _REMOVED Hidden Field.  The code for this function is shown below.

Listing 6

function RemoveItem()
{
// Get the ListBox
  var sourceListBox = document.getElementById('ListBox1');
 
// Check if the ListBox is null or not
  if (sourceListBox != null)
  {
// Get the selected item
    var selectedValue =
      sourceListBox.options[sourceListBox.options.selectedIndex].getAttribute(
      "value");
 
// Remove the selected item from the ListBoc
    sourceListBox.remove(sourceListBox.options.selectedIndex);
 
// Add the index of the item to be removed into the
// Hidden Field _REMOVED
    RemoveListItem(sourceListBox, selectedValue);
  }
}

As you can see, the code is self explanatory.  We have detected the selected item. Then we removed the item from the ListBox and, finally, we instantiated a call to the utility method that is being injected on the page by the new ListBox control created.

The RemoveListItem takes as parameters the name of the ListBox in action and the value of the item to be removed.

If you want to add a new item, you simply fill in the two TextBoxes with the Text and Value of the new Item.  Then you press on Add New Item button.  The code behind this button is shown below.

Listing 7

function AddItem()
{
  // Get the ListBox
  var sourceListBox = document.getElementById('ListBox1');
  var txt_text = document.getElementById('TextBox1');
  var txt_value = document.getElementById('TextBox2');
 
  // Check if the ListBox is null or not
  if ((sourceListBox != null) && (txt_text != null) && (txt_value != null))
  {
    // Create a new option
    var newOption = new Option();
    newOption.text = txt_text.value;
    newOption.value = txt_value.value;
 
    // Add the created item to the ListBox
    sourceListBox.options[sourceListBox.length] = newOption;
 
    // Add the new text|value to the Hidden Field _ADDED
    AddListItem(sourceListBox, newOption.text, newOption.value);
  }
}

First of all, we create a new Option, add the new Option to the ListBox and, after that, we add the new item to the _ADDED Hidden Field.

Upon posting back to the server, you would notice that the items in the ListBox are kept the same as they were before sending the request to the server and this proves that the control is functioning as well as expected!