How to make a Grid in Asp.Net MVC

In this Blog we will see, how to make a Grid using WebGrid in Asp .Net MVC.

Step 1: Create a MVC application.

Step 2: Now make a Model say Student which will hold the data to be displayed in the Grid.

Example:

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

Step 3: Now, we have to make a List of type 'Student' and fill it with the data either by fetching from the Database or by static binding.

Example: Static binding of data in the Controller Class:

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

Step 4: Now add the following code to the View i.e .cshtml file:

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

<div id="gridContent"></div>
    @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")
         ))

The line gd.Column("RollNo", format: (item) => item.GetSelectLink(item.RollNo)), makes the Roll No field as link. Now if we wan't to do something onclick of this link (Say display the Corresponding data of the selected Link), write the following code in the same .cshtml file.

@if (gd.HasSelection)
{
   Models.Student student= (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 />
}

This will display the corresponding data, onclick of the selected link.

Note:=> Adding CSS will make your Grid more Stylish and colorful.