Crafting ASP.NET User Controls in C#Builder
- 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 in ASP.NET offers a huge boost in productivity for web developers. ASP.NET user controls are reusable objects that you can create with the C#Builder visual designer and add to multiple pages on your web site. You can drag-and-drop other controls into a user control or build your own content as needed.
Initializing User Controls
To get started with building a user control, you'll need to create a new ASP.NET application. (My InformIT article "Building ASP.NET Applications with C#Builder for Microsoft .NET" has more guidance on how to set up an ASP.NET application and other useful features of the C#Builder web development environment.) When the ASP.NET application project is ready, you'll be able to add a user control.
***Please link the highlighted text above to the article with that name (scheduled for posting 3/12/04). Thanks. rd***
User controls are developed and deployed in the same project in which they were created, and are saved as a file with the extension ASCX. The only way to add a user control to another project is to copy the files.
TIP
If you need controls that can be used across different projects, consider creating custom controls (the subject of a different article I'll be writing in the future).
To add a new user control to a project, follow these steps:
Press Ctrl+N to open the New Items dialog box.
Open the C# ASP Projects folder and then the C# ASP Files subfolder (see Figure 1).
Select the ASP.NET User Control project type.
Click OK.
The Web User Control Wizard creates a new user control named WebUserControl1.ascx in the current project, as shown in Figure 2.
)
Figure
1 The New Items dialog box contains a wizard for creating a user
control.
)
Figure
2 A new user control with an ASCX filename extension is added to the
project.
Double-click WebUserControl1.ascx in the Project Manager to open the user control in design mode in the designer. The screen is blank and ready for controls and other content. Before doing anything else, click the WebUserControl1.ascx tab at the bottom of the designer, and look at the HTML generated by the wizard. As shown in Listing 1, the only code in the form is the Control directive.
Listing 1 The Control Directive
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="WebUserControl1.ascx.cs" Inherits="CraftingUserControls.WebUserControl1"%>
As Listing 1 shows, user controls work very much like normal pages. The Language attribute specifies that any code added to this control, in script blocks, will be written in C#. The Codebehind attribute is used by C#Builder to associate this control with its code-behind file. The Inherits attribute identifies the type that this control inherits.
The Control directive is very much like a Page directive except that it works with a user control. The difference is that the HTML for the user control must be built with the knowledge that it can be added to a web page. For example, a web page has a header section, between <head></head> tags. You could build a control that contains this markup; to prevent duplicate tags, however, you would have to remember not to add the same markup to the web page. Remembering that the HTML in the user control will be added to the web page when it's rendered will help you to avoid problems.
This particular user control will be used as the header on a web page, and one of the first things you'll want to do is rename it:
Right-click the file in the Project Manager and select Rename.
Change the filename to HeaderControl.ascx.
To change the typename, open the code-behind file, change the class name from WebUserControl1 to HeaderControl, and click Save.
The HTML for this control shows that the Codebehind attribute changed from WebUserControl1.ascx.cs, as shown in Listing 1, to HeaderControl.ascx.cs.
However, the Inherits attribute, which corresponds to the typename in the code-behind file, didn't change. The filename and the typename are separate entities, so you have to change both. Trying to change the Inherits attribute of the Control directive doesn't work because C#Builder synchronizes it with the actual typename in the code-behind file.
Going back to the Control directive, you'll observe that the Inherits attribute has changed accordingly.
Using the same procedures just described, create two more user controls named FooterControl and MenuControl.