WebGrid in ASP.Net MVC 4 to Show the Content in Grid Format

Introduction

This article explains how to use the WebGrid in ASP.NET MVC 4.

Step 1

First of all add a new application in ASP.NET MVC 4 and name it "Web Grid in MVC".

Now add a new class to the Models Folder and name it "Student.cs".

Step 2

Now we add four properties to the Student Class.

public class Student
{
    public string RollNo { get; set; }
    public string Name { get; set; }
    public string Branch { get; set; }
    public long FeeRemaining { get; set; }
}

Here I provide RollNo, Name, Branch and FeeRemaining for the Student Class.

Now we will add a Controller Class to the Controller Folder. For that right-click on the Controller Folder and click on "Add" -> "Controller Class".

Step 3

Now we will add the values to all the four properties that we had added through the Model Folder.

These values needed to be passed in the Controller Class that we recently added.

{
    ObservableCollection<Student> FeeRemaining = new ObservableCollection<Student>();
    FeeRemaining.Add(new Student { RollNo = "08330001", Name = "Surbhi", Branch = "C.S", FeeRemaining = 18000 });
    FeeRemaining.Add(new Student { RollNo = "08330004", Name = "Arun", Branch = "C.S", FeeRemaining = 2500 });
    FeeRemaining.Add(new Student { RollNo = "08329006", Name = "Ankita", Branch = "I.T", FeeRemaining = 31000 });
    FeeRemaining.Add(new Student { RollNo = "08329007", Name = "Anshika", Branch = "I.T", FeeRemaining = 9450 });
    FeeRemaining.Add(new Student { RollNo = "08329014", Name = "Anubhav", Branch = "I.T", FeeRemaining = 2670 });
    FeeRemaining.Add(new Student { RollNo = "08311023", Name = "Girish", Branch = "E.N", FeeRemaining = 11200 });
    FeeRemaining.Add(new Student { RollNo = "08311024", Name = "Yogesh", Branch = "E.N", FeeRemaining = 3370 });
    return View(FeeRemaining);
}

Step 4

Now moving to the final part of the application, add a view to the Views Folder by right-clicking on the Views Folder.

Now we need to add some code to this page.

@{
var gd = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
    gd.Pager(WebGridPagerModes.NextPrevious);}

This is a WebGrid helper and this will allow us to add CSS Classes to the header, footer, table and so on.

Now we will add some CSS to our application, this will be added in the same view but in the head section.

 

<style type="text/css">
    .table { margin: 4px;  width: 500px;  background-color:#FCFCFC;}
    .head { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
    .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
    .altRow { background-color: #E4E9F5; color: #000; }
    .gridHead a:hover {text-decoration:underline;}
    .description { width:auto}
    .selectRow{background-color: #389DF5}
</style>

 

Step 5

Now we will add the columns to a Grid, for that we need to add the following code:

<div id="gridContent">
@gd.GetHtml(tableStyle: "table",
        headerStyle: "head",
        alternatingRowStyle: "altRow",
        selectedRowStyle: "selectRow",
        columns: gd.Columns(
        gd.Column("RollNo", format: (item) => item.GetSelectLink(item.RollNo)),
        gd.Column("Name", " Name"),
        gd.Column("Branch", "Branch", style: "description"),
        gd.Column("FeeRemaining", "FeeRemaining")
 ))

This code will navigate through the selected Roll No; for that we use the "format" parameter as in the following: 

gd.Column("RollNo", format: (item) => item.GetSelectLink(item.RollNo)),

Step 6

Also we will show the details of the Student in HTML format when the user clicks on the Roll No of the student; for that you need to add the following code:

 

@if (gd.HasSelection)
     {
         Student = (WebGridSampleApplication.Models.Student)gd.Rows[gd.SelectedIndex].Value;
         <b>Roll No</b> @Student.RollNo<br />
         <b>Name</b>  @Student.Name<br />
         <b>Branch</b> @Student.Branch<br />
         <b>Remaining Fee</b> @Student.FeeRemaining<br />
     }

 

One main thing is still remaining and it is to add the "jqery-1.7.1.min.js". You can download my code that is available at the begining of this article and from there can add this jQuery to your application.

Output

When you debug your application you will get the details of the Student in the Grid Form.

Now if you click on the Roll No of any student then these details will be shown at the bottom of the Grid and that's in HTML Format.