1.Create a Movie Database Application in 15 Minutes With ASP

8/9/2019 1.Create a Movie Database Application in 15 Minutes With ASP

1/24

Create a Movie Database Application in 15

Minutes with ASP.NET MVC (C#)

The purpose of this tutorial is to give you a sense of "what it is like" to build an ASP.NET MVCapplication. In this tutorial, I blast through building an entire ASP.NET MVC application from

start to finish. I show you how to build a simple database-driven application that illustrates howyou can list, create, and edit database records.

To simplify the process of building our application, we'll take advantage of the scaffolding

features of Visual Studio 2008. We'll let Visual Studio generate the initial code and content for

our controllers, models, and views.

If you have worked with Active Server Pages or ASP.NET, then you should find ASP.NET

MVC very familiar. ASP.NET MVC views are very much like the pages in an Active Server

Pages application. And, just like a traditional ASP.NET Web Forms application, ASP.NET MVCprovides you with full access to the rich set of languages and classes provided by the .NET

framework.

My hope is that this tutorial will give you a sense of how the experience of building an ASP.NET

MVC application is both similar and different than the experience of building an Active ServerPages or ASP.NET Web Forms application.

Overview of the Movie Database Application

Because our goal is to keep things simple, we'll build a very simple Movie Database application.

Our simple Movie Database application will allow us to do three things:

1. List a set of movie database records2. Create a new movie database record

3. Edit an existing movie database record

Again, because we want to keep things simple, we'll take advantage of the minimum number of

features of the ASP.NET MVC framework needed to build our application. For example, wewon't be taking advantage of Test-Driven Development.

In order to create our application, we need to complete each of the following steps:

1. Create the ASP.NET MVC Web Application Project

2. Create the database3. Create the database model

4. Create the ASP.NET MVC controller

5. Create the ASP.NET MVC views


2/24

Preliminaries

You'll need either Visual Studio 2008 or Visual Web Developer 2008 Express to build an

ASP.NET MVC application. You also need to download the ASP.NET MVC framework.

If you don't own Visual Studio 2008, then you can download a 90 day trial version of VisualStudio 2008 from this website:

http://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspx

Alternatively, you can create ASP.NET MVC applications with Visual Web Developer Express

2008. If you decide to use Visual Web Developer Express then you must have Service Pack 1installed. You can download Visual Web Developer 2008 Express with Service Pack 1 from this

website:

http://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-

6DF4F6DEBD14&displaylang=en

After you install either Visual Studio 2008 or Visual Web Developer 2008, you need to install

the ASP.NET MVC framework. You can download the ASP.NET MVC framework from the

following website:

http://www.asp.net/mvc/

Instead of downloading the ASP.NET framework and the ASP.NET MVC frameworkindividually, you can take advantage of the Web Platform Installer. The Web Platform Installer

is an application that enables you to easily manage the installed applications are your computer:

http://www.microsoft.com/web/gallery/Install.aspx

Creating an ASP.NET MVC Web Application Project

Let's start by creating a new ASP.NET MVC Web Application project in Visual Studio 2008.

Select the menu option File, New Project and you will see the New Project dialog box in Figure

1. Select C# as the programming language and select the ASP.NET MVC Web Applicationproject template. Give your project the name MovieApp and click the OK button.
http://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspxhttp://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspxhttp://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=enhttp://www.asp.net/mvc/http://www.microsoft.com/web/gallery/Install.aspxhttp://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=enhttp://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=enhttp://www.asp.net/mvc/http://www.microsoft.com/web/gallery/Install.aspxhttp://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspx


3/24

Figure 01: The New Project dialog box (Click to view full-size image)

Make sure that you select .NET Framework 3.5 from the dropdown list at the top of the New

Project dialog or the ASP.NET MVC Web Application project template won't appear.

Whenever you create a new MVC Web Application project, Visual Studio prompts you to create

a separate unit test project. The dialog in Figure 2 appears. Because we won't be creating tests in

this tutorial because of time constraints (and, yes, we should feel a little guilty about this) selectthe No option and click the OKbutton.

Visual Web Developer does not support test projects.
http://static.asp.net/asp.net/images/mvc/21/CS/image001.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image001.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image001.png


4/24

Figure 02: The Create Unit Test Project dialog (Click to view full-size image)

An ASP.NET MVC application has a standard set of folders: a Models, Views, and Controllers

folder. You can see this standard set of folders in the Solution Explorer window. We'll need toadd files to each of the Models, Views, and Controllers folders in order to build our Movie

Database application.

When you create a new MVC application with Visual Studio, you get a sample application.Because we want to start from scratch, we need to delete the content for this sample application.You need to delete the following file and the following folder:

Controllers\HomeController.cs

Views\Home

Creating the Database

We need to create a database to hold our movie database records. Luckily, Visual Studio

includes a free database named SQL Server Express. Follow these steps to create the database:

1. Right-click the App_Data folder in the Solution Explorer window and select the menu

option Add, New Item.

2. Select the Data category and select the SQL Server Database template (see Figure 3).

3. Name your new database MoviesDB.mdfand click the Add button.


5/24

After you create your database, you can connect to the database by double-clicking the

MoviesDB.mdf file located in the App_Data folder. Double-clicking the MoviesDB.mdf file

opens the Server Explorer window.

The Server Explorer window is named the Database Explorer window in the case of Visual Web

Developer.

Figure 03: Creating a Microsoft SQL Server Database (Click to view full-size image)

Next, we need to create a new database table. From within the Sever Explorer window, right-click the Tables folder and select the menu option Add New Table. Selecting this menu option

opens the database table designer. Create the following database columns:

Column Name Data Type Allow Nulls

Id Int False

Title Nvarchar(100) False

Director Nvarchar(100) False

DateReleased DateTime False


6/24

The first column, the Id column, has two special properties. First, you need to mark the Id

column as the primary key column. After selecting the Id column, click the Set Primary Key

button (it is the icon that looks like a key). Second, you need to mark the Id column as anIdentity column. In the Column Properties window, scroll down to the Identity Specification

section and expand it. Change the Is Identity property to the value Yes. When you are finished,

the table should look like Figure 4.

Figure 04: The Movies database table (Click to view full-size image)

The final step is to save the new table. Click the Save button (the icon of the floppy) and give the

new table the name Movies.

After you finish creating the table, add some movie records to the table. Right-click the Movies

table in the Server Explorer window and select the menu option Show Table Data. Enter a list ofyour favorite movies (see Figure 5).


7/24

Figure 05: Entering movie records (Click to view full-size image)

Creating the Model

We next need to create a set of classes to represent our database. We need to create a database

model. We'll take advantage of the Microsoft Entity Framework to generate the classes for ourdatabase model automatically.

The ASP.NET MVC framework is not tied to the Microsoft Entity Framework. You can createyour database model classes by taking advantage of a variety of Object Relational Mapping

(OR/M) tools including LINQ to SQL, Subsonic, and NHibernate.

Follow these steps to launch the Entity Data Model Wizard:

1. Right-click the Models folder in the Solution Explorer window and the select the menu

option Add, New Item.

2. Select the Data category and select the ADO.NET Entity Data Model template.

3. Give your data model the name MoviesDBModel.edmx and click the Add button.

After you click the Add button, the Entity Data Model Wizard appears (see Figure 6). Followthese steps to complete the wizard:

1. In the Choose Model Contents step, select the Generate from database option.

2. In the Choose Your Data Connection step, use the MoviesDB.mdfdata connection and

the name MoviesDBEntities for the connection settings. Click the Next button.

3. In the Choose Your Database Objects step, expand the Tables node, select the Movies

table. Enter the namespace MovieApp.Models and click the Finish button.


8/24

Figure 06: Generating a database model with the Entity Data Model Wizard (Click to view full-

size image)

After you complete the Entity Data Model Wizard, the Entity Data Model Designer opens. The

Designer should display the Movies database table (see Figure 7).
http://static.asp.net/asp.net/images/mvc/21/CS/image011.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image011.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image011.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image011.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image011.png


9/24

Figure 07: The Entity Data Model Designer (Click to view full-size image)

We need to make one change before we continue. The Entity Data Wizard generates a model

class named Movies that represents the Movies database table. Because we'll use the Moviesclass to represent a particular movie, we need to modify the name of the class to be Movie

instead ofMovies (singular rather than plural).

Double-click the name of the class on the designer surface and change the name of the class from

Movies to Movie. After making this change, click the Save button (the icon of the floppy disk) togenerate the Movie class.

Creating the ASP.NET MVC ControllerThe next step is to create the ASP.NET MVC controller. A controller is responsible for

controlling how a user interacts with an ASP.NET MVC application.

Follow these steps:


10/24

1. In the Solution Explorer window, right-click the Controllers folder and select the menu

option Add, Controller.

2. In the Add Controller dialog, enter the nameHomeControllerand check the checkboxlabeled Add action methods for Create, Update, and Details scenarios (see Figure 8).

3. Click the Add button to add the new controller to your project.

After you complete these steps, the controller in Listing 1 is created. Notice that it contains

methods named Index, Details, Create, and Edit. In the following sections, we'll add thenecessary code to get these methods to work.

Figure 08: Adding a new ASP.NET MVC Controller (Click to view full-size image)

Listing 1 Controllers\HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

namespace MovieApp.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()


11/24

{

return View();

}

//

// GET: /Home/Details/5

public ActionResult Details(int id)

{

return View();

}

//

// GET: /Home/Create

public ActionResult Create()

{

return View();

}

//

// POST: /Home/Create

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Create(FormCollection collection)

{

try

{

// TODO: Add insert logic here

return RedirectToAction("Index");

}

catch

{

return View();

}


12/24

}

//

// GET: /Home/Edit/5

public ActionResult Edit(int id)

{

return View();

}

//

// POST: /Home/Edit/5


public ActionResult Edit(int id, FormCollection collection)

{

try

{

// TODO: Add update logic here


}

catch

{

return View();

}

}

}

}

Listing Database Records

The Index() method of the Home controller is the default method for an ASP.NET MVC

application. When you run an ASP.NET MVC application, the Index() method is the firstcontroller method that is called.


13/24

We'll use the Index() method to display the list of records from the Movies database table. We'll

take advantage of the database model classes that we created earlier to retrieve the movie

database records with the Index() method.

I've modified the HomeController class in Listing 2 so that it contains a new private field named

_db. The MoviesDBEntities class represents our database model and we'll use this class tocommunicate with our database.

I've also modified the Index() method in Listing 2. The Index() method uses theMoviesDBEntities class to retrieve all of the movie records from the Movies database table. The

expression_db.MovieSet.ToList() returns a list of all of the movie records from the Movies

database table.

The list of movies is passed to the view. Anything that gets passed to the View() method getspassed to the view as view data.

Listing 2 Controllers/HomeController.cs (modified Index method)

using System.Linq;

using System.Web.Mvc;

using MovieApp.Models;

namespace MovieApp.Controllers

{

public class HomeController : Controller

{

private MoviesDBEntities _db = new MoviesDBEntities();

public ActionResult Index()

{

return View(_db.MovieSet.ToList());

}

}

}

The Index() method returns a view named Index. We need to create this view to display the list

of movie database records. Follow these steps:

You should build your project (select the menu option Build, Build Solution) before opening the

Add View dialog or no classes will appear in the View data class dropdown list.


14/24

1. Right-click the Index() method in the code editor and select the menu option Add View(see Figure 9).

2. In the Add View dialog, verify that the checkbox labeled Create a strongly-typed viewis checked.

3. From the View content dropdown list, select the valueList.

4.From the View data class dropdown list, select the value MovieApp.Models.Movie.5. Click the Add button to create the new view (see Figure 10).

After you complete these steps, a new view named Index.aspx is added to the Views\Home

folder. The contents of the Index view are included in Listing 3.

Figure 09: Adding a view from a controller action (Click to view full-size image)


15/24

Figure 10: Creating a new view with the Add View dialog (Click to view full-size image)

Listing 3 Views\Home\Index.aspx

Index

Index

Id


16/24

Title

Director

DateReleased

|


17/24

The Index view displays all of the movie records from the Movies database table within anHTML table. The view contains a foreach loop that iterates through each movie represented by

the ViewData.Model property. If you run your application by hitting the F5 key, then you'll see

the web page in Figure 11.
http://static.asp.net/asp.net/images/mvc/21/CS/image021.png


18/24

Figure 11: The Index view (Click to view full-size image)

Creating New Database Records

The Index view that we created in the previous section includes a link for creating new database

records. Let's go ahead and implement the logic and create the view necessary for creating newmovie database records.

The Home controller contains two methods named Create(). The first Create() method has no

parameters. This overload of the Create() method is used to display the HTML form for creatinga new movie database record.

The second Create() method has a FormCollection parameter. This overload of the Create()

method is called when the HTML form for creating a new movie is posted to the server. Notice

that this second Create() method has an AcceptVerbs attribute that prevents the method frombeing called unless an HTTP POST operation is performed.

This second Create() method has been modified in the updated HomeController class in Listing

4. The new version of the Create() method accepts a Movie parameter and contains the logic for

inserting a new movie into the Movies database table.

Notice the Bind attribute. Because we don't want to update the Movie Id property from HTMLform, we need to explicitly exclude this property.

Listing 4 Controllers\HomeController.cs (modified Create method)

//

// GET: /Home/Create

public ActionResult Create()

{

return View();

}

//

// POST: /Home/Create


public ActionResult Create([Bind(Exclude="Id")] MoviemovieToCreate)

{

if (!ModelState.IsValid)
http://static.asp.net/asp.net/images/mvc/21/CS/image021.pnghttp://static.asp.net/asp.net/images/mvc/21/CS/image021.png


19/24

return View();

_db.AddToMovieSet(movieToCreate);

_db.SaveChanges();


}

Visual Studio makes it easy to create the form for creating a new movie database record (see

Figure 12). Follow these steps:

1. Right-click the Create() method in the code editor and select the menu option Add View.

2. Verify that the checkbox labeled Create a strongly-typed view is checked.

3. From the View content dropdown list, select the value Create.

4. From the View data class dropdown list, select the value MovieApp.Models.Movie.

5. Click the Add button to create the new view.

Figure 12: Adding the Create view (Click to view full-size image)

Visual Studio generates the view in Listing 5 automatically. This view contains an HTML formthat includes fields that correspond to each of the properties of the Movie class.

Listing 5 Views\Home\Create.aspx


20/24

Create

Create

Fields

Id:

Title:

Director:


21/24

DateReleased:

The HTML form generated by the Add View dialog generates an Id form field. Because the Idcolumn is an Identity column, we don't need this form field and you can safely remove it.

After you add the Create view, you can add new Movie records to the database. Run your

application by pressing the F5 key and click the Create New link to see the form in Figure 13. If

you complete and submit the form, a new movie database record is created.

Notice that you get form validation automatically. If you neglect to enter a release date for amovie, or you enter an invalid release date, then the form is redisplayed and the release date field

is highlighted.


22/24

Figure 13: Creating a new movie database record (Click to view full-size image)

Editing Existing Database Records

In the previous sections, we discussed how you can list and create new database records. In this

final section, we discuss how you can edit existing database records.

First, we need to generate the Edit form. This step is easy since Visual Studio will generate the

Edit form for us automatically. Open the HomeController.cs class in the Visual Studio codeeditor and follow these steps:

1. Right-click the Edit() method in the code editor and select the menu option Add View

(see Figure 14).

2. Check the checkbox labeled Create a strongly-typed view.

3. From the View content dropdown list, select the valueEdit.

4. From the View data class dropdown list, select the value MovieApp.Models.Movie.


23/24

5. Click the Add button to create the new view.

Completing these steps adds a new view named Edit.aspx to the Views\Home folder. This view

contains an HTML form for editing a movie record.

Figure 14: Adding the Edit view (Click to view full-size image)

The Edit view contains an HTML form field that corresponds to the Movie Id property. Becauseyou don't want people editing the value of the Id property, you should remove this form field.

Finally, we need to modify the Home controller so that it supports editing a database record. The

updated HomeController class is contained in Listing 6.

Listing 6 Controllers\HomeController.cs (Edit methods)

//

// GET: /Home/Edit/5

public ActionResult Edit(int id)

{

var movieToEdit = (from m in _db.MovieSet

where m.Id == id


24/24

select m).First();

return View(movieToEdit);

}

//

// POST: /Home/Edit/5


public ActionResult Edit(Movie movieToEdit)

{

var originalMovie = (from m in _db.MovieSet

where m.Id == movieToEdit.Id

select m).First();

if (!ModelState.IsValid)

return View(originalMovie);

_db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName,movieToEdit);

_db.SaveChanges();


}

In Listing 6, I've added additional logic to both overloads of the Edit() method. The first Edit()

method returns the movie database record that corresponds to the Id parameter passed to the

method. The second overload performs the updates to a movie record in the database.

Notice that you must retrieve the original movie, and then call ApplyPropertyChanges(), to

update the existing movie in the database.

Summary

The purpose of this tutorial was to give you a sense of the experience of building an ASP.NETMVC application. I hope that you discovered that building an ASP.NET MVC web application is

very similar to the experience of building an Active Server Pages or ASP.NET application.

In this tutorial, we examined only the most basic features of the ASP.NET MVC framework. In

future tutorials, we dive deeper into topics such as controllers, controller actions, views, viewdata, and HTML helpers.

Documents

1.Create a Movie Database Application in 15 Minutes With ASP