Programming HMTL Server Controls
HTML Server Controls have a one-to-one relationship between the names of the properties on the object and the
attribute names of the HTML markup that the control ultimately generates. This yields a programming model that is
quite familiar to people who use HTML. All HTML Server Controls ultimately inherit from the
HtmlContainerControl class, which inherits from the HtmlControl base class. Both are located in the System.
Web.UI.HtmlControls namespace.
The HtmlControl base class defines numerous members which are inherited by all descendents.
All HTML Server Controls receive the following key properties from the HtmlContainerControl base class:
The following example illustrates how to convert HTML controls to HTML Server controls.
By default, when HTML controls are placed onto the Design pane, they are not configured to function as server-
side controls. The HTML controls above, txtUserBirthday and btnPostback, must interact with .NET code on the
Web server, so they must be converted into HTML Server controls. Specifically, the button’s click event will be
handled on the Web server to obtain the value within the txtUserBirthday input area.
To do so, just add the runat="server" attribute to each control. If it is C#, also add the onserverclick attribute.
The code-behind file holds the button click event handler. C# developers must type in the full event handler while
VB’ers can use the two drop down menus at the top of the code-behind file to create the event handler.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected void btnPostback_ServerClick(object sender, EventArgs e)
{
// Get Birthday value.
string sBirthday = txtUserBirthday.Value;
// Process data...
}
}
The VB code is more or less identical, except that the Handles keyword assigns the server-side method to the
Click event.
Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub btnPostback_ServerClick(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnPostback.ServerClick
' Get birthday value.
Dim userBDay As String = Me.txtUserBirthday.Value
' Process data...
End Sub
End Class
Ultimately, when the Web page is loaded into the Web browser, the call to the server-side event is handled via a
client-side JavaScript function. The input button now has an OnClick attribute which maps to the generated client
side JavaScript function, “__doPostBack”. A pair of hidden form fields is used to represent the incoming
parameters to the delegate target. Thus, when the user clicks the button, the Web browser calls this function, which
results in a post back to the server-side event handler.
Here is the crux of the generated client source code. The generated source for any Web page can be viewed by right-
clicking on the page within the browser and selecting ‘View Source’.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title> Untitled Page</title></head>
<body>
<form name="form1" method="post" action="Default2.aspx" id="form1">
<div>
...
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<div>
Please Enter Your Birthdate:<br />
<input name="txtUserBirthday" type="text" id="txtUserBirthday" /><br />
<input language="javascript" onclick="__doPostBack('btnPostback','')"
name="btnPostback" type="button" id="btnPostback" value="button" />
...
</html>
Be aware that this same model is used to handle server-side event handling for Web controls! This is not limited to
HTML Server controls.
HTML Server Controls have a one-to-one relationship between the names of the properties on the object and the
attribute names of the HTML markup that the control ultimately generates. This yields a programming model that is
quite familiar to people who use HTML. All HTML Server Controls ultimately inherit from the
HtmlContainerControl class, which inherits from the HtmlControl base class. Both are located in the System.
Web.UI.HtmlControls namespace.
The HtmlControl base class defines numerous members which are inherited by all descendents.
All HTML Server Controls receive the following key properties from the HtmlContainerControl base class:
The following example illustrates how to convert HTML controls to HTML Server controls.
By default, when HTML controls are placed onto the Design pane, they are not configured to function as server-
side controls. The HTML controls above, txtUserBirthday and btnPostback, must interact with .NET code on the
Web server, so they must be converted into HTML Server controls. Specifically, the button’s click event will be
handled on the Web server to obtain the value within the txtUserBirthday input area.
To do so, just add the runat="server" attribute to each control. If it is C#, also add the onserverclick attribute.
The code-behind file holds the button click event handler. C# developers must type in the full event handler while
VB’ers can use the two drop down menus at the top of the code-behind file to create the event handler.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected void btnPostback_ServerClick(object sender, EventArgs e)
{
// Get Birthday value.
string sBirthday = txtUserBirthday.Value;
// Process data...
}
}
The VB code is more or less identical, except that the Handles keyword assigns the server-side method to the
Click event.
Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub btnPostback_ServerClick(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnPostback.ServerClick
' Get birthday value.
Dim userBDay As String = Me.txtUserBirthday.Value
' Process data...
End Sub
End Class
Ultimately, when the Web page is loaded into the Web browser, the call to the server-side event is handled via a
client-side JavaScript function. The input button now has an OnClick attribute which maps to the generated client
side JavaScript function, “__doPostBack”. A pair of hidden form fields is used to represent the incoming
parameters to the delegate target. Thus, when the user clicks the button, the Web browser calls this function, which
results in a post back to the server-side event handler.
Here is the crux of the generated client source code. The generated source for any Web page can be viewed by right-
clicking on the page within the browser and selecting ‘View Source’.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title> Untitled Page</title></head>
<body>
<form name="form1" method="post" action="Default2.aspx" id="form1">
<div>
...
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<div>
Please Enter Your Birthdate:<br />
<input name="txtUserBirthday" type="text" id="txtUserBirthday" /><br />
<input language="javascript" onclick="__doPostBack('btnPostback','')"
name="btnPostback" type="button" id="btnPostback" value="button" />
...
</html>
Be aware that this same model is used to handle server-side event handling for Web controls! This is not limited to
HTML Server controls.
HTML Server Controls
Table of Contents
Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Courseware
Training Resources
Tutorials
|
|
Services