Library tutorials & articles
ASP.NET Controls Explained: Part 1/2
- Introduction
- User Controls
- HTML Controls & Server Controls
- Code Behind
- Conclusion
HTML Controls & Server Controls
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.
James is a student at Georgia Institute of Technology, majoring in Computer Science. He is an MCSE, MCDBA, MCSA and CCNA.
Related articles
Related discussion
-
Profile Class does not work after Translation
by converter2009 (1 replies)
-
what is the SQL Server Provider
by hayperaktib (1 replies)
-
Very Urgent regarding deleting the images from a folder
by Nanosteps (6 replies)
-
Java Script, File uploading on ftp server using java script code
by h_c_a_andersen (2 replies)
-
sharepoint calendar web part with events from sql table
by converter2009 (2 replies)
Related podcasts
-
StackOverflow uses ASP.NET MVC - Jeff Atwood and his technical team
Scott chats with Jeff Atwood of CodingHorror.com and most recently, StackOverflow.com. Jeff and Joel Spolsky and their technical team have created a new class of application using ASP.NET MVC. What works, what doesn't, and how did it all go down?
Events coming up
-
Mar
15
DevWeek 2010
London, United Kingdom
DevWeek is Europe’s leading independent conference for software developers, database professionals and IT architects, and features expert speakers on a wide range of topics, including .NET 4.0, Silverlight 3, WCF 4, Visual Studio 2010, REST, Windows Workflow 4, Thread Synchronization, ASP.NET 4.0, SQL Server 2008 R2, LINQ, Unit Testing, CLR & C# 4.0, .NET Patterns, WPF 4, F#, Windows Azure, ADO.NET, Entity Framework, Debugging, T-SQL Tips & Tricks, and more.
This thread is for discussions of ASP.NET Controls Explained: Part 1/2.