WebGrid in ASP.Net MVC3 Razor with Entity Framework

Step 1:

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

Step 2:

Now under the "Model" folder create two classes.

Blog
Comments

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 is 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" keywords 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 we also have the object reference of the "blog" class. Before that I have used the virtual key word.

Step 5:

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

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 make a reference for the Entity Framework by clicking "Add Reference" under the project.

In my project I had already provided the dll. Without this dll the table cannot be created in the database by object class mapping.

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

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 a blog class and a comments class. The Dbset will create a table automatically with a relation in the database.

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

Step 7:

Now we have to configure the "web.config" file for the connection string. The web.config file is under the Main Solution Project. Not the Project web.config file.

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>

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 mrthod in the Controller class.

Step 9:

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

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 the Razor engine under the "shared" folder. Give it the name "_LayoutPage1.cshtml".

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>

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

<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"></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 a view. It will look like:

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.

Now delete all the code and replace it with the following code:

@model IEnumerable<blogmvc3.Models.Comments>

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

}
@{
var grid = new WebGrid(source: Model, canPage: true, defaultSort: "BlogName", rowsPerPage: 3, canSort: true);
}

<h2>Web grid</h2>
if (@Model != null )

{

@grid.GetHtml(tableStyle:"grid",headerStyle: "head", alternatingRowStyle: "alt",caption:"WebGrid"
)

}

<p>

@Html.ActionLink("Create New", "Create")
</p>

Now see this code section what is written above.

See first we are creating the WebGrid and after that in the constructor parameter we are passing a different property argument such as paging property, sorting, and rows per page.

And in the second we are are calling the WebGrid by calling the "@Html.WebGrid" property. Here also we are passing a parameter for the WebGrid.

Now run the application; it will look like the following figure:

See here the BlogId and Comments are displaying in the WebGrid (marked with red). And the paging facility is also done (marked with black).

Conclusion: So in this article we have learned how to bind data into a WebGrid in to ASP.Net MVC3 Razor.

2 Comments

Join the conversation! Your thoughts help the community grow.

Vic13y ago
Hi i am new to this webgrid. I had created a webgrid and everything works fine. If I want to apply scrolling properties to that webgrid than how to do that keeping the header in fixed position on the top?? Thanks
Patel Chirag14y ago
<div id="logindisplay"> @*@Html.Partial("_LogOnPartial")*@ </div> What is code does, specially i bit confuse for @*@Html.Partial("_LogOnPartial")*@ whether is it comment or what? I really appreciate if you give me quick help. Thanks, Chirag