ASP.NET from Scratch - Code Behind - Part III

While our first example was fine, we unfortunately broke one of the coding principles of ASP.NET: To separate markup and code..

As you noticed, we added a scripting block (using <% %>), where we wrote a line of C# code to use the label. While this is just fine for a small and simple example like this, we would soon get a real mess with a bunch of C# code within an even bigger amount of HTML code.

If you throw in some JavaScript and some CSS as well, it will soon become very chaotic to edit. That's why MS introduced CodeBehind, a technique which allows you to completely separate markup (HTML, CSS etc.) and code (C#, VB.NET etc.). So let's remove the script block (from <% to %>) and save the file.

As we talked about earlier, VWD added a file called Default.aspx.cs. If you can't see it in the Solution Explorer, then click the little plus sign left of the Default.aspx file. Open this file. Now, if you haven't worked with .NET or another non-web programming language before, it might look a bit scary at this point. It looks nothing like HTML. However, I will try to explain the different parts of the content, and soon you will hopefully see that CodeBehind is a great tool to get a better overview of your work.

Here is a complete listing of the file as it looks right now:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

For now, the top part is rather irrelevant to us. It's a list of namespaces being included with the using keyword, for usage in the file. Since this is an ASP.NET tutorial and not a dedicated C# tutorial, I won't explain this in depth out here. I will post a separate post for this topic.

Next, we have the class. Classes are a part of the concept of Object Oriented programming, which has become very popular, especially with languages like Java and C#. OO is a very complex subject, which also won't be explained within this tutorial.
The name of this class is "_Default", and the : (colon) tells us that this class inherits from the Page class in the System.Web.UI namespace. This means that our page can already do a bunch of things, without any programming, because it inherits methods and properties from another class.

All ASP.NET pages inherits from the Page class, or another class which inherits from the Page class.

The only method within this class is the Page_Load, which is called everytime the page is loaded. Let's use that to our advantage, and set the ext from this method. We can use the exact same line of code as before, but of course without the script block tags. Add the line of code between the { and } characters:

HelloWorldLabel.Text = "Hello, world!";

That's it. Run the project (F6), and have a look. The page looks exactly like before, but we have just used CodeBehind for the first time. But this example is starting to get a bit old, so in the next chapter, we will look into something a bit more interesting.