Tip: Click this button:
in the video above for full screen playback.
Welcome to the first tutorial of this new series titled ASP.NET 3.5 Beginners Roadmap. Throughout the series we’ll dissect and discover many of the great benefits offered by ASP.NET 3.5. In this first tutorial we’ll rip apart and dissect our IDE (Integrated Development Environment), in this case, Visual Web Developer 2008 Express Edition. Tutorials to follow will focus on understanding the ASP.NET 3.5 components and developing applications. Each tutorial of the series will also include an accompanying video for those of you who’d rather see and hear the action.
Why is ASP.NET such an attractive technology and why should we use it to develop web sites? Great question, ASP.NET, short for Active Server Pages (the .NET simply meaning that the Microsoft .NET Framework is employed), gives us the opportunity to process requests server-side before dishing out any information to the requester. For example, we can determine if the requester is a specific user, if so, we can deliver customized content, deny the user access, etc. Another important point to make is that ASP.NET is used to build web applications, not just a simple web site. As with their desktop equivalent, applications are developed to perform specific tasks, not simply display content. For example, consider the program I’m using to write this tutorial, Microsoft Word, which is a desktop application, content and data is presented to me, however the primary purpose is to draft documents and save them into an accessible format to share and access later. ASP.NET can be used to deliver a rich user experience with complex data processing, database storage and other functionality previously seen only in desktop applications right over the wire to our customers in any part of the world.
In short, a web application can be developed for almost any business need today, except for applications such as 3D modeling where high-end computers are required and large amounts of data is processed. However, for the most part, any other business level application that you can dream up can generally be developed as a web application. What about some examples? Great, consider Google’s Documents service, here Google has replicated some of the features found in desktop word processing and spreadsheet programs and has delivered the applications to users via the web using standard web based technologies (HTTP for example). How is this possible? With the use of server-side processing we can prepare an HTML page dynamically for the requesting user, we know what data is theirs, how to retrieve their data from a database and how to deliver that data to the user, we then simply construct the HTTP response and send it across the wire to the requestor. The user can then interact with the delivered content, clicking buttons, selecting options from drop down boxes, etc and their modifications and selections are then transmitted across the write back to our web server, where again, the request is processed and any data saved to a database for later retrieval.
Pretty cool, huh? We’ll examine these concepts in great detail (with diagrams and flow charts) a bit later in the tutorial series, for now; let’s stick within getting to know our weaponry, that is, our development environment – Visual Web Developer 2008 Express Edition.
Our Weapon of Choice
Our weapon of choice is the freely available Visual Web Developer 2008 Express Edition, which delivers just the right amount of firepower. Again, its freely available, it supports all of the features we currently need to develop highly rich web applications and is quite powerful and easy to use. It also includes some pretty cool features such as CSS management, InteliSense (suggestions as you type code) among many other features we’ll discover in a few moments.
Visual Web Developer 2008 Express Edition can be downloaded from Microsoft at the this web address: http://www.microsoft.com/express/vwd/. Once you’ve downloaded and installed Visual Web Developer 2008 go ahead and launch the program, you’ll be presented with a window similar to that shown in the screenshot below.
First and foremost, what I want you to notice is that the window is broken into three different areas, the right portion of Visual Web Developer 2008 consist of the following windows:
- Solution Explorer
- Database Explorer
These windows are used to browse and manage the files associated with the currently loaded solution, browse and manage database connections and finally view and alter the properties of the currently selected HTML/ASP tag, respectively.
Next, notice the far left window pane:
- CSS Properties
- Manages Styles
The toolbox pane, shown in the screenshot below can be used to browse all available ASP.NET controls. You can select the controls you wish to place within the web page and drag and drop those control onto your page. This works in both design mode and source mode (more on this in a few moments). The CSS Properties and Manage Styles pane can be used to create and manage, as the names suggests, styles and CSS properties.
Creating a New Web Site
Creating a new site/application couldn't be easier, simply click the File menu and select New Web Site. You'll be presented with the New Web Site dialog box as shown in the screenshot below.
Notice that you can select from multiple different default templates for your web site, these include the following:
- ASP.NET Web Site: This is the most common option and when selected will create a basic ASP.NET Web Site with a single Default.aspx file.
- ASP.NET Web Service: This template is a more advanced template and allows us to create a web service, which is beyond the scope of this particular tutorial; however we will discuss web services later in the tutorial series.
- Empty Web Site: As the name suggests, an empty web site, no default files will be created. We must create everything.
Also notice that the New Web Site dialog box allows us to select the destination for our new web site, we can either create the project files and store them locally on our machine, or remotely via HTTP or FTP. In this tutorial we'll choose File System and define the path, the string after the last backslash (\) indicates the name of the new web site, for example, C:\Users\Matt\Documents\Visual Studio 2008 is the physical path to our project files and Website1 is the name of our new web site.
Last but not least, before you click the OK button, ensure that you've selected your desired .NET language, in our case, this will be C#. Click OK to create your new web site.
Understanding our New Web Site
Now that we’ve created a new web site the Visual Web Developer 2008 interface has slightly changed, you’ll notice that the Solution Explorer pane is now populated with a few files and a folder named App_Data. The files, web.config, which we won’t discuss at this point in time, is simply a configuration file for your web application and the Default.aspx file, which is the page that users will request from your web server. The .ASPX file extension denotes an ASP.NET file and is mapped within the web server to forward all requests of this type to the .NET Framework module for the web server.
You may also notice that beneath the Default.aspx file within the hierarchal structure is a file named Default.aspx.cs. Visual Web Developer 2008 places this file beneath Default.aspx as if Default.aspx was a folder or the .cs file was somehow part of the .aspx file. However this is not the case, the .aspx file is not a folder nor is the .cs file part of the .aspx file. Default.aspx.cs on the other hand is the .NET source file which is referenced from within Default.aspx. The Default.aspx.cs can either be compiled into an assembly (.DLL) during deployment of the web site or can reside on the server and will be compiled into an assembly during runtime by the ASP.NET engine.
The file extension .CS refers to the programming language of the file, C# in this case. The file extension .VB refers to Visual Basic.
Finally, the file Default.aspx should be open by default, if it’s not, go ahead and double click the file from within Solution Explorer. Your Visual Web Developer environment should now look something like that shown in the screenshot below.
First and foremost, notice the three buttons towards the bottom of the window, Design, Split and Source. Ensure that Source is selected, as per the screenshot above. Notice the first line of the source document, this is called the page directive. This directive is used to reference the Default.aspx.cs file, notice that the file name is referenced within the CodeFile property, also notice the Inherits property, the value of this property is that of the C# class, in this case, _Default. The full page directive is as follows.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
The Default.aspx.cs file is often called the code behind file.
The remaining portion of the source document is pretty basic HTML. However, notice that the form tag is decorated with the runat="server" attribute. This tells the ASP.NET engine that an object should be created server-side to represent this tag, you'll find that all ASP.NET controls must be decorated with this attribute as to allow programmatic access from the server.
Let's Get Stylish
It's time to get stylish! Visual Web Developer 2008 Express Edition includes some pretty useful wizards and windows for managing CSS styles, however before we get into this, lets switch our view over to Design or Split. Design view is quite similar to the average WYSIWYG (What You See Is What You Get) editor such as Dreamweaver, Front Page, etc and split view is, again just like the average WYSIWYG editor in split view, that is, the code and design modes are split and screen real estate is shared between the two modes.
After we've switched views, go ahead and mouse over the Manage Styles tab to the left. You'll notice that you can create a new style or attach an existing style sheet to the current document. For this exercise we'll create a new style. We'll be presented with the New Style window as shown in the screenshot below.
The dialog box is actually very straightforward and consists of several different properties. First and foremost, notice the Selection property, here we can either create a new CSS class or define an element property. For example, the a:hover element, if we wanted to define the style to be applied when the mouse hovers over an <a> tag, we could simply select this element and define the styles associated with that element. Finally, we can define this new style in the current page (in our case, Default.aspx), new style sheet, or an existing style sheet.
Again, its really quite flexible and just as easy to edit an existing style. For example, consider that we created a CSS class named .styleClass1, this class will be visible from the Manage Styles window, we can then simply right-click the CSS class and select Modify Style, the Modify Style will then appear. We can just as easily create a new CSS class as a copy of an existing class.
Adding Controls to the Page
I think we've got the idea on how we can manage CSS styles, for a little more detail you may wish to watch the video tutorial posted at the top of this article. Anyway, adding controls to our page couldn't be any easier, again, if we're in design mode (or source mode for that matter) we need only to drag and drop the desired control(s) onto our page in the desired location, the corresponding markup will be placed within the source view.
Let's give it a shot, shall we? I'm going to go ahead and drop a Label control along with a ListBox. These are both ASP.NET controls and thus can be programmatically accessed from our code behind. The design view result is shown in the screenshot below.
What I did was drag and drop both controls and with my cursor I placed a <br /> tag between the Label and ListBox to give some space (in other words, I pressed the Enter key on my keyboard). Now, if we're to click the ListBox, we'll be presented with a little dialog allowing us to insert items into the ListBox as shown below.
Selecting Edit Items will bring up another window, this one titled ListItem Collection Editor and is shown below.
To add items to the ListBox simply click the large Add button below the Members list box. Once added, select the added item and define the Text and Value properties. I've added a few items to the list. Finally, we'll add a button control to our page, again drag and drop from the Toolbox. Once the button has been placed in our page, double click the button, you'll be taken to the code behind file and your text cursor will be placed within a newly defined function as shown below.
protected void Button1_Click(object sender, EventArgs e)
This function was automatically created by Visual Web Developer upon double-clicking the button control. What this function does is allow us to define code that should be executed when the button is clicked by the client and the request is sent to the server for processing, however, before we examine the implementation of this method, I want to remind you that I previously stated all ASP.NET controls are decorated with the attribute runat="server", and as previously stated, this attribute basically indicates that a server-side object should be created for those controls to allow for programmatic access. That is, if we switch back to the Default.aspx file and change views to source, we'll see all three ASP.NET controls that we dropped into our page.
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:ListBox ID="ListBox1" runat="server">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
Notice that as stated, each tag is decorated with the runat="server" attribute, thus a server object matching the defined ID of the controls will be created and accessible via code behind. For example, via code behind we should have programmatic access to the objects Label1, ListBox1 and Button1.
Defining an OnClick Event
Returning to our Default.aspx.cs file (code behind) and the Visual Web Developer generated function Button1_Click. This is called an OnClick event handler and is bound to the Button1 control, again this was acomplished simply by double clicking the button from design mode, however the onclick event can also be defined pragmatically via the onclick attribute (you must also manually define the event handler function, that is, the Button1_Click() function)
Finally, as we know, all ASP.NET controls are accessible via the code behind file, thus we can define content within the Label control, or retrieve the currently selected item from the ListBox control. This is actually quite easy, using Visual Web Developer 2008, as we begin typing InteliSense will begin to suggest objects and properties. For example, lets populate the content of the Label control with the value attribute of the currently selected ListBox item. As we begin to type InteliSense will begin to make suggestions. The following screenshot depicts InteliSense in action.
Pretty cool, huh? The code to populate the Label control with the value of the currently selected ListBox item is defined in the listing below.
Label1.Text = ListBox1.SelectedValue;
This code will be executed when the user clicks the button. In later tutorials we'll get into details how the request is sent back to the server, for now, just note that it is and the ASP.NET framework will invoke our defined click event handler for the clicked button.
What About the HTML?
Anyway, check out the generated HTML markup for our small example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<form name="form1" method="post" action="Default.aspx" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1MjcxNTcxNmRkf0UVak2afCxPXybY3t7brMOah+k=" />
<select size="4" name="ListBox1" id="ListBox1">
<option value="Ice Cream">Ice Cream</option>
<input type="submit" name="Button1" value="Button" id="Button1" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgK7o4U0ApfkiqUNAt3f2/8CAsGX28sCAp6rrc0NAoznisYGtWfe1zF1cSJ/Ict78R0VD06V3qc=" />
Standard HTML code, viewable in any modern web browser, got to love it!
While this tutorial may have been overly simple, everyone needs to start someplace and begin laying a foundation, we'll begin to get more advanced and begin to reveal a lot of the ASP.NET 3.5 internal structure, in the meantime, I'd suggest that you get busy! Start fooling around and programming, search around the net for other examples, oh, and keep programming!