VB.NET and C# Programming Basics: Part II

Separating Code from Content with Code-Behind

.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.

 

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish