ASP.NET Controls Explained: Part 1/2 - HTML Controls and Server Controls
(Page 3 of 5 )
HTML controls and server controls are somewhat similar, and can sometimes be used interchangeably to do the same thing. For example,
<asp:Image> and
<img runat="server"> both accomplish the same task, displaying an image on a web page.
HTML controls refer to HTML tags that have the runat="server" attribute. For example,
<img src=""> is a standard HTML tag, where as
<img src="" runat="server"> is an HTML Control.
Server controls refer to tags starting with
<asp. For example,
<asp:DataGrid id="" runat="server"> and
<asp:image id="" runat="server">. The main advantage of using server controls over HTML controls is that they are used to provide some sort of added functionality for your ASP.NET pages, such as interactive data grids and calendars. The output code is generated dynamically from server controls, and they only output code that is compatible with the client's web browser. Server controls provide programmers with a richer set of features than HTML controls.
You can use both HTML controls and server controls for just about anything. However, the main purpose of these controls is to help separate HTML presentation code from application logic code. Notice how I've said "help separate"? to completely separate them from HTML code, you need to move them to a different file. We will need to use code behind technique to accomplish this, which we will cover soon.
Using both HTML and server controls also allows us to control their properties dynamically. Let's have a look at an example to demonstrate the use of HTML and server controls. This page will hide display the devArticles logo if the client's browser is Internet Explorer only. The logo will be hidden if another browser, such as Netscape navigator is detected. The example below demonstrates how we can manipulate the properties of controls dynamically, as well as how we can use controls to separate HTML from application logic.
Open up notepad and enter following code. Save it as samplecontrol.aspx:
<html>
<head>
<title>Server Control and HTML Control Example</title>
<script language ="c#" runat="server">
void page_load()
{
if (Request.Browser.Browser != "IE")
{
devLogo.Visible = false;
}
browserName.Text = Request.Browser.Browser;
}
</script>
</head>
<body>
<img src = "http://www.devarticles.com/dlogo.gif" runat= "server" id = "devLogo">
<br>You are running <asp:Label id= "browserName" runat="server"/>
</body>
</html>When you run this page in Internet Explorer, it should look like this:
It should look like this in Netscape Navigator:
Let's walk through the code in our server control example shown above.
if (Request.Browser.Browser != "IE")
{
devLogo.Visible = false;
}The code above checks whether or not the users browser is Internet Explorer. Because all ASP.NET pages are processed on the server, if the user isn't running IE then the visible property of the devLogo HTML image control is set to false, which results in the image not being displayed on the page at all (ie: its
<img> tag isn't even written to the page).
browserName.Text = Request.Browser.Browser;The line above changes the text property of our label control to the name of the users browser, such as "IE" or "Netscape". The text property of a label control is actually the value that is output to the users browser, so if the user was running Internet Explorer for example, then the
<asp:label> tag will be replaced with "IE". As with the
<image> HTML control, the visitor will never actually see the <asp:label> server control.
Now that we've gone through the details of the example shown above, let's take a look at the equivalent code we would've had to use in traditional ASP to accomplish the same result:
<html>
<head>
<title>Server Control and HTML Control Example</title>
</head>
<body>
<%
set objBrowserType = Server.CreateObject ("MSWC.BrowserType")
if objBrowserType.Browser = "IE" then
%>
<img src="http://www.devarticles.com/dlogo.gif">
<%
end if
%>
<br>You are running <%=objBrowserType.Browser%>
<%
set objBrowserType = nothing
%>
</body>
</html>As you can see, it's fairly messy and unorganized. The ASP and HTML code is mixed together, and when a designer or programmer attempts to edit the code, they may not know both ASP and HTML and could get confused. At least with the ASP.NET server controls and HTML controls, we can separate HTML code from application logic, clearly showing where the ASP.NET code ends, and where the HTML code starts.
You should always use HTML and server controls when you have dynamic content, and need to separate your HTML presentation code from your application logic code. I use HTML and server controls extensively on my site, and I find that it makes managing my code so much easier.
Next: Code Behind >>
More ASP.NET Articles
More By James Yang
/ 6 
