ListBoxDual Custom Control

• Download source files - 3.12 Kb
• Download demo project - 20.6 Kb

Introduction

ASP.NET components are used in most of the web projects. But most of the time, the requested solution needs more powerful and easy to use components in order to give a better UI and better control over the project.

In one of the projects, the team needed to collect user information from a ListBox control and write it to another one to display it to the user. It was noticed that this requirement would be repeated several times, so the ListBoxDual custom component was created. It could have been implemented without creating the component but this time that would have been a time consuming task and the developer would lose focus from his problem domain.

Background

In order to handle the ListBox content (which has items inserted dynamically at client-side) at code behind, you should select the inserted items with the client-script before submitting the form. Then you can get the info using Page.Request method in a comma-delimited string.

Using the code

The component class diagram is shown here:

If you want to add a component to the ToolBox, all you need to do is to drag and drop the component onto the design form. Or you should write the 1^st and the 5^th lines. (Refer to the demo project.) The LeftImageUrl and RightImageUrl are must or you will get an exception.

1] <%@Register TagPrefix="gm" namespace="gmtl.web.ui" assembly="gmtl.web.ui"%>
2] ...
3]<form id="Form1" method="post" runat="server">
4] ...
5] <gm:listboxdual id="BizListBoxDual1" runat="server" 
LeftImageUrl="picture\ToLeft.gif" RigthImageUrl="picture\ToRight.gif">
6] </form>
7] ...

DataTable or DataSet might be bound to the control. You could specify any table in the DataSet by setting the DataTableName property of the control. Otherwise it will select the first table. After postback, the component's SelectedItems property is used to get the selected key-value pairs in a DataTable. Getting values via Hash Table seems easier but DataTable or DataSet is more intuitive to pass though tiers.

Points of interest

I tried to keep the code easy to understand but implementing the same with composite controls might make the code shorter and easier to follow.