Skip to main content

Building an MVC 3 App with Database First and Entity Framework 4.1

Julie Lerman

March 2011

Watch a video of this content

Watch a video of this content

Download the code for this article:


Microsoft’s ADO.NET Entity Framework (EF) simplifies data access by allowing you to avoid working directly with the database in your code. Instead you can retrieve data by writing queries against strongly typed classes letting the Entity Framework handle the database interaction on your behalf. EF can also persist changes back to the database for you. In addition to this benefit, you will also benefit from the EF’s comprehension of relationships. This means you will not be required to write extra code to specify joins between entities when expressing queries or simply working with your objects in memory.

EF provides you with three ways to define the model of your entities. Using the database first workflow, you can begin with a legacy database to create a model. With the model first workflow, you  can design a model in a designer. Or you can simply define classes and let EF work with those—referred to as code first.

In this whitepaper, I will walk you through creating a simple MVC 3 application using Entity Framework’s database first workflow and then use features introduced in Entity Framework 4.1 DbContext API to write your data access code.

Overview

In this walkthrough you will build pieces of a blogging application. The walkthrough will not result in a fully functional blogging application, but instead it will use the blog objects to demonstrate Database First’s features. You will:

  • Create an Entity Data Model from an existing database to represent the entities for a blog — Blog, Post and Comment.
  • Generate classes from the model using the ADO.NET DbContext Generator template.
  • Build a simple ASP.NET MVC 3 application that will let you view, add, edit and delete blogs.

Creating the MVC Application

For this demo, all of the code will live inside of an MVC 3 project, so the first step will be to create that project. You’ll use a template that will set up much of the structure for the application.

If you have not installed MVC 3 you can find the download and instructions at Microsoft’s official site for ASP.NET MVC: http://www.asp.net/mvc/mvc3.

  1. In Visual Studio 2010, add a new project by selecting the File menu, then New and then Project.
  2. In the Search Installed Templates text box (top right), type MVC 3 to filter down the list of project templates.
  3. Select ASP.NET MVC 3 Web Application using your language of choice. This walkthrough will use C# code, but you can find both C# and Visual Basic versions in the sample solutions download.
  4. Name the project DBFirstMVC and then click OK.
  5. In the New ASP.NET MVC 3 Project wizard, choose Internet Application.
  6. Leave the default values of the other options and click OK.


Figure 1: Creating a new MVC 3 Project

Visual Studio will create a full project structure for you including folders that contain pre-built controller classes, models and views. In fact you can run the application already to see it’s default content which is simply a message welcoming you to MVC.

Creating the Model for the Blogging Application

The “M” in MVC stands for model. It doesn’t necessarily mean an Entity Data Model (EDM), but any set of classes that represent your domain. In this application, the Entity Data Model that you will create and more specifically, the Blog, Post and Comment classes that the designer will generate from that EDM, will provide the model for this MVC 3 application. The EDM will go into the Models folder in the project.

With Entity Framework’s Database First workflow, you begin by reverse engineering an existing database into a new Entity Data Model. First you’ll need a database to work with. In the sample download that accompanies this article, there is a small database: the BlogData.mdf file.

  1. In Solution Explorer, right click the App_Data folder.
  2. Choose Add, then Existing Item and use the Add Existing Item explorer to locate the BlogData.mdf file. Select it and click Add.
  3. Right click the Models folder.
  4. Select Add and then New Item from the menu.
  5. In the Add New Item dialog, type Entity in the search box in the upper right hand corner.
  6. Select ADO.NET Entity Data Model from the filtered list of item templates.
  7. Change the name of the model to BlogModel.edmx and click Add.
  8. In the Choose Model Contents window, select Generate from database and then click the Next button.
  9. On the Choose Your Data Connection page, select BlogData.mdf in the data connection drop down and click Next.
  10. Check the Tables checkbox in Choose Your Database Objects (shown in Figure 3) and click Finish.

 


Figure 2

 


Figure 3

Visual Studio will open the Entity Data Model designer with the new model, shown in Figure 4.

 


Figure 4

Generating Strongly Typed Entity Classes

As you write your application, you’ll be working with strongly typed classes that are based on your entities. The Entity Data Model designer uses a code generator in Visual Studio called the Text Template Transformation Toolkit (T4). Entity Framework will automatically generate a Blog class, a Post class, and a Comment class.  When you created the new model and named it BlogData, the designer created a default container named BlogDataEntities to represent the container that encapsulates your entities. The code generator will create a class based on this also called BlogDataEntities.

By default, the designer uses a template that results in entity classes that inherit from Entity Framework’s EntityObject and a container class which inherits from EF’s ObjectContext.

These base classes can be cumbersome to work with for a number of reasons. While the ObjectContext is extremely useful when you need a lot of control over Entity Framework’s behavior, the lighter weight DbContext provides access to the most commonly needed tasks and simplifies your coding.

Microsoft provides a number of alternative T4 templates for generating classes from the EDM.  When you installed the EF 4.1, a template for creating simpler classes including the DbContext was added to Visual Studio. Let’s tell the designer to use this template instead of the default.

  1. Right click on the model’s designer surface.
  2. From the context menu, choose Add Code Generation Item.
  3. In the Add New Item dialog that opens, select Code from the list of installed templates types on the left.
  4. Choose the ADO.NET DbContext Generator then click the Add button.

Two new files will be listed in Solution Explorer, Model1.Context.tt and Model1.tt. These are template files. Expand the templates to see the generated classes as shown in Figure 5.

 


Figure 5

The Model1.Context file generated from the first template contains the BlogDataEntities class shown here:

public partial class BlogDataEntities : DbContext
    {
        public BlogDataEntities()
            : base("name=BlogDataEntities")
        {
        }
        public DbSet<Blog> Blogs { get; set; }
        public DbSet<Comment> Comments { get; set; }
        public DbSet<Post> Posts { get; set; }
    }

The Model1.tt file generated classes from each of the entities. Here for example, is the blog class which contains 11 lines of code compared to about 130 lines of code generated by the default template.

public partial class Blog
    {
        public Blog()
        {
            this.Posts = new HashSet<Post>();
        }
        public int Id { get; set; }
        public string Title { get; set; }
        public string BloggerName { get; set; }
        public virtual ICollection<Post> Posts { get; set; }
    }

You’ll be using the BlogDataEntities and the generated entity classes to query and update a database in your MVC application.

Creating the Controller Logic for the Blog Class

The “C” in MVC stands for controller. A controller gathers up data and sends it to a view. In MVC, you can create a controller to act as a repository for a specific class and then have it act as a bridge between your classes and the various views. Our controllers will use the BlogDataEntities to retrieve data for us. In a more advanced application, you should separate logic further and would not be working with the BlogDataEntities directly from the controller.

For the Blog class, we’ll be creating one view that displays a list of available Blogs and another that lets users create new Blogs. Therefore the controller will need one method to gather up a list of blogs to present in the first view, another method to provide a view to enter information for a new blog and finally a method to handle saving that new blog back to a database.

The project template created a controller called Home with a set of views and another controller called Account with its own set of views. We’ll ignore those and create our own controllers and views, starting with a controller for the Blog class.

  1. Build the project by choosing Build from the Visual Studio menu and then Build DBFirstMVC from its drop-down menu.
  2. In the Solution Explorer, right click the Controllers folder.
  3. Click Add from its context menu and then Controller.
  4. In the Add Controller window, change the Controller Name to BlogController and check the Add action methods checkbox.
  5. Click the Add button.

The BlogController class will be created with ActionResult methods: Index, Details, Create, Edit and Delete.

The job of the Index method will be to return a list of Blogs to be displayed in a view. The default code returns an empty View.

  1. Add “using DBFirstMVC.Models;” to the using statements at the top of the controller file.
  2. Change the Index method code to the following:
publicActionResult Index()
        {
          using (var db = new BlogDataEntities())
          {
            return View(db.Blogs.ToList());
          }
        }

The revised method instantiates a new BlogDataEntities and uses that to query for Blogs then return the results in a List. Entity Framework will take care of converting this into a SQL query, executing the query in the database, capturing the database results and transforming them into Blog objects. That single line of code, db.Blogs.ToList(), is responsible for all of those tasks..

Creating the Index View to Display the Blog List

We’ll add an Index view so that you can see what happens to the results of the Index method.

  1. Right click anywhere in the Index method declaration (public ActionResult Index()).
  2. In the context menu that opens click the Add View option.

 


Figure 6: Adding a view to a controller ActionResult

  1. The AddView dialog will open with the View name already set to Index.
  2. Check the Create a strongly typed view checkbox.
  3. Drop down the Model class option and select Blog.
  4. From the Scaffold template options select List.

These selections will force Visual Studio to create a new web page with markup to display a list of Blogs. The markup for this web page will use the new MVC Razor syntax. Figure 12 shows the Add View dialog.

  1. Click Add to complete the view creation.

 


Figure 7

Visual Studio will create a Blog folder inside of the Views folder and add the new Index view to that folder as shown in Figure 13.

 


Figure 8: The new Blog Index View is added to the Views/Blog folder

Since the very first call to this method will create a new database, the list of blogs will be empty and you’ll have to begin by creating new blogs.  This is where the two Create methods come into play. Let’s add in the Create logic and View before running the app. Note that you’ll need to make a change to the global.asax file before running the app anyway. You’ll do this shortly.

Adding Controller Logic to Create New Blogs

The first Create method does not need to return anything along with the View. Its View will be used to enter details for a new blog, so those details will start out empty. You don’t need to make any changes to this method.

public ActionResult Create()
        {
            return View();
        }

The second Create method is of more interest. This is the one that will be called when the Create view posts back. By default, the template told this Create method to expect a FormCollection to be passed in as a parameter.

[HttpPost]
        public ActionResult Create(FormCollection collection)

Because the Create view was created as a strongly-typed view, it will be able to pass back a strongly typed Blog object. This means you can change that signature so that the method receives a Blog type.  That will simplify the task of adding the new blog to the BlogDataEntities and saving it back to the database using Entity Framework code.

Modify the Create method overload (the second Create method) to match the following code:

[HttpPost]
    public ActionResult Create(Blog blog)
    {
      try
      {
        using (var db = new BlogDataEntities())
        {
          db.Blogs.Add(blog);
          db.SaveChanges();
        }
        return RedirectToAction("Index");
      }
      catch
      {
        return View();
      }
    }

In this method, you are taking the new blog that is passed in and adding it to the BlogDataEntities’ collection of Blogs, then calling Entity Framework’s SaveChanges method. When .NET executes SaveChanges, it will construct and then execute a SQL INSERT command using the values of the Blog property to create a new row in the Blogs table of the database. If that is successful, then MVC will call the Index method which will return the user to the Index view, listing all of the existing blogs including the newly created blog.

Adding a View for the Create Action

Next, create a view for the Create ActionResult as you did for Index. You can right click either of the Create methods but you only need to build one Create view. Be sure to choose the Create Scaffold template this time.

The new view will be added to the Views/Blog folder along with the Index view you created.

Running the Application

When you first created the MVC application with the template defaults, Visual Studio created a global.asax file that has in it an instruction, called a routing, that tells the application to start with the Index view of the Home controller. You’ll need to change that to start with the Index View of the Blog controller instead.

  • Open the global.asax file from Solution Explorer.
  • Modify the MapRoute call to change the value of controller from “Home” to “Blog”.
routes.MapRoute(
  "Default", // Route name
  "{controller}/{action}/{id}", // URL with parameters
  new { controller = "Blog", action = "Index", id = UrlParameter.Optional }

Now when you run the application the BlogController.Index action will be the first method called. In turn it will execute the code, retrieving a list of Blogs and returning it into the default view (the view of the same name, Index). This is what you will see. Note that I’ve made minor changes to the page’s header in the Shared/ _Layout.cshtml file and the heading of the Index View.

 


Figure 9

When you return a View from the BlogController Index method, MVC will find the Blog Index view and display that along with whatever was passed in, which in this case, a list of three blogs found in the database.

Clicking the Create New link will call the Create method which returns the Create view.  After entering some information, such as that shown in Figure 10 and clicking the Create button, control is passed back to the Controller, this time calling the Create post back method.

 


Figure 10

The view pushed a blog instance back to the Create method, which then uses the BlogContext to push that data into the database. The Create method then redirects to the Index method which re-queries the database and returns the Index View along with the list of Blogs. This time the list has a single item in it and is displayed as shown in Figure 11.

 


Figure 11

Implementing Edit and Delete

Thus far you have queried for data and added new data. Now you’ll see how Entity Framework lets you edit and delete data just as easily.

To demonstrate this you’ll use the BlogController’s Edit and Delete methods. This means you’ll need the corresponding Views.

  1. Create an Edit View from the BlogController Edit method. Be sure to select a strongly typed view for the Blog class and the Edit scaffolding type.
  2. Create a Delete View from the Blog Controller Edit method. Again, you must select a strongly typed view for the Blog class and this time, the Delete scaffolding type.

When a user edits a blog you will first need to retrieve that particular blog and then send it back to the Edit view.  You can take advantage of Entity Framework 4.1’s Find method which by default searches the entity’s key property using the value passed in. In this case, we’ll find the Blog with an Id field that matches the value of id.

  1. Modify the Edit method to match the following code;
public ActionResult Edit(int id)
       {
           using (var db = new BlogDataEntities())
           {
               return View(db.Blogs.Find(id));
           }
        }

The job of the overloaded Edit method used for postbacks is to update the blog in the database with the data that came from the view.  A single line of code that leverages the DbContext.Entry method will make the context aware of the Blog and then tell the context that this Blog has been modified. By setting the State to Modified, you are instructing Entity Framework that it should construct an UPDATE command when you call SaveChanges in the next line of code.

  1. Modify the Edit HttpPost method to make the context aware of the Blog and then save it back to the database as follows:
[HttpPost]
        public ActionResult Edit(int id, Blog blog)
        {
            try
            {
                using (var db = new BlogDataEntities())
                {
                    db.Entry(blog).State = System.Data.EntityState.Modified;
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
            }
            catch
            {
                return View();
            }
        }

Notice that just as you did for the Create method, you need to change the method signature to accept a Blog type instead of a FormCollection.

By default, the Edit view presents all of the properties except the key, Id.

 


Figure 12

After the changes are saved in the Edit postback method, MVC redirects back to the Index method. A fresh query is executed to retrieve the Blogs, including the newly updated Blog, which are then displayed in the Index view.

 


Figure 13

Deleting a Blog will work in much the same way.

Modify the Delete methods to match the following methods:

public ActionResult Delete(int id)
{
    using (var db = new BlogDataEntities())
    {
        return View(db.Blogs.Find(id));
    }
}
[HttpPost]
public ActionResult Delete(int id, Blog blog)
{
    try
    {
        using (var db = new BlogDataEntities())
        {
            db.Entry(blog).State = System.Data.EntityState.Deleted;
            db.SaveChanges();
        }
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

The first Delete method is just the same as its Edit counterpart. And the postback is similar to the Edit postback with one exception: you are setting the State to Delete rather than to Modified.

The Delete view presents a confirmation screen to the user.

 


Figure 14

When the user clicks the Delete button, the Delete postback method will be executed and the user will be returned to the Index view.

Summary

Entity Framework’s Database First is a great solution for creating applications that interact with a legacy database to work with. While this walkthrough focused on the defaults, keep in mind that you can customize that model after it’s been reverse engineered from the database. Entity Framework’s DbContext templates and the DbContext class provide cleaner classes and a much simpler coding surface to write your data access code.

About the Author

Julie Lerman is a Microsoft MVP, .NET mentor and consultant who lives in the hills of Vermont. You can find her presenting on data access and other Microsoft .NET topics at user groups and conferences around the world. Julie blogs at  thedatafarm.com/blog and is the author of the highly acclaimed book, “Programming Entity Framework” (O’Reilly Media, 2009). Follow her on Twitter.com:  julielerman.

Microsoft is conducting an online survey to understand your opinion of the MSDN Web site. If you choose to participate, the online survey will be presented to you when you leave the MSDN Web site.

Would you like to participate?