- Initializing User Controls
- Building User Controls
- Building Web Forms with User Controls
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building User Controls
This example demonstrates how to build three user controls that will be reusable across all pages of a web site: HeaderControl, MenuControl, and FooterControl. Each is built with a table to give it organization and structure.
We'll start with HeaderControl. This user control is designed to reside at the top of each web page. It will have a table with two cells, holding a logo and an advertisement banner, respectively.
Click the Table button in the toolbar above the designer to open the Table Wizard. Add a new table with one row and two columns.
Make the width 100%, set the border size to 0, and click OK.
Go back to the designer.
Click in the left cell of the table and set the width property in the Object Inspector to 25.
Choose Insert, Image, Browse and add Logo.tif to the left cell. Set the alternate text to That's News to Me.
Add SpaceForSaleBanner.tif to the right cell and center the cell contents. Figure 3 shows the results so far.
)
Figure
3 The HeaderControl user control contains a table with a couple of
graphics, which are common elements of a typical web site.
Now the MenuControl user control:
Add a new table with one row and one column. Set the width to 125 and the border width to 0.
Add two hyperlink controls to the table. Change the Text property of the first hyperlink to Home and set its NavigateUrl property to Default.aspx.
Set the text property of the second hyperlink to About and set its NavigateUrl property to About.aspx. Figure 4 shows the completed MenuControl.
)
Figure
4 The MenuControl user control contains links to other pages on the sample
web site.
For the FooterControl user control, simply type the following text on the visual design surface (see Figure 5):
For more information contact: WebMaster@ThatsNewsToMe.com
This control didn't need a table because it just fits at the bottom of a web page and doesn't have to have special formatting. This is where you can add text links to other pages, a copyright notice, or any other content you want at the bottom of the web page.
)
Figure
5 The FooterControl user control resides at the bottom of the web
page.
The three controls created to this point represent common elements of a web site. They can be placed on each page of a web site to save you from having to re-create the content every time.