Let’s start by creating a new ASP.NET MVC application and removing all the sample files. Follow these steps to create a new ASP.NET MVC Web Application project:

When you create a new ASP.NET MVC project, the Create Unit Test Project dialog appears automatically (see Figure 2.2). When asked whether you want to create a unit test project, select the option Yes, Create a Unit Test Project. (In general, you should always select this option because it is a pain to add a new unit test project to your solution after your ASP.NET MVC project is already created).

Figure 2.2. The Create Unit Test Project dialog

As we discussed in the previous chapter, when you create a new ASP.NET MVC application, you get several sample files by default. These files get in our way as we build a new application. Delete the following files from your ASP.NET MVC project:

(C#)

ControllersHomeController.cs

ViewsHomeAbout.aspx

ViewsHomeIndex.aspx

(VB)

ControllersHomeController.vb

ViewsHomeAbout.aspx

ViewsHomeIndex.aspx

Delete the following file from your Test project:

(C#)

ControllersHomeControllerTest.cs

(VB)

ControllersHomeControllerTest.vb

We need to create a database and database table to contain our list of toys for our toy store. The ASP.NET MVC framework is compatible with any modern database including Oracle 11g, MySQL, and Microsoft SQL Server.

In this book, we use Microsoft SQL Server Express for our database. Microsoft SQL Server Express is the free version of Microsoft SQL Server. It includes all the basic functionality of the full version of Microsoft SQL Server. (It uses the same database engine.)

Follow these steps to create a new database from within Visual Studio:

After you create the database, you need to create the database table that will contain the list of toys. Follow these steps to create the Products database table:

After you finish creating the Products database table, you should add some database records to the table. Right-click the Products table in the Server Explorer window and select the menu option Show Table Data. Enter two or three products—you can enter anything you want (see Figure 2.5).

Figure 2.5. Entering sample data in the Products database table

We need to create model classes to represent our database tables in our ASP.NET MVC application. The easiest way to create the data model classes is to use an Object Relational Mapping (ORM) tool to generate the classes from a database automatically.

You can use your favorite ORM with the ASP.NET MVC framework. The ASP.NET MVC framework is not tied to any particular ORM. For example, ASP.NET MVC is compatible with Microsoft LINQ to SQL, NHibernate, and the Microsoft Entity Framework.

In this book, we use the Microsoft Entity Framework to generate our data model classes. We focus on the Microsoft Entity Framework because the Microsoft Entity Framework is Microsoft’s recommended data access solution.

Follow these steps to generate the data model classes:

After you complete these steps, the Entity Model Data Wizard launches. Complete these wizard steps:

After you complete the Entity Data Model Wizard, the Entity Designer appears with a single entity named Products (see Figure 2.9). The Entity Framework has generated a class named Products that represents your Products database table.

Figure 2.9. The Entity Designer

Most likely, you want to rename the classes generated by the Entity Framework. The Entity Framework simply names its entities with the same names as the database tables. Because the Products class represents a particular product, you want to change the name of the class to Product (singular instead of plural).

Right-click the Products entity in the Entity Designer and select the menu option Rename. Provide the new name Product.

At this point, we have successfully created our data model classes. We can use these classes to represent our ToyStoreDB database within our ASP.NET MVC application.

The controllers in an ASP.NET MVC application control the flow of application execution. The controller that is invoked by default is named the Home controller. We need to create the Home controller by following these steps:

The Home controller is contained in Listing 2.1.

Because we selected the option to generate Create, Update, and Details methods when creating the Home controller, the Home controller in Listing 2.1 includes these actions. In particular, the Home controller exposes the following actions:

Currently, the Home controller contains only stubs for these actions. Let’s go ahead and take advantage of the data model classes that we created with the Entity Framework to implement the Index() and Create() actions. The updated Home controller is contained in Listing 2.2.

Notice that a private field named _dataModel of type DBStoreEntities is defined at the top of the controller in Listing 2.2. The DBStoreEntities class was one of the classes that was generated by the Entity Model Data Wizard. We use this class to communicate with the database.

The Index() action has been modified to return a list of products. The expression _dataModel.ProductSet.ToList() returns a list of products from the Products database table.

There are two Create() actions. The first Create() action displays the form for creating a new product. The form is submitted to the second Create() action that actually performs the database insert of the new product.

Notice that the second Create() action has been modified to accept a Product parameter. The Product class also was generated by the Entity Model Data Wizard. The Product class has properties that correspond to each column in the underlying Products database table.

Finally, the Create() action calls the following methods to add the new product to the database:

(C#)

(VB)

Our Home controller now contains all the necessary database logic. We can use the controller to return a set of products, and we can use the controller to create a new product.

Notice that both the Index() action and the first Create() action return a view. The next and final step is to create these views.

An MVC view contains all the HTML markup and view logic required to generate an HTML page. The set of views exposed by an ASP.NET MVC application is the public face of the application.

Our simple application needs two views: the Index view and the Create view. We use the Index view to displays the list of products and the Create view to display a form for creating new products.

Adding the Index View

Let’s start by creating the Index view. Follow these steps:

1. Build your application by selecting the menu option Build, Build Solution.
2. Right-click the Index() action in the Code Editor window and select the menu option Add View (see Figure 2.11).

   Figure 2.11. Adding a view

   
3. In the Add View dialog, select the option Create a Strongly Typed View.
4. In the Add View dialog, from the drop-down list labeled View Data Class, select the ToyStore.Models.Product class.
5. In the Add View dialog, from the drop-down list labeled View Content, select List.
6. Click the Add button to add the new view to your project (see Figure 2.12).

   Figure 2.12. The Add View dialog

   

Note

You need to build your ASP.NET MVC application before adding a view with the Add View dialog to build the classes displayed by the View Data Class drop-down list. If your application has build errors, this list will be blank.

Views are added to the Views folder. Views follow a particular naming convention. A view returned by the Index() action exposed by the Home controller class is located at the following path:

ViewsHomeIndex.aspx

In general, views adhere to the following naming convention:

ViewsController NameAction Name.aspx

The contents of the Index view are contained in Listing 2.3. This view loops through all the products and displays the products in an HTML table (see Figure 2.13).

Figure 2.13. The Index view

Listing 2.3. ViewsHomeIndex.aspx (C#)

Listing 2.3. ViewsHomeIndex.aspx (VB)

Notice that the Index view includes a link labeled Create New that appears at the bottom of the view. We add the Create view in the next section.

Adding the Create View

The Create view displays the HTML form for adding a new product. We can follow a similar set of steps to add the Create view:

1. Right-click the first Create() action in the Code Editor window and select the menu option Add View.
2. In the Add View dialog, select the option Create a Strongly Typed View.
3. In the Add View dialog, from the drop-down list labeled View Data Class, select the ToyStore.Models.Product class.
4. In the Add View dialog, from the drop-down list labeled View Content, select Create.
5. Click the Add button to add the new view to your project (see Figure 2.14).

   Figure 2.14. Adding the Create view

   

The Create view is added to your project at the following location:

ViewsHomeCreate.aspx

The contents of the Create view are contained in Listing 2.4.

Listing 2.4. ViewsHomeCreate.aspx (C#)

Listing 2.4. ViewsHomeCreate.aspx (VB)

The Create view displays an HTML form for creating new products (see Figure 2.15). The Add View dialog generates HTML form fields that correspond to each of the properties of the Product class. If you complete the HTML form and submit it, a new product will be created in the database.

Figure 2.15. The Create view

In this chapter, we used the ASP.NET MVC framework to build a simple database-driven web application. We created models, views, and controllers.

First, we created a database and a database model. We used Microsoft SQL Server Express for our database. We created our database model classes by taking advantage of the Microsoft Entity Framework.

Next, we created the Home controller. We used Visual Studio to generate the actions for our Home controller automatically. We added a few lines of data access logic to interact with our database.

Finally, we created two views. We created an Index view that displays a list of all the products in an HTML table. We also added a Create view that displays an HTML form for adding a new product to the database.