Part 1

Getting Started

Adam FreemanPro ASP.NET 4.5 in C#10.1007/978-1-4302-4255-0_1© Adam Freeman 2013

1. Your First ASP.NET Application

Adam Freeman¹ 

(1)

MILTON KEYNES, United Kingdom

Abstract

The best way to get started with ASP.NET is to jump right in. In this chapter, we will show you how to get set up for ASP.NET development and build your first ASP.NET application. The application we will build is simple, but it allows us to show you how to prepare your workstation for ASP.NET development, how the ASP.NET development tools work, and—most importantly—how quickly you can get up and running with ASP.NET. We’ll provide some context and background about the ASP.NET Framework in the next chapter, but this book focuses on coding so that’s what we are going to start with.

The best way to get started with ASP.NET is to jump right in. In this chapter, we will show you how to get set up for ASP.NET development and build your first ASP.NET application. The application we will build is simple, but it allows us to show you how to prepare your workstation for ASP.NET development, how the ASP.NET development tools work, and—most importantly—how quickly you can get up and running with ASP.NET. We’ll provide some context and background about the ASP.NET Framework in the next chapter, but this book focuses on coding so that’s what we are going to start with.

Preparing Your Workstation

You only need two things for ASP.NET development—a Windows 7 or Windows 8 workstation and Visual Studio, which is the Microsoft development environment. You probably have a Windows installation already, but you can usually find some pretty good deals if you need to buy a copy. Microsoft has discount schemes you can use if you are a student or teacher, or if you want to upgrade schemes from older Windows versions. Microsoft also has subscription schemes if you want wider access to its software products. You can get a 90-day trial of Windows 8 from http://msdn.microsoft.com/en-us/windows/apps if you don’t have Windows and you would like to familiarize yourself with ASP.NET development without making a financial commitment.

You need Visual Studio 2012 to build applications with ASP.NET 4.5, the version of the ASP.NET Framework we use in this book. Several different editions of Visual Studio 2012 are available, but we will be using the one that Microsoft makes available free of charge—Visual Studio Express 2012 for Web. Microsoft adds some nice features to the paid-for editions of Visual Studio, but you won’t need them for this book. In addition, all of the figures throughout this book have been taken using the Express edition running on Windows 8. You can download the Express edition from www.microsoft.com/visualstudio/eng/products/visual-studio-express-products . There are several different editions of Visual Studio 2012 Express, each of which is used for a different kind of development—make sure that you get the Web edition, which supports ASP.NET applications.

Tip

You can use any edition of Visual Studio 2012 for the examples in this book. You will see slight differences in some of the dialog boxes and the menu and toolbar configurations, but otherwise you will be just fine.

Creating a New ASP.NET Project

Start Visual Studio 2012 and select New Project from the File menu. You will see the New Project dialog box, which, as the name suggests, you use to create new Visual Studio projects.

You will see a list of the available project types in the left-hand panel of the dialog box. Navigate to Installed ➤ Templates ➤ Visual C# ➤ Web and you will see the set of ASP.NET projects available, as shown in Figure 1-1.

Tip

Make sure you select Visual C# and not Visual Basic. You’ll get some very odd behavior and errors if you try to follow our C# examples in a Visual Basic project.

Figure 1-1.

The New Project dialog box

Select the ASP.NET Empty Web Application item from the central panel of the dialog box—some of the names of the different project types are similar so make sure that you get the right one. Make sure that .Net Framework 4.5 is selected in the drop-down menu at the top of the screen and set the Name field to PartyInvites. Click the OK button to create the new project.

Tip

Visual Studio will set the Solution Name field to PartyInvites to match the project name. A Visual Studio solution is a container for one or more projects, but for all of the examples in this book our solutions will contain just one project, which is typical for ASP.NET Framework development.

The ASP.NET Empty Web Application is the simplest of the project templates and creates a project that only contains a Web.config file, which contains the configuration information for your ASP.NET application. Visual Studio shows you files in the Solution Explorer window, which you can see in Figure 1-2. The Solution Explorer is the principal tool for navigating around your project.

Figure 1-2.

The Visual Studio Solution Explorer window

Adding a New Web Form

As you saw when you created the Visual Studio project, there are different kinds of ASP.NET applications. For the type of application we describe in this book, content is generated from a Web Form. This is a misleading name, as we explain in Chapter 2, but for the moment it is enough to know that we add content to our application by adding new Web Form items.

To add a new Web Form to the project, right-click the PartyInvites project entry in the Solution Explorer window and select Add ➤ Web Form from the pop-up menu. When prompted, enter Default as the name for the new item, as shown in Figure 1-3.

Note

Throughout this book, we build up each example so that you can follow along in your own Visual Studio project. If you don’t want to follow along, you can download a complete set of example projects from apress.com . We have organized the examples by chapter and have included all of the files you will need.

Figure 1-3.

Setting the name for the new Web Form

Click the OK button to dismiss the dialog and create the new item. You will see that Visual Studio has added a Default.aspx file to the project in the Solution Explorer and opened the file for editing. You can see the initial contents of the file in Listing 1-1.

Listing 1-1. The initial contents of the Default.aspx file

<%@ Page Language=C# AutoEventWireup=true CodeBehind=Default.aspx.cs

Inherits=PartyInvites.Default %>

http://www.w3.org/1999/xhtml ">

server>

A Web Form file is, at its heart, an enhanced HTML file. The element that has the <% and %> tags gives away the fact this isn’t a regular HTML file, as do the runat attributes present in the head and form elements. We’ll explain what all of this means later, but for now we just want to emphasize that we are indeed working with HTML. In Listing 1-2, you can see that we have added some standard HTML elements to the Default.aspx file.

Listing 1-2. Adding standard HTML elements to the Default.aspx file

<%@ Page Language=C# AutoEventWireup=true CodeBehind=Default.aspx.cs

Inherits=PartyInvites.Default %>

http://www.w3.org/1999/xhtml ">

server>

Hello

This is a new web form

We have added an h1 and a p element containing some simple text. Nothing is specific to ASP.NET in these elements—they are standard HTML.

Testing the Example Application

The Visual Studio toolbar contains a drop-down list with the names of the browsers you have installed on your workstation (click the small down arrow to the right of the name to show the list).

You can see our list in Figure 1-4, which shows that we have several browsers installed. At the very least, you will have entries for Internet Explorer and Page Inspector (a tool that helps you debug your HTML and that we demonstrate later in Chapter 5).

Figure 1-4.

Selecting a browser in Visual Studio

We will be using Internet Explorer in this book because it is always available on Windows workstations. There are occasions when we will use or refer to another browser to demonstrate a particular feature, but we’ll always make it clear when this happens (and we’ll show you the effect with a screenshot if you don’t want to install additional browsers).

TESTING WITH MULTIPLE BROWSERS

Although we use Internet Explorer in this book, we recommend that you test your ASP.NET applications using as many browsers as possible, even if you don’t want to install them on your development workstation. Browsers have reached rough parity when it comes to Version 4 of the HTML and Version 2 of the CSS standards, but we are now transitioning to HTML5 and CSS3. This means that there are some useful and exciting features available for web applications, but that you have to test them thoroughly to make sure that they are handled consistently across browsers.

Ensure that Internet Explorer is selected and then click the button or select Start Debugging from the Visual Studio Debug menu. Visual Studio will compile your project and open a new browser window to display the Web Form, as shown in Figure 1-5. There isn’t much content in the Web Form at the moment, but at least we know that everything is working the way that it should be.

Figure 1-5.

Displaying the Web Form in the browser

Here is the URL that Internet Explorer used for our example: http://localhost:60015/Default.aspx

You will see a similar URL when you start the application, but it won’t be identical. You will see the http:// part (specifying that the HTTP protocol is to be used) and the localhost part, which is a special name that refers to the workstation. The port part of this URL, 60015 in our case, is assigned randomly and you will see a different number. The last part of the URL, Default.aspx, specifies that we want the contents of our Default.aspx file, that is, what you can see in the browser window.

So what does this URL relate to? Visual Studio 2012 includes IIS Express, which is a cut-down development version of the Microsoft application server used to run ASP.NET applications. IIS Express is installed automatically and you will see an icon in the notification window when it is running. If you right-click on this icon, you can see a list of the ASP.NET applications that you have running and open a browser window to view them, as shown in Figure 1-6.

Figure 1-6.

Interacting with IIS Express

When you used Visual Studio to run the application, IIS Express was started and it began listening for requests (on port 60015 for us and, most likely, a different port for you). Once IIS Express had started up, Visual Studio created a new Internet Explorer window and used it to navigate to the URL, which loads our Default.aspx file from IIS Express.

You can see the HTML that IIS Express and the ASP.NET Framework (which is integrated into IIS) sent to the browser by right-clicking in the browser window and selecting View Source. We have shown the HTML in Listing 1-3 and you will notice that it is different from the contents of the Default.aspx file.

Listing 1-3. The HTML sent to the browser by IIS Express in response to a request for Default.aspx

http://www.w3.org/1999/xhtml ">

hidden name=__VIEWSTATE id=__VIEWSTATE

value="Agt1lWw0aAOOuIlRgFGlnqPKiiOlhPrUBEtN9rfe9Ub4PEAl1oPkeWAELlA9OU4YIwJKj

rm1ZukKx41t0WQxDSMlETbUqfEgVelN4WkWp1M=" />

Hello

This is a new web form

The HTML sent to the browser is the result of the ASP.NET Framework processing our Default.aspx file. The <% and %> tags have been removed and a hidden input element has been added, but since our Default.aspx file doesn’t do anything interesting at the moment, the file contents are passed to the browser largely unmodified.

It may not seem like it, but you have created a very simple ASP.NET web application. These are the key points to bear in mind at this point:

1.

The user requests URLs that target Web Form files we add to the project.

2.

The requests are received by IIS Express, which locates the request file.

3.

IIS Express processes the Web Form file to generate a page of standard HTML.

4.

The HTML is returned to the browser where it is displayed to the user.

This is the essence of any ASP.NET application. Our goal is to take advantage of the way that the ASP.NET Framework processes Web Form files to create more complex HTML and sequences of user interactions. In the sections that follow, we’ll build on this basic foundation.

Creating a Simple Application

In the rest of this chapter, we will explore some of the basic ASP.NET features used to create a simple data-entry application. We will pick up the pace in this section—our goal is to demonstrate ASP.NET in action, so we’ll skip over detailed explanations as to how things work behind the scenes. We’ll revisit these topics in depth in later chapters.

Setting the Scene

We are going to imagine that a friend has decided to host a New Year’s Eve party and that she has asked us to create a web site that allows her invitees to electronically RSVP. She has asked for the following key features:

A page that shows information about the party and an RSVP form

Validation for the RSVP form, which will display a confirmation page

A page that lists the responses from invitees

In the following sections, we’ll build on the PartyInvites ASP.NET project we created at the beginning of the chapter and add these features.

Creating a Data Model and Repository

Almost all web applications rely on some kind of data model, irrespective of the technology used to create them. We are building a simple application and so we only need a simple data model. Right-click the PartyInvites item in the Solution Explorer and select Add ➤ Class from the pop-up menu.

Tip

If the Class menu item is missing or disabled, then you probably left the Visual Studio debugger running. Visual Studio restricts the changes you can make to a project while it is running the application. Select Stop Debugging from the Debug menu and try again.

Visual Studio will display the Add New Item dialog box, which contains templates for all of the items you can add to an ASP.NET project. The Class template will already be selected, so set the name to be GuestResponse.cs and click the Add button. Visual Studio will create a new C# class file and open it for editing. Set the contents of the file so that they match Listing 1-4.

Tip

We have used a C# language feature called automatically implemented properties in the GuestResponse class, which you may not be familiar with if you have been working with an older version of the .NET Framework. We explain the C# language features that we use in Chapter 3.

Listing 1-4. The GuestReponse class

namespace PartyInvites {

public class GuestResponse {

public string Name { get; set; }

public string Email { get; set; }

public string Phone { get; set; }

public bool? WillAttend { get; set; }

}

}

Tip

Notice that we have defined the WillAttend property as a nullable bool. This means that the property can be true, false, or null. We’ll explain why we chose this data type in the Performing Validation section later in the chapter.

We will use instances of the GuestReponse class to represent responses from our party guests. We need a repository to store the GuestResponse objects we create. In a real application, this would typically be a database. We will show you how to set up and use a database in Chapter 6, when we create a more realistic ASP.NET application. In this chapter, we just want something quick and simple, so we are going to store the objects in memory. This has the advantage of being easy to do, but it means that our data will be lost each time that the application is stopped or restarted. This would be an odd choice to make for a real web application, but it is fine for our purposes in this chapter. To define the repository, add a new class file to the project called ResponseRepository.cs and ensure that the contents of the file match those shown in Listing 1-5.

Listing 1-5. The ResponseRepository class

using System.Collections.Generic;

namespace PartyInvites {

public class ResponseRepository {

private static ResponseRepository repository = new ResponseRepository();

private List responses = new List();

public static ResponseRepository GetRepository() {

return repository;

}

public IEnumerable GetAllResponses() {

return responses;

}

public void AddResponse(GuestResponse response) {

responses.Add(response);

}

}

}

A repository usually has methods for creating, reading, updating, and deleting data objects (known collectively as CRUD methods), but we only need to be able to read all of the data objects and add new ones in this application. We’ll show you a more typical repository in Chapter 6.

Creating and Styling the Form

Our next step is to create the page that contains information about the party and an HTML form that allows guests to respond. We will use the Default.aspx file that we created earlier in the chapter. You can see the changes we have made in Listing 1-6.

Listing 1-6. Creating the form

<%@ Page Language=C# AutoEventWireup=true CodeBehind=Default.aspx.cs

Inherits=PartyInvites.Default %>

http://www.w3.org/1999/xhtml ">

server>

New Year's Eve at Jacqui's!

We're going to have an exciting party. And you're invited!

Will you attend?

willattend>

>Choose an Option

true>Yes

false>No

submit>Submit RSVP

We have changed the id attribute value of the form element and added some standard HTML elements to display information about the party and gather the RSVP details from the users. You can see how changes appear by starting the application (either select Start Debugging from the Debug menu or click the Internet Explorer button on the toolbar). As you can see in Figure 1-7, we have a form but it doesn’t look very nice.

Figure 1-7.

The effect of adding to the form element in the Default.aspx file

We style elements in a Web Form in the same way we would a regular HTML page—by using Cascading Style Sheets (CSS). To add some basic styles to the application, right-click on the PartyInvites item in the Solution Explorer and select Add ➤ Style Sheet from the pop-up menu. Set the name to be PartyStyles and click the OK button. Visual Studio will add a new PartyStyles.css file to the project. Set the contents of this new file to match the CSS shown in Listing 1-7. Although these are very basic CSS styles, they will improve the appearance of our form fields.

Listing 1-7. The CSS styles defined in the PartyStyles.css file

#rsvpform label { width: 120px; display: inline-block;}

#rsvpform input { margin: 2px; margin-left: 4px; width: 150px;}

#rsvpform select { margin: 2px 0; width: 154px;}

button[type=submit] { margin-top: 5px;}

We associate a CSS style sheet with a Web Form using a link element. You can see how we have added such an element to the head section of the Default.aspx file in Listing 1-8.

Tip

If you are unfamiliar with the standards and technologies that underpin web content, such as HTML, CSS, and basic JavaScript, we suggest that you consult Adam’s book The Definitive Guide to HTML5, which is also published by Apress and which is a comprehensive reference.

Listing 1-8. Adding a link element to the head section of the Default.aspx file

server>

stylesheet href=PartyStyles.css />

Once again, notice that we are using a standard HTML element to link to a file that contains standard CSS styles. (We don’t want to labor this point, but one of the nice things about working with ASP.NET is that it builds on your existing knowledge of web standards.) You can see the effect of the CSS by starting the application, as illustrated in Figure 1-8.

Figure 1-8.

The effect of adding a link element for a CSS style sheet to Default.aspx

Handling the Form

We have a HTML form we can show to people who have been invited to the party, but the same page is displayed over and over again when they click the Submit RSVP button. To fix this, we need to implement the code that will handle the form data when it is posted to the server.

At the top of the Default.aspx file is the following element:

<%@ Page Language=C# AutoEventWireup=true CodeBehind=Default.aspx.cs

Inherits=PartyInvites.Default %>

This is known as the Page Directive and the attributes defined by the element provide ASP.NET with details about the Web Form file. We’ll come back to the directive in detail in Chapter 12, but for now we are interested in the CodeBehind attribute. This attribute tells ASP.NET which C# class file contains the code associated with the Web Form. In this case, it is the Default.aspx.cs file, which is the code-behind file for Default.aspx.

Visual Studio groups together related files as a single item in the Solution Explorer so that large projects are easier to navigate. If you click on the arrow to the left of the Default.aspx entry, you can see the files that Visual Studio has been hiding away, and, as Figure 1-9 shows, one of them is the Default.aspx.cs file referred to by the CodeBehind attribute.

Figure 1-9.

Expanding the Default.aspx file in the Visual Studio Solution Explorer

Double-click on the Default.aspx.cs file to open it in the editor and you will see the code shown in Listing 1-9.

Listing 1-9. The initial content of the Default.aspx.cs code-behind file

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace PartyInvites {

public partial class Default : System.Web.UI.Page {

protected void Page_Load(object sender, EventArgs e) {

}

}

}

The base for our code-behind class is System.Web.UI.Page, which contains a number of useful methods and properties for responding to web requests. We’ll describe the Page class in detail in Part 2 of this book. In this chapter, we are interested in the Page_Load method in our code-behind class that the ASP.NET Framework calls when there are requests for Default.aspx, which provides us with the opportunity to respond to these requests.

For our example, the Page_Load method will be called once when the page is first loaded and once again when the user submits the form. (We will explain why this happens in Part 2.) In Listing 1-10, you can see the code we have added to the Page_Load method to respond to requests.

Listing 1-10. Adding code to the Page_Load method

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.ModelBinding;

namespace PartyInvites {

public partial class Default : System.Web.UI.Page {

protected void Page_Load(object sender, EventArgs e) {

if (IsPostBack) {

GuestResponse rsvp = new GuestResponse();

if (TryUpdateModel(rsvp,

new FormValueProvider(ModelBindingExecutionContext))) {

ResponseRepository.GetRepository().AddResponse(rsvp);

if (rsvp.WillAttend.HasValue && rsvp.WillAttend.Value) {

Response.Redirect(seeyouthere.html);

} else {

Response.Redirect(sorryyoucantcome.html);

}

}

}

}

}

}

We determine if the request we are responding to is the form being posted back to the server by checking the IsPostBack property. If it is, we create a new instance of the GuestResponse data model object and pass it to the TryUpdateModel method, which is inherited from the base Page class.

The TryUpdateModel method performs a process called model binding where data values are used from the browser request to populate the properties of our data model object. The other argument to the TryUpdateModel method is the object that ASP.NET should use to obtain the values it needs—we have used the System.Web.ModelBinding.FormValueProvider class, which provides values from form data. We describe model binding in more depth in Part 3, but the result of calling the TryUpdateModel method is that the properties of our GuestResponse object are updated to reflect the data values that the user submitted in the form. We then store the GuestResponse object in our repository.

We want to give the user some kind of feedback when this user submits the form and we do this by using the Response.Redirect method, which redirects the user’s browser. If the WillAttend property is true, then the user is coming to the party and we redirect him or her to the seeyouthere.html file. Otherwise, we redirect the user to the sorryyoucantcome.html file.

Creating the HTML Response Files

Not all of the pages in an ASP.NET application have to be generated from Web Form files. We can also include regular, static HTML files. To create the first response file, right-click the PartyInvites item in the Solution Explorer and select Add ➤ New Item from the pop-up menu. Select the HTML Page template from the Add New Item dialog and set the name to seeyouthere.html. Finally, click the Add button to create the HTML file. Ensure that the contents of the file match the contents in Listing 1-11.

Listing 1-11. The contents of the seeyouthere.html file

http://www.w3.org/1999/xhtml ">

See you there!

Come around 9pm. Fancy dress is optional

Repeat the process to create the sorryyoucantcome.html file and set the contents to match the contents in Listing 1-12.

Listing 1-12. The contents of the sorryyoucantcome.html file

http://www.w3.org/1999/xhtml ">

Sorry you can't come!