.NET 101
LANGUAGES: VB.NET | C#
ASP.NET VERSIONS: All
VB.NET
and C# Programming Basics: Part II
Separating
Code from Content with Code-Behind
By Zak
Ruvalcaba
In Part
I I explained the fundamentals of OOP and how good OOP style can help you
develop better, more versatile Web applications. In this installment we're
going to explore the technique of code-behind, the most obvious use of
inheritance in ASP.NET.
Most
companies that employ development teams usually split projects into two groups,
visual design and functional development, because software engineers are
usually poor designers, and designers are often poor engineers. Until now, our
ASP.NET pages have contained code render blocks that place VB.NET or C# code
directly within the ASP.NET page. The problem with this approach is that there
is no separation between the presentational elements of the page and the
application logic. Traditional ASP was infamous for creating "spaghetti" code,
which was scattered and intertwined throughout the presentation elements. This
made it very tricky to manage the code between development teams, as you know
if you ever tried to pick apart someone else's ASP code. In response to these
problems, ASP.NET introduces a new way of developing pages that allows code
developers to work separately from the presentational designers who lay out
individual pages.
This new
method, called code-behind, keeps all your presentational elements (controls)
inside the .aspx file, but moves all your code to a separate class in a .vb or
.cs code-behind file. Consider the following ASP.NET page, which displays a
simple button and label:
VB.NET
<html>
<head>
<title>Sample Page using VB.NET</title>
<script runat="server"
language="VB">
Sub Click(s As Object, e As EventArgs)
lblMessage.Text = "Hello
World"
End Sub
</script>
</head>
C#
<body>
<form runat="server">
<asp:Button id="btnSubmit"
Text="Click Me"
runat="server"
OnClick="Click"/>
<br /><br /><asp:Label
id="lblMessage" runat="server"/>
</form>
</body>
</html>
<html>
<head>
<title>Sample Page using
C#</title>
<script runat="server"
language="C#">
void Click(Object s, EventArgs e) {
lblMessage.Text = "Hello
World";
}
</script>
</head>
<body>
<form runat="server">
<asp:Button id="btnSubmit"
Text="Click Me"
runat="server"
OnClick="Click" />
<br/><br/><asp:Label
id="lblMessage" runat="server"/>
</form>
</body>
</html>
Let's
see how this example could be separated into the following two distinct files:
1) sample.aspx
- layout, presentation, and static content
2) sample.vb
or sample.cs - code-behind files containing a custom page class
First,
we take all the code and place it in the code-behind file (sample.vb or
sample.cs). This file is a pure code file, and contains no HTML or other markup
tags. What it does contain is a class definition. Nevertheless, using
their IDs we can still access presentation elements from this file, such as lblMessage:
VB.NET
' First off we
import some useful namespaces.
Imports System
Imports
System.Web.UI
Imports
System.Web.UI.WebControls
' All
code-behind classes generally inherit from Page.
Public Class
Sample
Inherits Page
' Declare the presentation elements on the
ASPX page.
Protected WithEvents lblMessage As Label
Protected WithEvents btnSubmit As Button
' Here's the Click handler just as it
appeared before.
Sub Click(s As Object, e As EventArgs)
lblMessage.Text = "Hello World"
End Sub
End Class
C#
// First off we
import some useful namespaces.
using System;
using
System.Web.UI;
using
System.Web.UI.WebControls;
// All
code-behind classes generally inherit from Page.
public class
Sample : Page
{
// Declare the presentation elements on the
ASPX page.
protected Label lblMessage;
protected Button btnSubmit;
// Here's the Click handler just as it
appeared before.
public void Click(Object s, EventArgs e) {
lblMessage.Text = "Hello World";
}
}
Without
code, the main ASP.NET page becomes much simpler:
VB.NET
<%@ Page
Inherits="Sample" Src="Sample.vb" %>
<html>
<head>
<title>Sample Page using
VB.NET</title>
</head>
<body>
<form runat="server">
<asp:Button id="btnSubmit"
Text="Click Me"
runat="server"
OnClick="Click" />
<br/><br/><asp:Label
id="lblMessage" runat="server"/>
</form>
</body>
</html>
C#
<%@ Page
Inherits="Sample" Src="Sample.cs" %>
<html>
<head>
<title>Sample Page using
C#</title>
</head>
<body>
<form runat="server">
<asp:Button id="btnSubmit"
Text="Click Me" runat="server"
OnClick="Click" />
<br/><br/><asp:Label
id="lblMessage" runat="server"/>
</form>
</body>
</html>
As you
can see, the only line that's different between the .aspx pages is the Page
directive:
VB.NET
<%@ Page
Inherits="Sample" Src="Sample.vb" %>
C#
<%@ Page
Inherits="Sample" Src="Sample.cs" %>
The only
real change between the VB.NET and C# versions of the page is the source
filename extension. In both cases, the page inherits from the Sample class.
The
code-behind file is written differently from what you're used to seeing so far.
Although we no longer need <script> tags, we find a class definition in
its place. Looking at the VB.NET example, we start with three lines that import
namespaces to be used in the code:
VB.NET
Imports System
Imports
System.Web.UI
Imports
System.Web.UI.WebControls
The next
lines create a new class, named Sample. Because our code-behind page
contains code for an ASP.NET page, our class inherits from the Page
class:
VB.NET
Public Class
Sample
Inherits Page
This is
the practical application of inheritance that I mentioned above. Instead of
using the built-in Page class, the code-behind method has you derive a
subclass of Page for each page in your site. Next, we must declare the
controls that we want to use from the .aspx page. If we forget this step, we
won't be able to access them from our code:
VB.NET
Protected
WithEvents lblMessage As Label
Protected
WithEvents btnSubmit As Button
Finally,
we create the Click subroutine just as before, and terminate the class:
VB.NET
Sub Click(s As Object, e As EventArgs)
lblMessage.Text = "Hello World"
End Sub
End Class
As I
hope you can see, code-behind files are reasonably easy to work with, and they
can make managing and using our pages much more straightforward.
That's
quite a few concepts to understand over the course of a two-part article. Don't
worry - with a little practice, these concepts will become second nature.
This
article is excerpted from Build Your Own ASP.NET Website Using C#
& VB.NET. Get
this book delivered to your doorstep or request additional sample chapters at http://www.sitepoint.com/books/aspnet1/.
Zak Ruvalcaba has been researching, designing, and
developing for the Web since 1995. He holds a Bachelor's Degree from San Diego
State University and a Master of Science in Instructional Technology from
National University in San Diego. Zak has developed Web applications for such
companies as Gateway, HP, Toshiba, and IBM. More recently, he's worked as a
wireless software engineer developing .NET solutions for Goldman Sachs, TV
Guide, The Gartner Group, Microsoft, and Qualcomm. He also lectures for the San
Diego Community College District on various technologies and tools, including
Dreamweaver and ASP.NET.