The controls built in this article are designed for ASP.NET 2.0 for reasons explained later. Later in the article, I will give you a brief workaround explanation for getting them to work in ASP.NET 1.1 (or 1.0).
A Conventional Approach
|Author's Note: This article assumes a basic knowledge of custom Web control development as explained in "Custom Web Controls Demystified" published in CoDe Magazine Sept/Oct 2005 and Nov/Dec 2005. In the interest of space, I will not repeat basics of Web control development such as how properties work or how styling is added. I strongly encourage that you check out the previous articles and read the Web control tutorial I wrote.
Get ready for a great ride because I'm going to show you how to build a couple of very cool controls with functionality that I have seen in commercial controls you would normally pay good money for. I will continuously demonstrate the benefit of full encapsulation that custom Web controls bring to Web programming. In my last couple of articles I taught you how to hit the ground running developing custom Web controls. One of the concepts I described was encapsulation of all functionality and behavior of a control as you would in a standard business object. This encapsulation will shine when you learn to build controls with complex behavior.
The first control I'll show you how to build is called the EnhancedListBox. This control will extend the ASP.NET ListBox control by adding a heading and some reorder buttons. If you remember my "Custom Web Controls Demystified" articles (CoDe Magazine
, Sep/Oct and Nov/Dec 2005) you will recognize this as an inherited control because it will directly inherit from the regular ListBox. Because of this, the control will serve as a drop-in replacement for the ListBox and will give you the ability to optionally display these extra features.
I'll also show you how to build a composite control that will contain two of the above-mentioned EnhancedListBox controls. This control, called ListMover, will also contain some buttons that allow you to move list items from one list to another. You might have seen a control like this in Windows applications and maybe even on Web sites. So you may be asking, "What is the problem?"
Building sites with this type of functionality in ASP.NET is really not that difficult in the conventional method (non-Web control-oriented). First you would drop a regular ListBox control on your Web Form and fill it with some data (in whatever manner you want). Next you would add a label to serve as the heading and a couple of buttons to serve as the reorder buttons. Trapping the server side events for these buttons is standard operating procedure in ASP.NET so all you would need to figure out is a way to take the currently selected item and reposition it higher or lower in the list depending on which button the user clicked. You might write code like this for moving an item up in the list.
i_Index = ListBox1.SelectedIndex;
o_Item = ListBox1.SelectedItem;
if(i_Index < 0) i_Index = 0;
Let me analyze what's happening here. First I'm saving the current Index and Item of the selected item in the list. Then I'm removing the item in the current position and reinserting it in a position one index lower. The logic behind his is pretty straightforward, so why am I demonstrating this? Using this conventional method of ASP.NET programming, the reorder buttons on the Web Form raise a server-side event that performs the reordering on the ListBox. This is triggered by a postback to the server and can be a heavy trip depending on what else is on the form as well as the speed of the Internet line.
However, because this code does a standard ASP.NET postback trip, ASP.NET takes care of handling state using its ViewState mechanism. When the page renders back, the contents of the ListBox are rendered correctly and in the order requested.
You can also reproduce this functionality in the ListMover control using the same conventional manner. For the purposes of brevity I won't reproduce it here but you can probably figure out how it goes. The Web Form would contain a couple of ListBoxes along with buttons signifying a move from left-to-right and a move from right-to-left. The server-side events for these buttons would extract the selected item from one ListBox and add it to the other and vice-versa. As in the first example, ViewState would work perfectly here to maintain the items in both of the ListBoxes.