- Open the project you just created from "creating user controls Part 1". If you did not do the first tutorial,
you can download a copy of the completed project above.
- Open the ListPicker.cs code behind file and copy and paste the following code at the bottom:
protected void AddAll_Click(object sender, EventArgs e)
public ListItemCollection SelectedItems
{
get { return TargetList.Items ; }
}
This code will retrieve the values in the TargetList list.
- Insert the following code next:
public Boolean AllowDuplicates
{
get
{
return (Boolean)ViewState["allowDuplicates"];
}
set
{
ViewState["allowDuplicates"] = value;
}
}
This code will create the
AllowDuplicates property which specifies weather or not you want to allow duplicate values in the TargetList list optionally.
- Go to the AddItem method we wrote earlier in part 2 of the tutorial (ListPicker.aspx) and copy and paste the following code over it:
protected void AddItem(ListItem li)
{
TargetList.SelectedIndex = -1;
if (this.AllowDuplicates == true)
{
TargetList.Items.Add(li);
}
else
{
if (TargetList.Items.FindByText(li.Text) == null)
{
TargetList.Items.Add(li);
}
}
}
The function being performed is the same as before however the code has been modified to
check for the AllowDuplicate property.
- Now add a method to the user control by copying and pasting the following code at the bottom of the page:
public void AddSourceItem(String sourceItem)
{
SourceList.Items.Add(sourceItem);
}
- Add a final method using the following code:
public void ClearAll()
{
SourceList.Items.Clear();
TargetList.Items.Clear();
}
- We will now remove the test data from the SourceList list, because we will be entering it manually using the interface.
Switch to the design view in the ListPicker.ascx file and select the items property in the properties panel.
- Click on the ellipsis (…) button. When the ListItem Collection Editor appears,
click the remove button for each sample item (A, B, and C) then click OK.
- In the file menu, click Save All to save your work so far.
Our final goal is to create some additional user controls on the host page
so we can share the values with the user control page.
- Open the HostUserControl.aspx page, select source view and set the allow duplicates declaratively as shown below:
- Make sure you are on the HostUserControl.aspx page and switch to design view.
- From the Standard group in the toolbox, click and drag the text box under the SourceList on the page.
The ID of the TextBox is NewItem. Leave the Text Field Empty.
- Click and drag a button from the standard group underneath the TextBox.
In the properties panel name the ID AddItem and name the text Add Item.
- Drag a second button form the standard box under the previous button.
In the properties panel name the ID LoadFiles and the Text File List.
- Drag a third button from the standard list under the second button.
In the properties panel name the ID ClearSelection and the text Clear All.
- Click on a checkbox in the standard group and drag it under the third button.
In the properties panel be sure to set the AutoPostBack to True, the Checked to True, the ID to
AllowDuplicates and the text to Allow Duplicates.
- Click on a final button from the standard group and drag it under the checkbox
in the design view. In the properties panel name the ID ShowSelection and the Text Show Selection.
- Lastly, click on a Label in the standard box and drag it under the button.
In the properties panel name the ID Selection and leave the text field empty.
When you are finished the design view should look like the image below:
Now all we have left to do is create the event handlers for the controls we just built in the code behind.
- Double click the allow duplicates item in design view to go to the code behind page
(HostUserControl.aspx.cs) and then copy and paste the following code:
protected void AllowDuplicates_CheckedChanged(Object sender, EventArgs e)
{
ListPicker1.AllowDuplicates = AllowDuplicates.Checked;
}
This will activate the check box to allow or deny duplicate entries.
- Switch back to design view (HostUserControl.aspx) and double click
on the AddItem button then copy and paste the following code:
protected void AddItem_Click(object sender, EventArgs e)
{
ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text));
}
This code will create a ListItemCollection collection in code and will populate the SourceList with sample data.
- Go to design view again and double click the LoadFiles (File List) button, then copy and paste the following code:
protected void LoadFiles_Click(object sender, EventArgs e)
{
String path = Server.MapPath(Request.ApplicationPath);
String[] files = System.IO.Directory.GetFiles(path);
foreach(String filename in files)
{
ListPicker1.AddSourceItem(filename);
}
}
This code is similar to the code for the AddItem, only this code
adds a list of files in the website root directory.
- Switch to design view and double click the ShowSelection button, then copy and paste the following code:
protected void ShowSelection_Click(object sender, EventArgs e)
{
String selectedItemsString = "";
foreach(ListItem lItem in ListPicker1.SelectedItems)
{
selectedItemsString += "
" + lItem.Text;
}
Selection.Text = selectedItemsString;
}
This code will display the results of the selection stored in the TargetList list.
- Switch to Design view one last time and double click the ClearSelection button, then copy and paste the following code:
protected void ClearSelection_Click(object sender, EventArgs e)
{
ListPicker1.ClearAll();
}
This code will activate the ClearAll method which will remove all items from the SourceList list and the TargetList list.
That wraps it all up. Now you can test your finished user control.
We are using Server Intellect
and have found that by far, they are the most friendly,
responsive, and knowledgeable support team we've ever dealt with!