In this tutorial you will go through an overview of server controls, adaptive rendering, control state, new controls such as Multiview control, Wizard control, BulletedList, DynamicImage and the FileUpload Control.
One of the significant efforts of ASP.NET 2.0 is to provide developers facilities to build applications for a range of devices including devices that may be created in the future. The software defines a common architecture for Web controls and adapters and unifies the functionality of the mobiles with a guarantee that the developer has not to learn any new programming techniques or API. The process of adaptive rendering of mobile controls in ASP.NET is now extended to ASP.NET controls, thereby blurring the differences between them at the API level. However semantics and usability of mobile and web applications remain distinct.
The features of the new controls that have been included in ASP.NET 2.0 are reflective of the new needs that have been identified and addressed. Personalization, data binding models and control states have received specific focus. All controls have been given the same < asp: > prefix, irrespective of the fact that they are mobile controls or otherwise.
The process of creating different markup and layout for different devices is known as adaptive rendering. Container elements such as forms and pages and controls in ASP.NET are subject to adaptive rendering. The advantage of this technique is that it reduces the code needed to write multi device applications and brings in the concept of ‘write once render everywhere’ into application development. The controls in ASP.NET 2.0 are designed to render anywhere for any type of device. The adapters or extra code adapts the output of a control device so that no function gets lost in the transition.
The adapter is a component that overrides the life cycle stages of controls to allow for device specific handling. ASP.NET maps an adapter to a control for each request that is served. The control references the mapped adapter through the Adapter(protected) property. Composite controls defer to its children for rendering. Custom controls may require adapters to be specifically mapped to them.
Adaptive rendering, therefore, has been made into an internal process of generating a Web page.
Adapters can be extended by creating custom adapters and by device filtering. Built in adapter classes can be extended to modify the appearance of controls for a device or device filtering expressions can be declared to override specific properties.
ASP.NET 2.0 has introduced the concept of Control State to maintain the state of controls across requests. This is clearly distinguished from View state in that the control state is a vital piece of control infrastructure. Control state can be defined as a collection of critical view state data that controls need to function. Since this data is kept separate from the view state, it does not get affected if the view state is disabled. Moreover, Control state has to be implemented using a number of steps.
A control that requires a private state sends a signal to the page by calling RegisterRequiresControlState method of the page class. The code will look like this:
protected override void OnInit(EventArgs e)
The control state can be stored in any medium. Generally arrays or collections are used. Each control persists and loads its control state using a pair of overridable methods:
protected override object SaveControlState()
protected override void LoadControlState(Object state)
Control states are similar to View states in so far as they are saved and loaded in the same stage of the pipeline as the view state. It is recommended that controls should make minimum use of the control state except for critical, private information.
The developer should be conscious that all control states require serialization and deserialization and this can be done only by calling the SaveControlState and LoadControlState methods. It is also important to remember that all objects that form the control state must be serializable.
ASP.NET introduces a number of new controls. The first of these is the Panel control. Other controls can be added to the panel control and it supports vertical and horizontal scrollbars which are implemented through the overflow CSS style.
The Multi view control presents a number of views to the client, however only one of them will be the active view. The active view is a view object. The active view can be changed using the postback events when the user clicks a button or links which are embedded in the current view. A new view can be indicated by setting the ActiveViewIndex property or the view object can be passed to the ActiveView method.
The WizardControl is a control that is similar to the multiview control. It is a composite control that internally uses the multiview control to display and hide panels. The control has a number of navigation buttons that can be used to trigger server side events. Both linear and non linear navigation has been made possible. The finish button collects all the data and processes them. It must be noted that all the controls are part of a page and hence they can be accessed code wise.
The BulletedList control is a control built around the < ul > and < ol > HTML tags. However, it has some features that are unique. The bullet style, the data binding feature and the custom images are uniquely its own. The control lets the developer choose the style of the element that precedes the item. Numbers, squares, circles and upper or lower cases can be used. Child items can be hyperlinks, plain texts or buttons.
The DynamicImage Control is a wrapper around the tag. It has the capability of adapting images based on the capacity of the requesting browser. A number of new properties have been added to this control to provide for these functionalities. The source image can be expressed as an array of bytes, a file, or an image generation service. The ImageBytes property can be used for passing a file. If the ImageGenerator URL property is set the image can be dynamically generated. If parameters have to be passed the < asp:parameter > control can be used. The image generator has a .asix extension.
The FileUpload Control as the name suggests uploads files using the HtmlInputFile server control. This control is a wrapper around the < input type="file"/ > HTML tag. This control provides an abstract interface compared to the FileUpload control. Users can upload files or select a file for upload using the Browse button on the client machine. However, the FileUpload control does not automatically save a file to the server. The user has to specifically cause the postback and file upload. The control can be accessed by using the FileName property or FileContent property. Specific content in the file can be accessed by using the PostedFile property. The SaveAs method makes a copy of the file on the server side. Exception will be thrown if the folder does not exist.
This tutorial has covered the major components that are required for creating an ASP.NET 2.0 application. The development environment, the page object and the controls have been examined in some detail to familiarize the user with the software. The Visual Studio.NET 2005 interface delivers a high quality IDE that makes for rapid application development and saves the developer much of the drudgery of creating code repeatedly for controls that are frequently used.
In the next tutorial of the series we shall explore the use of Master pages which is a new feature in ASP.NET 2.0.