Page 162 - DCAP312_WEB_TECHNOLOGIES_II

Web Technologies-II

Notes • In the third part, you will add custom properties and methods to the user control so that
you can interact with the control from the host page.

Tasks illustrated in this include the following:
• Creating a user control and adding ASP.NET server controls to the user control.
• Creating properties and a method in the user control.

• Adding a user control to a host page.
• Adding code to the host page to handle the user control.
Creating the User Control

Creating a user control is similar to creating an ASP.NET Web page. In fact, a user control is
effectively a subset of an ASP.NET page and it can include most of the types of elements that
you put on an ASP.NET page.
To create a user control

1. In Solution Explorer, right-click the name of the Website, and then click Add New Item.
2. In the Add New Item <Path> dialog box, under Visual Studio installed templates, click
Web User Control.

3. In the Name box, type ListPicker.
The user control file will have an .ascx extension, which is added automatically to ListPicker.
4. In the Language list, select the programming language that you prefer to work in.

5. Click Add.
The new control is created and is opened in the designer. The markup for the control looks similar
to that for a page, with one important exception: there is no Page directive at the top of the page.
Instead, there is an Control directive, which identifies the file to ASP.NET as a user control.
Adding Server Controls to the User Control

In this part of the walkthrough, you will add the controls that make up the user interface for
the user control.

To add server controls
1. Switch to Design view.(If you are working with a code-behind page, switch to the
ListPicker.ascx control and then switch to Design view.)
2. On the Table menu, click Insert Table.
3. Use the Insert Table dialog box to create a table with one row and three columns, and
then click OK.
You are creating the table to hold the controls; that is, a layout table.

4. In the table, in the left column, type Available, and then press ENTER to create a new
line.
5. In the right column, type Selected, and then press ENTER to create a new line.

6. From the Standard group in the Toolbox, drag the following controls onto the table and
set their properties as indicated.

156 LOVELY PROFESSIONAL UNIVERSITY