Techie Brains

• C# version (VS2010)
• VB version (VS2010)

Overview

• Define a set of classes to represent the entities for a blog — Blog, Post and Comment.
• Reference the Entity Framework code first assembly.
• Create a DbContext to manage the Blog classes and data access.
• Build a simple ASP.NET MVC 3 application that will let you view, add, edit and delete blogs.

Creating the MVC Application

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 MVC3AppCodeFirst 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

Creating the Model Classes for the Blogging Application

1. In Solution Explorer, right click the Models folder.
2. Select Add from the menu and then from the bottom of its context menu choose Class.
3. In the Add New Item dialog, change the new class name to BlogClasses.
4. A new file, BlogClasses will be created.
5. Remove the BlogClasses class from within the file and replace it with the three classes listed below.

public class Blog
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string BloggerName { get; set;}
    public virtual ICollection<Post> Posts { get; set; }
  }
 
public class Post
{
    public int Id { get; set; }
    public string Title { get; set; }
    public DateTime DateCreated { get; set; }
    public string Content { get; set; }
    public int BlogId { get; set; }
    public ICollection<Comment> Comments { get; set; }
}
 
public class Comment
{
    public int Id { get; set; }
    public DateTime DateCreated { get; set; }
    public string Content { get; set; }
    public int PostId { get; set; }
    public Post Post { get; set; }
}

Creating an Entity Framework Context to Manage the Classes and Database Interaction

1. Select the MVC3AppCodeFirst project in Solution Explorer.
2. From the Tools Menu, choose Library Package Manager which has a sub-menu.
3. From the sub-menu choose Package Manager Console.
4. At the console’s PM prompt type install-package EntityFramework then hit enter.

Figure 2: Installing the Entity Framework 4.1 package reference

1. Add a new class to the Models folder and name it BlogContext.
2. Modify the class to match the following code:

using System.Data.Entity;
namespace MVC3AppCodeFirst.Models
{
  public class BlogContext : DbContext
  {
    public DbSet<Blog> Blogs { get; set; }
    public DbSet<Post> Posts { get; set; }
    public DbSet<Comment> Comments { get; set; }
  }
}

C:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\
     DATA\MVC3AppCodeFirst.Models.BlogContext.mdf

Creating the Controller Logic for the Blog Class

1. Build the project by choosing Build from the Visual Studio menu and then Build MVC3AppCodeFirst 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.

public ActionResult Index()
{
     using (var db = new BlogContext())
     {
            return View(db.Blogs.ToList());
     }
}

Creating the Index View to Display the Blog List

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 3: Adding a view to a controller ActionResult

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

7. Click Add to complete the view creation.

Figure 4: Creating a new view to display a list of Blog types

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

Adding Controller Logic to Create New Blogs

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

[HttpPost]
public ActionResult Create(FormCollection collection)

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

Adding a View for the Create Action

Figure 6: Creating a new view to allow users to add a new Blog.

Running the Application

• 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 }

Figure 7: Blog List (empty)

Figure 8: Creating a new blog

Figure 9: Blog list after adding new blog

Implementing Edit and Delete

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.

3. Modify the Edit method to match the following code;

public ActionResult Edit(int id)
{
     using (var db = new BlogContext())
     {
            return View(db.Blogs.Find(id));
     }
}

1. Right click the References folder in Solution Explorer.
2. Choose Add Reference… from the References context menu.
3. Select the .NET tab in the Add Reference dialog.
4. Locate the System.Data.Entity component, select it and then click OK.
5. 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
          {
            context.Entry(blog).State = System.Data.EntityState.Modified;
            context.SaveChanges();
            return RedirectToAction("Index");
          }
          catch
          {
            return View();
          }
}

Figure 10: Editing the blog information

Figure 11: After editing blog information

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