Browse DevX
Sign up for e-mail newsletters from DevX


ASP.NET: Extending the Power of Web Pages with User Controls : Page 2

User controls represent an interesting and powerful level of page reusability in ASP.NET. You can build user controls by extracting and combining blocks of code from existing pages. You can also assemble ASP.NET controls together in a sort of embeddable form for use in Web pages. In this article, you'll get a crash-course on how to design, write and use ASP.NET user controls.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Let's see what a user control is all about with an example (You can download the source code for this article here). The idea is to build an input control that takes a date and splits it into its constituent elements: year, month and day. These date elements are then displayed as individual textboxes. Just as an ASP.NET page, a user control file is made of three main sections: directives, script and layout.

<%@ Control ClassName="DateBox" Language="C#"%> <script runat="server"> public string Separator = "/"; </script> <table><tr><td> <asp:textbox runat="server" id="_txtMonth" columns="2" maxlength="2" style="font-family:courier new;" /> <%=Separator%> <asp:textbox runat="server" id="_txtDay" columns="2" maxlength="2" style="font-family:courier new;" /> <%=Separator%> <asp:textbox runat="server" id="_txtYear" columns="4" maxlength="4" style="font-family:courier new;" /> </td></tr></table>

The @Control directive is very similar to @Page and lets you set general-purpose directives for the control. The most important difference with @Page is that you cannot set the Trace and the Debug attributes, whose values are inherited from the host page (see the sidebar "Tracing the Pagelet Output"). In @Control, you normally set the language of the control (attribute Language) and the public name of the class you're developing (attribute ClassName).

Another interesting directive you might want to set for user controls is @OutputCache to control the caching features of a portion of the page.

The <script> block contains all the server-side code that has to do with the behavior of the embedded controls. Each public entity defined in the <script> block is accessible from the external callers. Here you define the control's methods, properties and events.

Finally, the layout section contains the user interface of the control. You can use any ASP.NET control, including other pagelets and custom controls. In addition, you can make use of data-binding expressions as well as ASP-style <% ... %> code blocks.

The code above creates a control made of three child textbox controls separated by a separator character. The separator character is represented by a string property that is inserted in the layout using a code block.

Another interesting similarity between user controls and Web pages is that you can write user controls using code-behind technology. Code-behind gives you the ability to place all the code for your control into a separate C# or a Visual Basic class. A practical result of this programming approach is that you implement your component in two distinct and physically separated files—one .ascx for directives and layout and one .cs (or .vb) with the business logic. If you choose the code-behind approach, there is no need to have a script block in the ASCX file. Here's how the directive changes for code-behind:

<%@ Control ClassName="DateBox" Language="C#" Inherits="CodeMagazine.BaseDateBox" Src="DateBox.cs"%>

The Inherits attribute indicates the actual base class—it is UserControl by default. The Src attribute points to the source code of the base class. The class is compiled into an assembly on the fly and the assembly linked to the ASP.NET application.

As an alternative, you can take the base class for the pagelet from an existing assembly. In this case, use the Assembly attribute. In any case, the user control must derive directly or indirectly from UserControl.

Other than for writing more modular and encapsulated code, code-behind is important because it lets you use strongly-typed references to the control in client pages. (See the sidebar "From Pages to Pagelets" for a summary checklist of how to convert ASP.NET pages to user controls.)

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date