This tutorial will walk you through building simple website pages a navigation structure. We will also create a basic navigation system
by creating a sitemap for the navigation structure.
- In the solution explorer right click on name of the website (The top file in the list). Select Add new Item from the
list to bring up the Visual Studio installed templates menu.
- Select Web User Control and in the name box type ListPicker then click Add.
This will generate a user control file with an .ascx extension.
This action will create a file very similar to web form however there is one difference. There is a @ Control
directive at the top of the page in place of the @ Page directive that is on a typical web page.
This directive tells ASP.NET that this page is a user control page.
- Now it is time to build the user interface. On the bottom of the page select design view.
Select insert table from the table menu. Select one row and three columns from the table dialog box and click OK.
- In the design view, click on the first column and type Available then press Enter to create a space.
Click on the third column in the table and type Selected and press Enter to create a space.
- In the toolbox to the left in the Standard list select a listBox and drag it underneath the text in the first column.
The Size of the ListBox should be 200X200 px. In the properties section of the ListBox name the ID SourceList.
All control items will be located in the standard box.
The ID and the text of a control can be changed in the properties panel on the lower right side of the page.
- Click on a Button control and drag it to the middle column.
The ID of this button is AddAll and the text of the button is >>.
- Select another button and drag it under the first button. The ID of this button
is AddOne and the text is (SPACEBAR) > (SPACEBAR).
- Drag a third button and place it below the first two in the middle column.
The ID of this button is Remove and the Text is (SPACEBAR) X (SPACEBAR).
- Click and drag a ListBox to the third column and place it underneath the selected text. The ID is TargetList.
When you finish designing the interface, it should look like the image below.
Yes, it is possible to find a good web host.
Sometimes it takes a while. After trying several,
we went with Server Intellect
and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.
- Click the SourceList list, and then in the properties panel select the Items property and click the ellipsis (…) button.
- When the ListItem Collection Editor pops up, click Add three times to add the properties.
Under ListItem properties set the Text value to A, B, and C.
This will create a list to populate the Sourcelist so you can see the data. This is a temporary list
and will be changed later on to be a “dynamic” list. Now that the interface is designed
we can add the code to handle the user selections. The buttons in the middle column of the table
will be used to move and alter the information in the lists on both sides.
- In design view, double click the >> (AddAll) button. This action will open up a separate page (Code behind),
where you will create an event handler for the click event.
- Copy and paste the following code to the button click event
protected void AddAll_Click(object sender, EventArgs e)
{
TargetList.SelectedIndex = -1;
foreach(ListItem li in SourceList.Items)
{
AddItem(li);
}
}
The code loops through the list items in the SourceList list.
For each item selected it calls the AddItem method and passes it to the current item.
- Switch back to the design view (ListPicker.ascx). Double click on the > (AddOne) button to
create an event handler for this buttons click event.
Copy and paste the following code to the button click event
protected void AddOne_Click(object sender, EventArgs e)
{
if(SourceList.SelectedIndex >= 0)
{
AddItem(SourceList.SelectedItem);
}
}
This code will check the SourceList selection and verify that there is a selectable item.
If there is an item, the code will call AddItem method.
- Switch to the design view again and double click on the X (Remove) button to create an event handler
for this buttons click event. Copy and paste the following code to the button click event:
protected void Remove_Click(object sender, EventArgs e)
{
if (TargetList.SelectedIndex >= 0)
{
TargetList.Items.RemoveAt(TargetList.SelectedIndex);
TargetList.SelectedIndex = -1;
}
}
This code checks the target list to verify that there is a selection and then
removes the selected item from the list and the selection.
- Finally, we will add the AddItem method. Copy and paste the following code into a new space underneath the previous line:
protected void AddItem(ListItem li)
{
TargetList.SelectedIndex = -1;
TargetList.Items.Add(li);
}
You will be returning to this line of code to change it later on in next tutorial.
This code will add an item from the selected list to the target list.
- In order to run the application, the control must be hosted on a page.
You cannot directly test a user control so a host page must be created.
In the solution explorer right click on the name of the web site and click Add New Item.
- In the Visual Studio installed templates panel, click Web Form and type HostUserControl
in the name box, then click Add. The new page will appear in the designer.
- Switch the page to design view.
- In the solution explorer, drag the user control file (ListPicker.ascx) onto the page.
The host page MUST be in design view when you drag the control file to the page.
When you place the user control on the page, it will create two new lines of code on the page.
- Now that the host page has been created, we can run the application.
To test the application, press CTRL+5. When you are finished, close the browser.
We have a user control but it is very basic, and really doesn’t work well as a general-purpose control.
In part two of this tutorial we will modify the control by allowing the user to specify, retrieve,
display and clear the list of items in the target list quickly. Accomplishing this requires that the communication
between the host page and the user control is set to share values, read properties, and issue commands.