Post
Ask Question

Basic ASP.Net MVC3 Razor Engine Application with Entity Framework: Part 1



Description: In this article I will describe how to create a basic ASP.Net MVC3 application with Entity Framework.

Content: In this application I will create a Blog post with a post comment application. This application will be Object Class Mapping using Entity Framework. That means with the mapping of classes the database with table will be created automatically.

Step 1:

Create a new ASP.Net MVC3 application with empty web application. While creating the project check the radio button "UnitTest".

Step 2:

Now under the "Model" folder create two classes.

  1. Blog
  2. Comments

    MVC1.gif

Step 3:

Now In the Blog Class, copy the following code:

public class Blog
    {
       
        [Key]      
        public int BlogId { get; set; }

        [Required(ErrorMessage = "BlogName is required")]
        public string BlogName { get; set; }

        [Required(ErrorMessage = "Description is required")]
        [StringLength(120, ErrorMessage = "Description Name Not exceed more than 120 words")]
        public string Description { get; set; }
        public string Body { get; set; }

        public virtual  List<Comments > Comments_List { get; set; }

    }

See here we did the validation of each property. And also hold the list of comments. That means 1 blog contains many posts. So that is a one to many relationship.

The "Virtual" keyword means it will make the relationship.

Step 4:

Now in the Comments class write the following code:

public class Comments
    {
        [Key ]
        public int CommentId { get; set; }
          public string Comment { get; set; }
        //[ForeignKey]
          public int BlogId { get; set; }
          public virtual Blog Blog { get; set; }

    }

See here also we have the object reference of "blog" class. Before that I have used the virtual keyword.

Step 5:

Now it's time to make the entity class by which the database and the table will be created.

Create a "DatabaseContext" folder under the project. After that create a class named "BlogDbContext.cs" under the folder. This class is an entity class.

Step 6:

Now add a reference of the Entity Framework by clicking "Add New Reference" under the project.

MVC2.gif

In my project I already gave the dll. Without the dll the table will not be created in the database by object class mapping.

Now into the "BlogDbContext" class paste the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using blogmvc3.Models;

namespace blogmvc3.DatabaseContext
{
    public class BlogDbContext:DbContext
    {
        public DbSet<Blog> Blog { get; set; }
        public DbSet<Comments> Comments { get; set; }
    }
}

See here in the Dbset we are passing the blog class and comments class. The Dbset will create the table automatically with a relation into the database.

The Namespace "System.Data.Entity;" is very important for that.

Step 7:

Now we have to configure the "web.config" file for a connection string. The web.config file is under the main solution project, not the project web.config file.

MVC3.gif

Now paste the following connection string into the web.config file.

<connectionStrings>

    <add name="BlogDBContext" connectionString="data source=.;Database=Blogdb;Trusted_Connection=true;" providerName="System.Data.SqlClient" />
  </connectionStrings>

MVC4.gif

Step 8:

Now create a Controller Class named "HomeController" under the "ControllerFolder. After that check the
"Add action for create.update,delete.." so it will automatically create the action method in the Controller class.

MVC5.gif

Step 9:

Now in the "HomeController" Class first create the object of Class "BlogDbContext".

BlogDbContext _db = new BlogDbContext();

After that in the Index Method write the following code:

public ActionResult Index()
        {
            return View(_db.Comments .ToList ());
        }

Step 10:

Now create a master page in razor engine under the "shared" folder. Give it the name "_LayoutPage1.cshtml".

MVC6.gif

After that paste the following code there:

<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
   @* <script src="../../Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
    <link href="../../Content/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />*@
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>Blog Post</h1>
            </div>

            <div id="logindisplay">
                @*@Html.Partial("_LogOnPartial")*@
            </div>

            <div id="menucontainer">

                <ul id="menu">
                   @* <li>@html.actionlink("home", "index", "home")</li>*@
                    @*<li>@Html.ActionLink("About", "About", "Home")</li>*@
                   <li>@Html.ActionLink("home", "index", "home")</li>
                     <li>@Html.ActionLink("Article Post", "CreateLogin", "Article")</li>
                     @*<li>@Html.ActionLink("BookCab", "CreateLogin", "Cab")</li> *@
                </ul>
 
            </div>
             <script type="text/javascript"><!--                 mce: 0--></script>
 
        </div>

        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

Step 11:

Now go the "Home controller". Right-click the Index Method and add view. It will look like:

MVC7.gif

Please check "Create Strongly-typed Views".

Choose Model Class "Comments" Under DropDown List.

Select "Scaffold Template" List. After that press the "Add" Button. It will automatically create a view named "Index" under the "Home" folder.

Step 12:

See the Index View Engine will create code for the list view automatically.

Paste the following code there.

@model IEnumerable<blogmvc3.Models.Comments>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th></th>
        <th>
            Blog Name
        </th>
        <th>
           Description
        </th>
        <th>
           Body
        </th>
        <th>
            Comment
        </th>

    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.CommentId }) |
            @Html.ActionLink("Details", "Details", new { id=item.CommentId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.CommentId })
        </td>
        <td></td>
        <td> @item.Blog.BlogName</td>
         <td> @item.Blog.Description</td>
          <td> @item.Blog.Body</td>      
        <td>
            @item.Comment
        </td>

    </tr>
}

</table>

Step 13:

Run the application now. It will look like:

MVC8.gif

Open your SQL Server. Open your database. You will see the database named "BlogDb" has been created.

So here you cannot create, edit or delete. Because there is not a required Controller method with a view page.

I will discuss that in my next article.

Conclusion:

So in this article we have seen how to create a ASP.Net MVC3 application with the Entity Framework.


Similar Articles