Home arrow ASP.NET arrow Page 3 - ASP.NET Controls Explained: Part 1/2
ASP.NET

ASP.NET Controls Explained: Part 1/2


In ASP.NET, there are several features that we can use to make our code reusable and independent of other code, including user controls, server controls, and the code behind method. In this article James explains what each of these features are used for, and also shows you how to use each one by providing a number of simple yet detailed ASP.NET examples.

Author Info:
By: James Yang
Rating: 5 stars5 stars5 stars5 stars5 stars / 56
February 03, 2002
TABLE OF CONTENTS:
  1. · ASP.NET Controls Explained: Part 1/2
  2. · User Controls
  3. · HTML Controls and Server Controls
  4. · Code Behind
  5. · Conclusion

print this article
SEARCH DEVARTICLES

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:

Running our server control example in IE

It should look like this in Netscape Navigator:

Running our server control example 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.
blog comments powered by Disqus
ASP.NET ARTICLES

- How Caching Means More Ca-ching, Part 2
- How Caching Means More Ca-ching, Part 1
- Reading a Delimited File Using ASP.Net and V...
- What is .Net and Where is ASP.NET?
- An Object Driven Interface with .Net
- Create Your Own Guestbook In ASP.NET
- HTTP File Download Without User Interaction ...
- Dynamically Using Methods in ASP.NET
- Changing the Page Size Interactively in a Da...
- XML Serialization in ASP.NET
- Using Objects in ASP.NET: Part 1/2
- IE Web Controls in VB.NET
- Class Frameworks in VB .NET
- Cryptographic Objects in C#: Part 1
- Sample Chapter: Pure ASP.Net

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials