UserControls - Introduction

A UserControl is a separate, reusable part of a page. You can put a piece of a page in a UserControl, and then reuse it from a different location. The name, UserControl, might seem a bit fancy, but actually, it's just like a regular page, with an optional CodeBehind file. A notable difference is that UserControls can be included on multiple pages, while a page can't. UserControls are used much like regular server controls, and they can be added to a page declaratively, just like server controls can.

A big advantage of the UserControl is that it can be cached, using the OutputCache functionality described in a previous chapter, so instead of caching an entire page, you may cache only the UserControl, so that the rest of the page is still re-loaded on each request.

An example where a UserControl could come in handy, is a control for showing information about a certain user on a community website. In the next couple of chapters, we will create a UserControl from scratch, make it fit to our purpose, and then use it on a page.

Having problems with this chapter? Ask in our forums!

Events

ASP.NET is an event-driven way of making web applications. With PHP and Classic ASP, you have one file, which is executed line after line, from start to end. However, ASP.NET is very different. Here we have events, which are either activated by the user in one way or another. In the previous example, we used the Page_Load method. Actually, this is an event, which the Page class calls when the page is loaded. We will use the same technique in the next example, where we will add a couple of controls to our simple hello world example. To make it a bit more interesting, we will change the "world" word with something defined by the user. Have a look at this codelisting, where we add two new controls: A Button control and a TextBox control.

<form id="form1" runat="server"> <div>     <asp:Label runat="server" id="HelloWorldLabel">asp:Label>     <br /><br />     <asp:TextBox runat="server" id="TextInput" />      <asp:Button runat="server" id="GreetButton" text="Say Hello!" /> div> form> 

As you can see, we now have the 2 new controls added, but they really can't do much at the moment. You can run the example if you wish to check this out for your self - if you click the button, the page is simply reloaded. Let's change that, and let's start by doing it the easy way. VWD comes with a WYSIWYG editor, and while I hardly ever use it my self, it does make some things easier, like creating events. So, click the Design button in the bottom of VWD. Now you will see a visual representation of our page. We wish to add a Click event to the button, and this is very simply - just doubleclick the GreetButton, and you will be taken to the CodeBehind file of our page. As you can see, a fine new method has been added, called GreetButton_Click. If you have a look at the Default.aspx file (you need to go from Design view to Source view), you will see that an attribute has been added to our Button control, telling which method to call when the button is clicked. All this work done with a simple doubleclick.

Now lets add some code to our new event. We wish to use the text from the TextBox, on our good old Label with the "Hello, world!" text. This is also very simple, and all it requires is a single line of code:

HelloWorldLabel.Text = "Hello, " + TextInput.Text; 

Run the project again (F6), and you will see the our old page with a couple of new controls. The "Hello, world!" text is still there, because we set it in the Page_Load event. Now try entering a name in the textbox, and press the button. Voila, the text is changed, and we have just used our first control event. Notice how we can add code which is not necessarily called unless the user performs a specific task. This is different from the good old Classic ASP/PHP approach, but you will soon get used to it, and you will probably also come to like it a lot!

code behind

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 ofHTML 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:

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

CodeBehind

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)     {      } }

Create Website

You need to select "ASP.NET Web Site", if it's not already selected. You should also name your new site. This is done by entering a name in the Location box. This text box is probably already filled for you, with the last part being something like "Website1". You can choose to accept this, as well as the location of the project, or you can enter a new one, like I did. I have created a folder, "My Websites", and within this folder, I would like to create the new project with the name of "FirstWebSite". For now, this is less important, but later on you might wish to gather all your projects in a specific folder.

This tutorial will focus on the C# language. Once again, no knowledge of this is required, so if you already know another .NET language, you will get to learn some C# with this tutorial as well. Select C# in the Language dropdown. Now, click the Ok button to create this new website.

VWD will create a very basic website for you, consisting only of a Default.aspx file (and it's partner, the Default.aspx.cs file) and an App_Data folder. I will explain this later, but for now, just accept the fact that they are there. We will only use the Default.aspx for this first example. Move on to the next chapter, for the obligatory "Hello, world!" example.

Asp.net Tutorial

Welcome to this ASP.NET Tutorial. This tutorial is primarily for new users of this great technology, and we recommend you to go through all the chapters, to get the most out of it as possible. While each chapter can be used without reading the previous chapters, some of them may reference things done in earlier chapters.

Have a look at the Table of contents to the right, where all the chapters are listed. This tutorial is never done - we will keep adding new stuff to it, so check back regularly. We hope this tutorial helps you to get started withASP.NET.

Everything here is free, and we hope you like our work. If you do, then all we ask is that you link to this tutorial on your website, personal blog or anything else where a link is possible. Also, if you see anything interesting in one of our ad blocks, please click it to help us maintain this tutorial. Thank you!