Article
ASP.NET 2.0: A Getting Started Guide
Using Code-behind Files
Most companies that employ web 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 or C# code directly into the ASP.NET page. The problem with this approach is that there's 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'll know if you've ever tried to pick apart someone else's ASP code. In response to these problems, ASP.NET introduced a new development approach that allows code developers to work separately from the presentation designers who lay out individual pages.
This new method, called code-behind, keeps all of your presentational elements (controls) inside the .aspx file, but moves all of 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:
Example 3.20. Hello.aspx (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample Page using VB</title>
<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
messageLabel.Text = "Hello World"
End Sub
</script>
</head>
<body>
<form runat="server">
<asp:Button id="submitButton" Text="Click Me"
runat="server" OnClick="Click" />
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>
Example 3.21. Hello.aspx (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample Page using C#</title>
<script runat="server" language="C#">
void Click(Object s, EventArgs e)
{
messageLabel.Text = "Hello World";
}
</script>
</head>
<body>
<form runat="server">
<asp:Button id="submitButton" Text="Click Me"
runat="server" OnClick="Click" />
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>
Let's see how this example could be separated into the following distinct files:
HelloCodeBehind.aspx
layout, presentation, and static content
HelloCodeBehind.vb or HelloCodeBehind.cs
code-behind files containing a custom page class
First, we take all the code and place it in the code-behind file (HelloCodeBehind.vb or HelloCodeBehind.cs). This file is a pure code file, and contains no HTML or other markup tags. Nevertheless, we can still access presentation elements from this file, using their IDs (such as messageLabel) as shown below:
Example 3.22. HelloCodeBehind.vb
' First off we import some useful namespaces
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
' The partial class
Public Partial Class HelloCodeBehind
Inherits System.Web.UI.Page
' Here's the Click handler just as it appeared before
Sub Click(s As Object, e As EventArgs)
messageLabel.Text = "Hello World"
End Sub
End Class
Example 3.23. HelloCodeBehind.cs
// First off we import some useful namespaces
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
// The partial class
public partial class HelloCodeBehind: System.Web.UI.Page
{
// Here's the Click handler just as it appeared before
public void Click(Object s, EventArgs e)
{
messageLabel.Text = "Hello World";
}
}
Without code, the main ASP.NET page becomes a bit simpler:
Example 3.24. HelloCodeBehind.aspx
<%@ Page Language="VB" CodeFile="HelloCodeBehind.vb"
Inherits="HelloCodeBehind"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample Page Code Behind Demo using VB</title>
</head>
<body>
<form runat="server">
<asp:Button id="submitButton" Text="Click Me"
runat="server" OnClick="Click" />
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>
Example 3.25. HelloCodeBehind.aspx
<%@ Page Language="C#" CodeFile="HelloCodeBehind.cs"
Inherits="HelloCodeBehind"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample Page Code Behind Demo using C#</title>
</head>
<body>
<form runat="server">
<asp:Button id="submitButton" Text="Click Me"
runat="server" OnClick="Click" />
<asp:Label id="messageLabel" runat="server" />
</form>
</body>
</html>
As you can see, the only line that differs between these .aspx pages is the Page directive. Since the .aspx pages now contain only HTML layout, the contents are identical no matter what language you use for the code.
Partial Classes
If you have programmed with ASP.NET 1.1, you may already have noticed the changes in the code-behind model. In ASP.NET 2.0, the code-behind file is cleaner and smaller--a feat it achieves by using a new feature of VB and C# called partial classes. Read on for the details!
The code-behind file is written differently from what you've seen so far. While we no longer need <script> tags, we find a class definition in their place. As the VB example shows, we start with three lines that import namespaces for use within the code:
Example 3.26. HelloCodeBehind.vb (excerpt)
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
The next lines create a new class, named HelloCodeBehind. Since our code-behind page contains code for an ASP.NET page, our class inherits from the Page class:
Example 3.27. HelloCodeBehind.vb (excerpt)
Public Partial Class HelloCodeBehindSample
Inherits System.Web.UI.Page
This is the practical application of inheritance that we mentioned earlier. The HelloCodeBehind class inherits from Page, borrowing all its functionality, and extending it according to the particular needs of the page.
But what does Partial mean? A new feature in .NET 2.0, partial classes allow a class to be spread over multiple files. ASP.NET 2.0 uses this feature to make programmers' lives easier. We write one part of the class in the code-behind file, and ASP.NET generates the other part of the class for us, adding the object declarations for all the user interface elements.
Take a look at the Click subroutine, though which we access the messageLabel object without defining it anywhere in the code:
Example 3.28. HelloCodeBehind.vb (excerpt)
Sub Click(s As Object, e As EventArgs)
messageLabel.Text = "Hello World"
End Sub
That's pretty handy! However, don't be fooled into thinking that you can use objects that haven't been declared--the messageLabel object has been declared in another partial class file that the ASP.NET runtime generates for us. The file contains declarations for all the controls referenced in HelloCodeBehind.aspx.
As I hope you can see, code-behind files are easy to work with, and they can make managing and using our pages much more straightforward than keeping your code in code declaration blocks. You'll find yourself using code-behind files in most of the real-world projects that you build, but for simplicity's sake, we'll stick with code declaration blocks for one more chapter.
Summary
Phew! We've covered quite a few concepts over the course of this chapter. Don't worry--with a little practice, these concepts will become second nature to you. I hope you leave this chapter with a basic understanding of programming concepts as they relate to the ASP.NET web developer.
The next chapter will begin to put all the concepts that we've covered so far into practice. We'll begin by working with HTML Controls, Web Forms, and Web Controls, before launching into our first hands-on project!