Dynamic Criteria Controls

Suppose you want to display a list box to users that allows them to select no items, one item, or multiple items. You can accomplish this with the following two lines of code:

oDT = GetDepartments();

ShowListBox(Criteria.Department, oDT, "DictionaryID", "Description", 10, 20, 200, 180, "Departments");

This code displays the web page shown in Figure 5-12.

Figure 5-12. Filtering departments

This example examines the data-driven techniques for creating web ListBox controls on the fly. You aren't using a CheckBoxList control because the ID values that are assigned to it through the ListItem object don't persist client-side and therefore can't be retrieved through JavaScript. Microsoft KnowledgeBase article Q309338 explains this in more detail.

The goal is to retrieve the user selections client-side only because you can always pass the values to the server via hidden controls. Because of the increasing popularity of asynchronous JavaScript (AJAX), more and more developers are avoiding postbacks for tasks such as report generation. By retrieving the user selections client-side and invoking an on-demand reporting web service asynchronously, you can display the report output with minimal server hits. This approach also simplifies the UI code because you don't need to maintain state between postbacks. Like its WinForms counterpart, the ShowListBox() method invokes additional methods that display the Label, ListBox, and Button objects that make up the set of controls. These controls are managed in the classes shown in Listing 518.

Listing 5-18. ControlManager and ListBoxManager Classes public enum Criteria {

Department = 0

abstract class ControlManager {

private Criteria iIndex; private Label oLabelControl;

public Criteria Index {

public Label LabelControl {

get { return oLabelControl; } set { oLabelControl = value; }

class ListBoxManager : ControlManager {

private System.Web.UI.WebControls.ListBox oListBoxControl; private Button oButtonControl;

public System.Web.UI.WebControls.ListBox ListBoxControl {

get { return oListBoxControl; }

set { oListBoxControl = value; }

public Button ButtonControl {

get { return oButtonControl; } set { oButtonControl = value; }

To display the control, you need to pass the Criteria enumerator to the ShowListBox() method (see Listing 5-19) along with the data source information, the dimensions of the list box, and the caption. ShowListBox() instantiates an object of type ListBoxCollection that receives the instantiated objects of the Label, ListBox, and Button types. These controls are then added to the properties of the ListBoxCollection objects.

Listing5-19. ShowListBox() Method private void ShowListBox(Criteria iIndex, DataTable oDT, string szID, string szDescription, int iLeft, int iTop, int iWidth, int iHeight, string szCaption)

ListBoxManager oListBoxManager;

oListBoxManager = new ListBoxManager(); oListBoxManager.Index = iIndex;

oListBoxManager.LabelControl = AddDynamicLabel(iIndex, iLeft, iTop, szCaption);

oListBoxManager.ListBoxControl =

AddDynamicListBox(iIndex, iLeft, iTop + 20, iWidth, iHeight);

oListBoxManager.ButtonControl =

AddDynamicListBoxButton(iIndex, iLeft, iTop + iHeight + 20, iWidth, 23, szCaption);

LoadListBox(oListBoxManager.ListBoxControl, oDT, "DictionaryID", "Description", false);

The AddDynamicLabel () method (see Listing 5-20) instantiates a Label object and assigns its location via the Style() method. The new control is then added to the Controls collection of the owner Panel object that displays it to the user.

Listing 5-20. AddDynamicLabel () Method private Label AddDynamicLabel(Criteria iIndex, int iLeft, int iTop, string szCaption)

Label oLabel; oLabel = new Label();

oLabel.Style[HtmlTextWriterStyle.Position] = "absolute"; oLabel.Style[HtmlTextWriterStyle.Left] = iLeft.ToString() + "px"; oLabel.Style[HtmlTextWriterStyle.Top] = iTop.ToString() + "px"; oLabel.Text = szCaption;

Panel1.Controls.Add(oLabel);

return oLabel;

The ListBox control is displayed in a similar fashion, as illustrated in the AddDynamicListBox() method shown in Listing 5-21. The SelectionMode property is always set to multiple selections; otherwise, a combo box would suffice.

Listing5-21. AddDynamicListBox() Method private System.Web.UI.WebControls.ListBox AddDynamicListBox(Criteria iIndex, int iLeft, int iTop, int iWidth, int iHeight)

System.Web.UI.WebControls.ListBox oListBox; oListBox = new System.Web.UI.WebControls.ListBox(); oListBox.ID = "ListBox" + ((int) iIndex); oListBox.Style["position"] = "absolute"; oListBox.Style["left"] = iLeft.ToString() + "px"; oListBox.Style["top"] = iTop.ToString() + "px"; oListBox.Style["height"] = iHeight.ToString() + "px"; oListBox.Style["width"] = iWidth.ToString() + "px"; oListBox.BorderStyle = BorderStyle.Solid; oListBox.SelectionMode = ListSelectionMode.Multiple;

Panell.Controls.Add(oListBox); return oListBox;

The Button control is created and displayed in a fashion similar to the Label and ListBox, as shown in Listing 5-22.

Listing5-22. AddDynamicListBoxButton() Method private Button AddDynamicListBoxButton(Criteria iIndex, int iLeft, int iTop, int iWidth, int iHeight, string szCaption)

Button oButton; oButton = new Button(); oButton.Style["position"] = "absolute"; oButton.Style["left"] = iLeft.ToString() + "px"; oButton.Style["top"] = iTop.ToString() + "px"; oButton.Style["width"] = iWidth.ToString() + "px"; oButton.Text = "Clear Selected " + szCaption; oButton.Attributes.Add("onclick",

"return DeselectAll('ListBox" + ((int) iIndex) + "')"); Panell.Controls.Add(oButton);

return oButton;

The Button control triggers JavaScript code—that is, when clicked, it must clear the selections in the list box with which it's associated. The generic JavaScript function that clears the select options in the ListBox is shown in Listing 5-23. The button's OnClientClick event property is wired to this JavaScript function using the Attributes.Add() method.

Listing 5-23. DeselectAll Method function DeselectAll(szListBox) {

var oListBox = document.getElementById(szListBox); for (i=0; i < oListBox.options.length; i++) oListBox.options[i].selected = false; return false;

0 0

Post a comment