Download WEB CONTROLS

Chapter 6 - Web Server Controls
CHAPTER 6 - WEB SERVER CONTROLS
6.1
Overview
A web server control provides an
easy way to add HTML controls:
You can create a form like this either in HTML, or using
web server controls. The two ways are compared below.
HTML and Web Server Controls Compared
The table below compares using conventional HTML controls with web server controls:
Method
HTML
<h2>Your Order</h2>
<div id="divForm">
Standard
HTML
<p>Product: <input type="text" id=" txtProduct" /></p>
<p>Quantity: <input type="text" id=" txtQuantity" /></p>
<p><input type="submit" value="Place order" id="btnOrder" /></p>
</div>
<div id="divForm">
Web server
controls
<p>Product: <asp:TextBox ID="txtProduct" runat="server" /></p>
<p>Quantity: <asp:TextBox ID="txtQuantity" runat="server" /></p>
<p><asp:Button ID="btnOrder" runat="server" Text="Place order" /></p>
</div>
The web server controls shown above would render HTML similar to this:
<h2>Your Order</h2>
<div id="divForm">
<p>Product: <input name="ctl00$cphBody$txtProduct" type="text"
id="cphBody_txtProduct" /></p>
<p>Quantity: <input name="ctl00$cphBody$txtQuantity" type="text"
id="cphBody_txtQuantity" /></p>
<p><input type="submit" name="ctl00$cphBody$btnOrder"
value="Place order" id="cphBody_btnOrder" /></p>
By default you lose control
over what your HTML
equivalent control is called
when using web server
controls, although you can
overcome this (as shown
later in this chapter).
</div>
© Copyright 2017
Page 57
Chapter 6 - Web Server Controls
6.2
How 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:
You (the client), sitting at your laptop
The web server, wherever that may be
a) You request a web page in a browser (here
Internet Explorer 7).
b) This request gets sent to the web server, along with a few details about your
computer such as your screen resolution and which browser you’re using.
c) The web server finds the file you’ve requested.
d) The server turns this into the sort of HTML that
your browser and screen will display correctly.
e) The server sends you (the client) this HTML created on-the-fly, ready for
your browser to display on screen.
f)
Your browser
displays this
HTML on your
laptop’s screen.
© Copyright 2017
Page 58
Chapter 6 - Web Server Controls
6.3
Advantages of Web Server Controls
Using web server controls provides 4 main advantages: readability, state maintenance, crossbrowser support and server-side event-handling.
Wise Owl’s Hint
Against this must be set the fact that if you use web server controls,
your HTML will look messy – and from the point of view of search
engine optimisation, extra clutter in your HTML is probably bad news.
Readability
Web server controls have more sensible attribute names!
You don’t have to be an HTML expert to guess that if you want a button to look
like this one, you’ll create a web server control with the following attributes:
<asp:Button ID="btn" Font-Size="Large" ForeColor="Navy"
BackColor="LightBlue" runat="server" Text="Continue" />
State Maintenance (Viewstate)
The form on the previous page using web server controls includes the following when you
browse it:
This viewstate information is what
allows the HTML page to remember
what you typed into a form.
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKLTE0NzExNjI2OGRkghUtVpzMzn4Gbz0wEgbhO7V
1cPQsjpMwdVVyq4zDT7U=" />
</div>
The result is that when you click on the Place order button on
this form, the page “remembers” the product you typed in and
redisplays this when the page reloads.
© Copyright 2017
Page 59
Chapter 6 - Web Server Controls
Cross-Browser Support
When you browse an ASP.NET page (any file with extension .aspx), the web server translates
the content into pure HTML:
The web server takes the underlying page …
… and turns it into pure HTML which your
particular browser will understand.
Wise Owl’s Hint
In practice this benefit is of limited value, and you’ll still have a host of
cross-browser issues if you start using complicated styles or formatting.
Server Side Event-Handling
Probably the biggest benefit of using web server controls is that you can write code to handle
their events:
When you click on a button on a web form like this,
for example …
… you can write code to determine what happens
then (as shown throughout the rest of this manual).
Protected Sub btnOrder_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btnOrder.Click
'you can use Visual Basic or C# to handle events
End Sub
© Copyright 2017
Page 60
Chapter 6 - Web Server Controls
6.4
Usable 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 www.ms-iq.com :
_ctl0_ContentPlaceHolder1_UcQuestion1_UcAnswerA_hypAnswerLetter
Wise Owl’s Hint
If you don’t use JavaScript or AJAX, and use the ClassName property
of web server controls to set CSS styling, you can ignore this page.
The Solution – the ClientIdMode Property
ASP.NET 4.0 introduced a new property called ClientIdMode:
The 4 possible values for the
ClientIdMode property.
The possible values for this property are explained overleaf.
© Copyright 2017
Page 61
Chapter 6 - Web Server Controls
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:
cphBody_txtProduct
 The need to ensure all elements have unique ids; and
 The need to ensure element ids are predictable.
Inherit
If ids inherit their client id, the element id will depend on the controls
to which they belong.
Wise Owl’s Hint
© Copyright 2017
cphBody_txtProduct
The default value of the ClientIdMode property is Predictable. If
you’re doing lots of work with JavaScript which relies on referring to
elements by id, you may prefer to use Static, but you’ll need to take
care to ensure that your element ids are unique.
Page 62
Chapter 6 - Web Server Controls
6.5
Adding Web Server Controls
You can add web server controls in Design or Source view.
Wise Owl’s Hint
To keep this courseware length manageable – and because it’s what we
do ourselves at Wise Owl – this manual uses HTML (source) view for
all future diagrams after this page, but rest assured that any property
you can set in Source view can be set in Design view too.
Adding Controls in Design View
To add (say) a clickable button to a web page:
a) Click where you want your web server
control to go.
b) Double-click on the control in the
Toolbox that you want to add (you can
alternatively click on the control and
drag it onto your web page).
c) You can now rightclick on the control
you’ve added to
change its properties,
although Wise Owl
find it easier to do this
in Source view.
The most common controls are
shown in the table on the right:
Control
What it does
A clickable button
An image
A static bit of text
A section of a page (rendered as a div tag)
A text box (for inputting data into a form)
© Copyright 2017
Page 63
Chapter 6 - Web Server Controls
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:
a) From the Visual Studio menu
select: Tools Options… .
b) Choose Text Editor  HTML
 Formatting (if you can’t see
this, make sure you have the
Show all settings option ticked
at bottom left).
c) Tick this box to make Visual
Studio insert quote marks like
the ones below automatically!
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:
If you omit the runat attribute, ASP.NET will always nag you about this.
This makes us wonder why Microsoft couldn’t add it automatically!
Wise Owl’s Hint
Other properties depend on what type of web server control you’re adding. For example, for a
simple button you could type:
After practice you’ll get used to typing the bare minimum
of characters. To produce the HTML shown here, the
author typed in:
<asp:but r=s id=btnOrder
© Copyright 2017
te=Order
<asp:Button runat="server"
ID="btnOrder" Text="Order" />
/>
Page 64
Chapter 6 - Web Server Controls
6.6
Setting 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:
<form id="form1" runat="server" defaultbutton="btnContinue">
The defaultbutton
property of a form
should do the trick.
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:
Protected Sub Page_Load(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
'set default button to the cancel one
Form.DefaultButton = btnCancel.UniqueID
Normally this would be the default button when you
press
(it’s the first on the form); but we want
the Cancel button to be the default one.
<form method="post"
action="frmOrder.aspx"
onkeypress="javascript:return
WebForm_FireDefaultButton(event,
'cphBody_btnCancel')" id="form1">
Wise Owl’s Hint
© Copyright 2017
To achieve this, set the form’s default button
when you unload the page to be the unique client
id of the cancel button (note that at this stage we
don’t know – or need to know – what this is).
Visual Studio generates a page which includes a
form declaration like this, to run the requisite
JavaScript command when you press
.
If you’ve got multiple forms on the same page in different panels, in
theory you can set the DefaultButton property of each panel on page
load using the same technique. In practice, the author can’t get this to
work!
Page 65
Chapter 6 - Web Server Controls
6.7
Setting a Form’s Focus to a Textbox
Suppose that you want to set the focus of a
form to be a particular textbox:
Suppose that we want to set the focus of the form when it loads
to the txtQty text box, so that the cursor appears flashing here.
The safest way to achieve this is to apply the SetFocus method to the page when it loads:
When you first load this page, set
its focus to be the client id of the
text box txtQty (whatever the
web server may decide that this
should be).
Protected Sub Page_Load(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
'on first page load, position the cursor
'in the qty text box (whatever it's called)
SetFocus(txtQty.ClientID)
Wise Owl’s Hint
Note that a form does have a DefaultFocus property, but this will give
rise to the same problem for master pages as the DefaultButton one
shown on the previous page.
<form id="form1" runat="server"
defaultfocus="txtWhat">
© Copyright 2017
Since this is on the master
page, it’s not much use!
Page 66