Smart ListControl in ASP.NET 1.x/2.0
page 3 of 7
by Bilal Haidar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 38098/ 52

Classes to implement

Since we will be improving the ListBox control, it is wise first of all to implement ListBox class. The goal we are after is to upgrade the ListBox to function properly with the client side changes on its collection of items.

The code below shows how to implement the ListBox class.

Listing 1

public class xListBox : ListBox
{

All the public properties and methods of the ListBox will continue to use them as before.

One method of interest, which is the OnPreRender, will be overridden to add the two mentioned Hidden Fields in a previous section.

The OnPreRender is as follows:

Listing 2

protected override void OnPreRender(EventArgs e)
{
  base.OnPreRender(e);
 
// Force the LoadPostData to fire always
  if (Page != null)
    Page.RegisterRequiresPostBack(this);
 
// Register the hidden field to hold the added items
  Page.RegisterHiddenField(this.HFItemsAdded, "");
 
// Register the hidden field to hold the indicies of removed items
  Page.RegisterHiddenField(this.HFItemsRemoved, "");
 
// Register the JavaScript file that includes utility methods
  if (!Page.IsClientScriptBlockRegistered("UtilMethods"))
    Page.RegisterClientScriptBlock("UtilMethods", jsScript);
}

What we have done is call the base OnPreRender almost every time when developing custom controls and this is usually done to preserve any code that has been added by the base class.

Any client side code, like JavaScript or any control registering on the parent Page of the control, should be done in this stage of the control life cycle, the PreRender stage.

Notice that we have registered a JavaScript block with the key UtilityMethods.  This code provides two main client side functions, mainly the AddItemToList and RemoveItemFromList.  Those functions are used to Add and Remove items from the two Hidden Field mentioned above.  They have been implemented in such a way to keep those two Hidden Fields synchronized so to not have items present in both Hidden Fields.

The JavaScript code is shown below.

Listing 3

// Add a new ListItem to the ListBosID_ADDED HiddenField
function AddListItem(listName, text, value)
{
  var hiddenField = GetHiddenField(listName.id + '_ADDED');
 
  if (hiddenField != null)
  {
    // Add a separator
    var tmp = hiddenField.value;
    if (tmp != '')
      hiddenField.value += ',';
 
    // Add the item to the hidden field
    hiddenField.value += text + '|' + value;
 
    // if present in the REMOVED hidden field, remove it
    var removeHiddenField = GetHiddenField(listName.id + '_REMOVED');
    if (removeHiddenField != null)
    {
      var removedItems = removeHiddenField.value.split(',');
      removeHiddenField.value = '';
      for (var i = 0; i < removedItems.length; i++)
      {
        if (value != removedItems[i])
        {
          // Add a separator
          var tmp1 = removeHiddenField.value;
          if (tmp1 != '')
            removeHiddenField.value += ',';
 
          removeHiddenField.value += removedItems[i];
        }
      }
    }
  }
}
 
// Removes an item from the ListBoxID_REMOVED HiddenField
function RemoveListItem(listName, value)
{
  var hiddenField = GetHiddenField(listName.id + '_REMOVED');
 
  if (hiddenField != null)
  {
    // Add a separator
    var tmp = hiddenField.value;
    if (tmp != '')
      hiddenField.value += ',';
 
    hiddenField.value += value;
 
    // if present in the ADDED hidden field, remove it
    var addHiddenField = GetHiddenField(listName.id + '_ADDED');
    if (addHiddenField != null)
    {
      var addedItems = addHiddenField.value.split(',');
      addHiddenField.value = '';
      for (var i = 0; i < addedItems.length; i++)
      {
        if (addedItems[i].match(value) == null)
        {
          // Add a separator
          var tmp1 = addHiddenField.value;
          if (tmp1 != '')
            addHiddenField.value += ',';
 
          addHiddenField.value += addedItems[i];
        }
      }
    }
  }
}
 
// Finds a hidden field on the page
function GetHiddenField(fieldName)
{
  var hiddenField;
  hiddenField = document.getElementById(fieldName);
 
  if (hiddenField != null)
    return hiddenField;
 
  return null;
} 

The above code is being injected in the OnPreRender method.  Later on when we discuss the "How to use the new ListBox" we will show you how to call those methods properly.

There are three main methods:

AddListItem

RemoveListItem

GetHiddenField

The AddListItem starts by getting the Hidden Field titled _ADDED, where this Hidden Field contains all the items, in the form of (Text|Value) that will be added to the ListBox.  The new item to be added is constructed in the following format (Text|Value) and then appended to any item already present in the Hidden Field.  If any of those items are present in the Hidden Field titled _REMOVED they will be removed from that Hidden Field.  This ensures that items to be removed are removed and items to be added are added correctly.

The RemoveListItem starts by getting the Hidden Field titled _REMOVED, where this Hidden Field contains all the values of the items to be removed from the ListBox.  The new item’s value to be removed from the ListBox is added to any existing value in the Hidden Field and separated by a “,” sign.  Again, the item’s value to be removed is checked against the values present in the _ADDED Hidden Field to maintain consistency between items removed and added.

Finally, the GetHiddenField is a utility method that is used to find any Hidden Field on the page.


View Entire Article

User Comments

Title: Re:   
Name: Bilal Hadiar [MVP]
Date: 2007-04-04 1:51:36 AM
Comment:
Hello,
I have updated the control to work on other browsers than IE!
Check my post here:
http://bhaidar.net/cs/archive/2007/04/03/xlistbox-and-mover-control.aspx
Title: Re:   
Name: Bilal Haidar [MVP]
Date: 2006-12-09 6:40:35 AM
Comment:
Hello:
If it is not working on those two browsers, means there is something in the JavaScript that is specific for the IE only!
Let me check what I can do and come back to you!

Regards
Title: Re:   
Name: Bilal Hadiar [MVP]
Date: 2006-12-06 1:54:05 AM
Comment:
Hello, what exactly is happening? I don't have Safari here, all my work in the company is IE that is why I didn't test it there!

Regards
Title: Safari / doesnt work   
Name: Sonu Kapoor
Date: 2006-12-05 3:19:28 PM
Comment:
It doesnt work properly on safari!






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 4:54:30 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search