The Question
Recently, a student approached me with what seemed like a straight
forward question: How do you programmatically change the background color
of a Web Form? The answer wasn't as obvious as I first thought.
The Answer
Change the bgColor attribute of the body tag.
.NET offers the ability to alter various Web Form properties at design time:
setting a background image, changing the left margins or even altering
the text of the title tag. At run time, however, these properties are not
immediately available.
In each of the examples above, the values set at design time add attributes
to various HTML elements within the document.
In this example a change has been made to the background color which
has subsequently added an attribute of bgColor
and corresponding value of #66cccc to the body tag.
| <body MS_POSITIONING="GridLayout"
bgColor="#66cccc"> |
In short, our design time changes generate standard HTML.
So to ultimately reach our objective of programmatically changing the background
color, the attributes of ID and
runat
must be added. The addition of runat=server to
the body tag allows the element to be treated as a server control. Adding the ID attribute gives the object a name
so the newly ordained server side control can be called upon and manipulated.
| <body id="bodyElement" MS_POSITIONING="GridLayout"
runat="server" bgColor="#66cccc"> |
Now that the body tag can be programmatically addressed by the name of bodyElement the background color can be assigned: unfortunately
the code of bodyElement.bgColor wont work.
With many HTML elements, specific classes have been written to correspond
to their commonly accessed properties. Such is the case for the HTML TextBox
control (HtmlInputText class) as Value, Size and MaxLength are the
properties to control the text, width and total number of characters in the
TextBox (the WebControl.Textbox class also offers
the same solution via similar though slightly different methods: Text, Size and MaxLength).
The body tag however does not have a specific class to call its own. Along with a variety of other tags such as SPAN,
DIV, TITLE and FONT, they fall under the HTMLGenericControl
class. While the class does expose a small number of useful properties such
as InnerText and Visible, bgColor is not among the list as there
are some elements, such as the TITLE tag, which have no need of the bgColor
attribute.
If the class, in this case HTMLGenericControl,
does not contain a property which maps to a desired HTML attribute, then one
can be added through the Attributes
property.
| bodyElement.attributes("bgColor")="Green" |
As seen in the example above, the attributes property creates a name value
pair of bgColor and Green which is added to the controls attributes
collection. Available to both Web and
HTML controls, this architecture would then allow multiple attributes to be
assigned, including client side events and their associated scripts.
Two solutions are listed below: the first is inline and the second using
code behind.
Inline Coding Example
| <HTML>
<HEAD>
<title>WebForm1</title>
</HEAD>
<body id="bodyElement"
runat="server" bgColor="#66cccc">
<form id="Form1" method="post" runat="server">
</form>
</body>
<script runat=server>
Private Sub Page_Load(ByVal
sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
bodyElement.attributes("bgColor")="Green"
End Sub
</script>
</HTML>
|
Code behind solution
| Public Class WebForm1
Inherits System.Web.UI.Page
Protected bodyElement As HtmlGenericControl
‘web form designer generated code
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
bodyElement.Attributes("bgColor")
= "Green"
End Sub
End Class
|
Regardless if the goal is to dynamically change the text
in the TITLE tag or apply client side events to server side controls, the
Attributes property ensures flexibility and in our case the flexibility to
work unhindered with an existing HTML control.
The only other question remaining is should this solution appear on my next
quiz?