Techie Brains

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

Overview

• 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

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

Creating the Model for the Blogging Application

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

Figure 4

Generating Strongly Typed Entity Classes

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.

Figure 5

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

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

Creating the Controller Logic 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.

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());
          }
        }

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 6: 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 7

Figure 8: 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 blog)
    {
      try
      {
        using (var db = new BlogDataEntities())
        {
          db.Blogs.Add(blog);
          db.SaveChanges();
        }
        return RedirectToAction("Index");
      }
      catch
      {
        return View();
      }
    }

Adding a View for the Create Action

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 9

Figure 10

Figure 11

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 BlogDataEntities())
           {
               return View(db.Blogs.Find(id));
           }
        }

4. 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();
            }
        }

Figure 12

Figure 13

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();
    }
}