Chapter 6 - Web Server Controls

Chapter 6 - Web server Controls

6.1Overview

A web server control provides an easy way to add HTML controls:

HTML and Web Server Controls Compared

The table below compares using conventional HTML controls with web server controls:

Method / HTML
Standard HTML / h2Your Order</h2
divid="divForm"
pProduct: inputtype="text"id=" txtProduct" /</p
pQuantity: inputtype="text"id=" txtQuantity" /</p
pinputtype="submit"value="Place order"id="btnOrder" /</p
</div
Web server controls / divid="divForm">
pProduct: asp:TextBoxID="txtProduct"runat="server"/</p
pQuantity: asp:TextBoxID="txtQuantity"runat="server"/</p
pasp:ButtonID="btnOrder"runat="server"Text="Place order"/</p
</div

The web server controls shown above would render HTML similar to this:

6.2How ASP.NET Renders Web Server Controls

To understand everything to do with ASP.NET, it is vital to understand the client-server model of what happens when you request a web page:

6.3Advantages of Web Server Controls

Using web server controls provides 4 main advantages: readability, state maintenance, cross-browser support and server-side event-handling.

Readability

Web server controls have more sensible attribute names!

State Maintenance (Viewstate)

The form on the previous page using web server controls includes the following when you browse it:

Cross-Browser Support

When you browse an ASP.NET page (any file with extension .aspx), the web server translates the content into pure HTML:

Server Side Event-Handling

Probably the biggest benefit of using web server controls is that you can write code to handle their events:

6.4Usable Element Ids – the ClientIdMode Property

The Problem – IDs for Controls aren’t Known

One of the biggest problems with ASP.NET used to be that the HTML generated contained complicated and unpredictable element ids. Here’s a typical example id from :

_ctl0_ContentPlaceHolder1_UcQuestion1_UcAnswerA_hypAnswerLetter

The Solution – the ClientIdMode Property

ASP.NET 4.0 introduced a new property called ClientIdMode:

The possible values for this property are explained overleaf.

What the Possible ClientIdMode Property Values Mean

Here’s what the 4 possible values of the property shown above mean, with the id each would generate for the above textbox:

Value / What it means / Id generated
AutoID / This is the setting used by previous versions of ASP.NET. You’ll never have any problems with uniqueness of HTML element ids, but equally you’ll never have much control over what the elements’ ids are. / ctl00_cphBody_txtProduct
Static / This uses the id of the web server control to name the corresponding HTML element id. The good news is that the result is exactly what you’d want, but you need to be careful when working with controls like gridviews, which may contain child controls whose HTML element ids should be unique, but may not be. / txtProduct
Predictable / This tries to overcome the limitations of static ids (as above) by setting sensible id values which are a compromise between:

The need to ensure all elements have unique ids; and
The need to ensure element ids are predictable.

/ cphBody_txtProduct
Inherit / If ids inherit their client id, the element id will depend on the controls to which they belong. / cphBody_txtProduct

6.5Adding Web Server Controls

You can add web server controls in Design or Source view.

Adding Controls in Design View

To add (say) a clickable button to a web page:

The most common controls are shown in the table on the right:

Forcing Visual Studio to Insert Quotes

Once you get used to how autocompletion works, adding controls in source view is quicker – especially if you tell Visual Studio to insert quotation marks round attribute values:

Adding Controls in Source (HTML) View

You must add two properties for every web server control: a unique id, and the fact that it’s running at the server:

Other properties depend on what type of web server control you’re adding. For example, for a simple button you could type:

6.6Setting Default Buttons

Setting the Default Button for a Page - Theory

What happens when you press on a web page? The answer is that it will process the page form’s default button. In theory this is easy to set:

Unfortunately, if you’re using master pages the form is declared only on the master page, so this technique won’t work.

Setting the Default Button for a Page – Practice

There are lots of solutions to the above problems; our favourite is to set the default button on a page’s load, since this always works:

6.7Setting a Form’s Focus to a Textbox

Suppose that you want to set the focus of a form to be a particular textbox:

The safest way to achieve this is to apply the SetFocus method to the page when it loads: