Adding Custom Properties and Methods to the User Control
Your user control now works, but it is not yet useful as a general-purpose control. A more practical version of the user control would let you do the following:
-
Specify the list of items to display in the SourceList list dynamically.
-
Get the list of items that the user selected in the TargetList list.
-
Specify whether you want to allow duplicate values in the TargetList list, optionally.
-
Provide a way for users to clear all items in the TargetList list quickly.
Performing these tasks requires that the host page can communicate with the user control, both to share values (set and read properties) and to issue commands (call methods). In this part of the walkthrough, you will change the user control and add some members (properties and methods) to it.
You will add two properties to the user control. The first property retrieves the list of items that are in the TargetList list. The second property lets you specify whether the TargetList list accepts duplicate values. Later in this section, you will add a method that will let you populate the SourceList list.
To add code to define custom properties
-
For the ListPicker control, open or switch to the code file.
-
Use the following code to create the SelectedItems property:
|
Public ReadOnly Property SelectedItems() As ListItemCollection
Get
Return TargetList.Items
End Get
End Property
|
|
public ListItemCollection SelectedItems
{
get { return TargetList.Items ; }
}
|
The SelectedItems property retrieves the values that are in the TargetList list. It can be read-only, because you will never have to set the values in the TargetList list programmatically.
-
Use the following code to create the AllowDuplicates property:
|
Public Property AllowDuplicates() As Boolean
Get
Return CType(ViewState("allowDuplicates"), Boolean)
End Get
Set(ByVal value As Boolean)
ViewState("allowDuplicates") = value
End Set
End Property
|
|
public Boolean AllowDuplicates
{
get
{
return (Boolean)ViewState["allowDuplicates"];
}
set
{
ViewState["allowDuplicates"] = value;
}
}
|
The AllowDuplicates property is a read/write property. The value of the AllowDuplicates property must be saved explicitly in View state so that it persists between round trips. (The SelectedItems property does not have to be explicitly saved in View state, because the TargetList list saves the values in View state.)
You now have the properties defined. However, you still must modify the existing code in the user control to take advantage of the AllowDuplicates property setting.
To modify existing code to use the AllowDuplicates property
-
Find the AddItem method that you wrote in "Adding Code to Handle User Selections," earlier in this walkthrough, and replace the contents with the following highlighted code:
|
Protected Sub AddItem(ByVal li As ListItem)
<b> TargetList.Selectedindex = -1</b>
<b> If Me.AllowDuplicates = True Then</b>
<b> TargetList.Items.Add(li)</b>
<b> Else</b>
<b> If TargetList.Items.FindByText(li.Text) Is Nothing Then</b>
<b> TargetList.Items.Add(li)</b>
<b> End If</b>
<b> End If</b>
End Sub
|
|
protected void AddItem(ListItem li)
{
<b> TargetList.SelectedIndex = -1;</b>
<b> if(this.AllowDuplicates == true)</b>
<b> {</b>
<b> TargetList.Items.Add(li);</b>
<b> }</b>
<b> else</b>
<b> {</b>
<b> if(TargetList.Items.FindByText(li.Text) == null)</b>
<b> {</b>
<b> TargetList.Items.Add(li);</b>
<b> }</b>
<b> }</b>
}
|
The code performs the same function as before (adding an item to the TargetList list), but now the code checks to determine whether the AllowDuplicate property is set to true. If the AllowDuplicate property is set to true, the code first looks for an existing item with the same value as the proposed new item, and then adds the new item, but only if no existing item is found.
Because you will be setting the contents of the SourceList list using a property, you can remove the test data that you entered in "Adding Server Controls to the User Control," earlier in this walkthrough.
To remove the test data for the SourceList list
-
Switch to Design view.
-
Click the SourceList control, and then, in Properties, for Items, click the ellipsis (…) button.
The ListItem Collection Editor appears.
-
Click the X (Remove) button to remove each sample item, and then click OK.
Adding a Method to the User Control
You can also add methods to perform tasks in the user control when the methods are called by code in the host page. To illustrate this, in this walkthrough, you will add two methods. The first method can be called to add items to the SourceList list. The second method clears the contents of the TargetList list.
To add a method to clear the TargetList list
-
Use the following code to add the AddSourceItem method:
|
Public Sub AddSourceItem(ByVal sourceItem As String)
SourceList.Items.Add(sourceItem)
End Sub
|
|
public void AddSourceItem(String sourceItem)
{
SourceList.Items.Add(sourceItem);
}
|
-
Use the following code to add the ClearAll method:
|
Public Sub ClearAll()
SourceList.Items.Clear()
TargetList.Items.Clear()
End Sub
|
|
public void ClearAll()
{
SourceList.Items.Clear();
TargetList.Items.Clear();
}
|
-
On the File menu, click Save All to save the changes that you made to the user control.