Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources] نسخه متنی

Chapter 20: Building a Reusable User Interface as User Controls

Microsoft ASP.NET Mobile Controls provide a rich selection of mobile controls that offer the functionality you need to build compelling mobile Web applications. However, you might find yourself repeatedly implementing the same piece of user interface functionality, using the same combination of controls. By encapsulating this user interface functionality in a reusable component, you can take advantage of a major strength of ASP.NET: user controls. In this chapter, you'll learn how to build user controls.

Building a User Control

User controls are very easy to build. In fact, they aren't any harder to build than regular mobile Web Forms pages, and they look identical to mobile Web Forms pages except for the header declarations. Like mobile Web Forms pages, user controls can consist of a single file containing ASP.NET declarative syntax and code, or they can consist of an ASP.NET page and a code-behind module. By convention, you name a user control with the .ascx extension to distinguish it from a regular mobile Web Forms page.

User controls offer several advantages. They're quick and easy to develop using ASP.NET declarative syntax and script blocks (or a code-behind module). They offer a convenient way to reuse pieces of user interface functionality because converting an existing mobile Web Forms page to a user control is a simple matter. And you can cache user controls using page fragment caching, as described in Chapter 13.

Creating a Simple User Control

To begin, create a new mobile Web application project in Microsoft Visual Studio .NET, and name it SimpleUserControl. Click Project, click Add New Item, and then click Mobile Web User Control in the Templates pane of the Add New Item dialog box. Name this user control HelloWorldUserControl.ascx. Click Open, and Visual Studio .NET creates a mobile Web user control and adds it to your project.

In Design view of the user control, drag controls onto the user control just as if you were developing a mobile Web Forms page, the main difference being that with a user control you're not required to position controls within a Panel or Form container control. For this simple example, drag a Label onto the user control and change its text to Hello User Control.

Now double-click on MobileWebForm1.aspx in Solution Explorer to display the form in Design view. To use the user control you just created, simply click on HelloWorldUserControl.ascx in Solution Explorer and drag it onto Form1 in Design view. That's it! If you run this application, the output of the user control is displayed as part of the output of MobileWebForm1.aspx. However, the HelloWorldUserControl.ascx file is a component that you can reuse in your other mobile Web applications (although, in this example, the control isn't very useful).

Coding a User Control Module

If you examine the files that Visual Studio .NET creates for a mobile Web user control, you'll find that they look very much like a regular mobile Web Forms control. In fact, converting an existing mobile Web Forms page to a user control can be simple: change the file extension to .ascx, change the declarative statements at the head of the .ascx file, and change the base class from which the control is inherited to System.Web.UI.MobileControls.MobileUserControl.

The declarative statements at the head of a user control consisting solely of an .ascx file must use the following format. (These examples are for C#, but you can specify any .NET-supported language.)

<%@ Control "System.Web.UI.MobileControls.MobileUserControl"
Language="C#" %>
<%@ Register TagPrefix="mobile" 
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>

If the user control has a code-behind module, the @ Control declaration consists of the following directives:

<%@ Control CodeBehind="modulename.ascx.cs" Language="c#" 
Inherits="namespace.classname" %>

These directives are very similar to those of a mobile Web Forms page, except that you use the

@ Control directive instead of the

@ Page directive. The

Inherits attribute can point to the

System.Web.UI.MobileControls.MobileUserControl class or to any other class that inherits directly or indirectly from the

MobileUserControl class, such as one defined in a code-behind module.