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.
ASP.NET Controls Explained: Part 1/2
- Introduction
- User Controls
- HTML Controls & Server Controls
- Code Behind
- Conclusion
HTML Controls & Server Controls
You might also like...
About the author
James Yang
James is a student at Georgia Institute of Technology, majoring in Computer Science. He is an MCSE, MCDBA, MCSA and CCNA.
Interested in writing for us? Find out more.
ASP.NET books
-
20 Recipes for Programming MVC 3: Faster, Smarter Web Development
There's no need to reinvent the wheel every time you run into a problem with ASP.NET's Model-View-Controller (MVC) framework. This concise cookbook provides recipes to help you solve tasks many web developers encounter every day. Each recipe includes...
ASP.NET forum discussion
-
edmonton female escort services near me
by canadapleasure (0 replies)
-
USB Drive Activity Logger!
by coque0912 (7 replies)
-
Bagaimana memenangkan $ 1,54 miliar dalam Mega Jutaan
by gametogelan (0 replies)
-
input integer from text file and output text file
by shmilon (0 replies)
-
cSharp stuck at exercise
by xander_Michiels (0 replies)
ASP.NET podcasts
-
.NET Rocks: Jeff Fritz Knows One ASP.NET
Published 7 years ago, running time 0h54m
Carl and Richard talk to Jeff Fritz about how ASP.NET has evolved over the years. Jeff talks about the continued dominance of web forms in relation to MVC and how the different libraries can be used together. In fact, there's ONE ASP.NET, and everything: web forms, MVC, Web API, SignalR, all work.
ASP.NET jobs
-
.NET Web Developer at FinTech Startup (with traction)
FundApps in London, United Kingdom
Negotiable -
.NET Developer
sti-professionalservices in Detroit, United States
FOR ALL POSITIONS COMPENSATION IS NEGOTIABLE -
Web Developer at Growing Startup
FundApps in London, United Kingdom
-
Senior Software Engineers
LexisNexis in Cary, United States
Comments