You are here:About>Computing & Technology>Delphi Programming> Learn Delphi for .NET> ASP.NET> Developing and Using Custom User Controls in Delphi ASP.NET applications
About.comDelphi Programming
User Control in Delphi's Project Manager
Source Code

Download

Discuss

Post your views, comments, questions and doubts to this article.

Developing and Using Custom User Controls in ASP.NET

From Zarko Gajic,
Your Guide to Delphi Programming.
FREE Newsletter. Sign Up Now!

What are User Controls? Creating your First ASP.NET User Control in Delphi.

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.
  1. For the start add a folder where you will store all the user controls for a project.
  2. On the "Project Manager" window, right click on the name of your project. Select "Add New" - "Folder". Rename the newly created folder to "Controls".
  3. 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"
  4. In the "New Items" dialog box, select the "Delphi for .Net" - "New ASP.NET files" group.
  5. Select "ASP.NET User Control" and click the OK button.
  6. A new file is added to the project with the "WebUserControl1.ascx" name. The file is opened in the IDE.
  7. 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"
  8. 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"
Note that the file added to the project has the ASCX extension, with the associated .pas file. The ASCX file represents the visual content, the .pas contains the programming code.

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"%>
<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>
As you can see, building/developing a user control is almost identical to working with the aspx web page.

Let's now see how to add our user control to a web page ...
Las Vegas on a Budget

Find a BargainHotel DealsCheap EatsFree AttractionsEntertainment for Less

 All Topics | Email Article | Print this Page | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.