How to Bind WebGrid in ASP.NET MVC

watch_later 01 May, 2021
In this article, I will explain, how to populate/Bind web grid in ASP.NET MVC. Here I'll show you how to create a table in the database, how to record into SQL Server database table as well as how to retrieve the data from the SQL Server database using entity framework as well as also explain how to apply the bootstrap classes in the WebGrid for the better user interface.

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. 

WebGrid

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.

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


WebGrid MVC


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.

Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com

sentiment_satisfied Emoticon