How to Bind WebGrid in ASP.NET MVC

Many developers or students who are beginners get stuck retrieving the data from the database and binding data into the grid. I got many requests from them to write an article on the binding of WebGrid in MVC, So I will explain here all the stuff with detailed explanation and code example, so everyone can learn something from this article. 

In my previous article I explained How to Export Records in CSV file using MVC and How to create an ADO.NET Entity Data Model (EDM) in ASP.NET MVC and AngularJS Cascading Dropdown List Using Bootstrap 4 and ASP.NET Web API 2 in MVC 5 Using C# with Example as well as How to Bind Dropdown-list in ASP.NET MVC From Database Using Stored Procedure that you might like to read.

Requirement 

1. Create table in SQL Server Database and Insert few sample record for demonstration.
2. Create an ADO.NET Entity Data Model (EDM) and retrieve data from database using it.
3. Bind/Populate WebGrid in MVC.

Implementation

So, Late start with table creation and then we will create an MVC application.

Step 1

Create Table for Students.

CREATE TABLE [dbo].[Students](
	[Student_Id] [int] IDENTITY(1,1) NOT NULL,
	[RollNo] [int] NULL,
	[EnrollmentNo] [nvarchar](15) NULL,
	[Name] [nvarchar](50) NULL,
	[Branch] [nvarchar](50) NULL,
	[University] [nvarchar](50) NULL
) ON [PRIMARY]

Step 2

Insert few sample records for demonstration.

INSERT INTO Students (RollNo, EnrollmentNo, Name, Branch, University) VALUES 
(101, '14SOECE13017', 'Nikunj Satasiya', 'Computer Science Engineering', 'RK University'),
(102, '14SOECE13018', 'Hiren Dobariya', 'Computer Science Engineering', 'RK University'),
(103, '14SOECE13019', 'Vivek Ghadiya', 'Computer Science Engineering', 'RK University'),
(104, '14SOECE13020', 'Shreya Patel', 'Information Technology', 'RK University'),
(105, '14SOECE13021', 'Kishan Dave', 'Information Technology', 'RK University'),
(106, '14SOECE13022', 'Meena Patel', 'Computer Science Engineering', 'RK University'),
(107, '14SOECE13023', 'Niraj Patel', 'Civil Engineering', 'RK University'),
(108, '14SOECE13024', 'Renu Savla', 'Computer Science Engineering', 'RK University'),
(109, '14SOECE13025', 'Priya Dobariya', 'Information Technology', 'RK University'),
(110, '14SOECE13026', 'Rinku Patel', 'Computer Science Engineering', 'RK University')

Step 3

Now, we have to create a new project in the visual studio, So, open the visual studio 2019 >> file >> new >> project >> Select Web Application. 

When you click the Next button, another window will appear on your screen for template selection where you have to select MVC and click on the OK button.

Now, you have to write the name of the project and click on the Create button.

Step 4

Now, you have to go to solution explorer and right-click on Model folder >> Add >> New Item >> select Data from left panel >> Select ADO.NET Entity Data Model.

Now, click on the Add button and select the EF Designer from the database >> Next >> Gives your credential of SQL server and select the database. Now, you have to click on the Add button and select your table and click on the finish button.

NOTE: If you a beginner or need any help to add an entity data model then you can read this article where I explained how to create an ADO.NET entity data model (EDM) in asp.net step by step.

Step 5

Now, you have to go to solution explorer >> Controllers >> HomeController.cs and write the following code in the home controller.

HomeController.cs

using Codingvila.Models;
using System.Linq;
using System.Web.Mvc;
 
namespace Codingvila.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            CodingvilaEntities entities = new CodingvilaEntities();
            var lstStudents = (from Student in entities.Students
                                        select Student);
            return View(lstStudents);
        }
    }
}

Explanations

As you can see the HomeController.cs contains one action method, that is Index. An action method Index has action type ActionResult that represents the result of an action method and returns view with Student model as a parameter.

In the Index action method, we get a list of students from the database using entity framework and pass it into view object as students model.

Step 6

Now, we have to design a view and for the same, you have to go to solution explorer >> Views >> Home >> Index.cshtml and write the following code in the Index.cshtml file.

Index.cshtml

@{
    ViewBag.Title = "Students";
    WebGrid objwebGridCodingvila = new WebGrid(source: Model, canSort: false, canPage: false);
}
 
<div class="panel-body">
    <div class="form-group">
        <div class="row">
            <div id="Grid">
                @objwebGridCodingvila.GetHtml(
                htmlAttributes: new { @id = "webGridCodingvila", @class = "table table-bordered table-responsive" },
                columns: objwebGridCodingvila.Columns(
                         objwebGridCodingvila.Column("RollNo", "RollNo"),
                         objwebGridCodingvila.Column("EnrollmentNo", "EnrollmentNo"),
                         objwebGridCodingvila.Column("Name", "Name"),
                         objwebGridCodingvila.Column("Branch", "Branch"),
                         objwebGridCodingvila.Column("University", "University")))
            </div>
        </div>
    </div>
</div>

Explanations

Here, we have used a WebGrid to display the records of students, that we have taken from the database using the entity framework. So, as you can see in the code above, here, we have declared a WebGrid on top of the page, and bind it with a model, as you can see we have to assign a Model in the source parameter of WebGrid, here we have also set property of WebGrid cancer and canPage as false, that you can change base on your requirement. 

Step 7

Now, you have to build and run the project in the browser.

Output

Summary

In this article, we learned how to retrieve the records from the database using entity framework in ASP.NET MVC as well as binding WebGrid in ASP.NET MVC.