Welcome to the 23rd chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
Besides using HTML and Web server controls, you can easily create your own custom, reusable controls by using the same techniques you have learned to develop Web Forms pages. These controls are called user controls.
Very similar to Win32 Delphi's TFrame objects, an ASP.NET User Control is a container for components; it can be nested within Web Forms or other User Controls. User controls offer you an easy way to split and reuse common user interface functionality across the pages of your ASP.NET Web application.
Creating a Custom User Control
To create a Web User Control, you start by adding a Web User Control component to a Web application. Next, you define the control's visual interface by adding other Web Controls and HTML elements to your user control. A user control can expose properties and can even introduce its own events.One of the simplest uses of a Web Server Control is to represent some "static" content that will appear on every Web Forms Page of your application, such as contact details or a common page footer / header.
Let's see how to build a simple "Site Contact" User Control. I'll suppose you know how to create a new web application using your version of Delphi. Make sure you have at least one Web Forms Page (Default.aspx or similar).
Adding a User Control to a Project
Here are the steps to add a user control to your ASP.NET application.- For the start add a folder where you will store all the user controls for a project.
- On the "Project Manager" window, right click on the name of your project. Select "Add New" - "Folder". Rename the newly created folder to "Controls".
- Let's now add our user control to the "Controls" folder. From the context menu (right-click on the project name again) select "Add New" - "Other"
- In the "New Items" dialog box, select the "Delphi for .Net" - "New ASP.NET files" group.
- Select "ASP.NET User Control" and click the OK button.
- A new file is added to the project with the "WebUserControl1.ascx" name. The file is opened in the IDE.
- It's wise to rename the user control file to something that actually describes the purpose of the user control. Using the Project Manager window rename the file to "ContactInfo.ascx"
- Since renaming the file will not, unfortunately, rename the class name of the user control, you need to do that manually. Using the Object Inspector change the type name from "TWebUserControl1" to "TContactInfo"
An empty user control designer only displays the following "@Control" directive:
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="ContactInfo.pas" Inherits="ContactInfo.TContactInfo"%>User control declarative syntax is very similar to syntax used to create a Web Forms page; the primary difference is that user controls do not include the <html>, <body>, and <form> elements around the content.
Adding Content to the ContactInfo User Control
We'll keep our ContactInfo control rather simple. Either open up the "Design" view and drop a Table object on the designer; or open the "ascx/html" view and add the HTML table tag manually. The ContactInfo will host a copyright notice, and an "email" hyperlink. Two Label components will be used: "infoLabel" and "emailLabel". Also, a "static" hyperlink will be included on the User Control.<%@ Control Language="c#" AutoEventWireup="false" Codebehind="ContactInfo.pas" Inherits="ContactInfo.TContactInfo"%>As you can see, building/developing a user control is almost identical to working with the aspx web page.
<table>
<tr>
<td>
<asp:Label runat="<b>server</b>" id="<b>infoLabel</b>"></asp:label>
</td>
<td>
<a href="http://delphi.about.com">ASP.NET Delphi Tutorial</a>
</td>
<td>
<asp:Label runat="<b>server</b>" id="<b>emailLabel</b>"></asp:label>
</td>
</tr>
</table>
Let's now see how to add our user control to a web page ...
