Home > DeveloperSection > Articles > WebGrid Control in ASP.NET MVC

WebGrid Control in ASP.NET MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 13271  View(s)
Rate this:

WebGrid Control in ASP.NET MVC


In this article, I am explaining how to use WebGrid helper in our Razor view page of an ASP.NET MVC 3 application.
The below code block is showing our Model class:

using System.Collections.Generic;

 

namespace WebGridMVC.Models

{

    public class Employee

    {

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public double Salary { get; set; }     

    }

}

 

The below code block is showing our Controller class:

using System.Collections.Generic;

using System.Web.Mvc;

using WebGridMVC.Models;

namespace WebGridMVC.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            var empoyees = new List<Employee>

            {

                new Employee { FirstName="Rohit", LastName="Kesharwani",  
                               Salary=45000},

                new Employee { FirstName="Rahul", LastName="Singh",
                               Salary=25000},

                new Employee { FirstName="Rehan", LastName="Ahmad",
                               Salary=25000},

                new Employee { FirstName="Nomita", LastName="Chowdhury",
                               Salary=35000},

                new Employee { FirstName="Rawnak", LastName="Kesharwani",
                               Salary=125000}

            };

            return View(empoyees);

        }

    }
}

Let us create a view page using Razor syntax:

@model IEnumerable<WebGridMVC.Models.Employee>

 

<html>

<head>

    <title>Index</title>

    <style type="text/css">

       .webGrid { margin: 4px; border-collapse: collapse; width: 300px; }

       .header { background-color: #E8E8E8; font-weight: bold; color: #FFF; }

        .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }

        .alt { background-color: #E8E8E8; color: #000; }

        .person { width: 200px; font-weight:bold;}

    </style>

</head>

<body>

    @{

        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);

        grid.Pager(WebGridPagerModes.NextPrevious);

        @grid.GetHtml(tableStyle: "webGrid",

                headerStyle: "header",

                alternatingRowStyle: "alt",

                columns: grid.Columns(

                    grid.Column("FirstName", "FirstName", canSort: true,
                    format:@<b>@item.FirstName</b>, style: "person"),

                    grid.Column("LastName", "LastName", canSort: true),

                    grid.Column("Salary","Salary",canSort:true)

        ));       

    }

</body>

</html>

 

 

When we run our application, an output will show as below:

WebGrid control in ASP.NET MVC

By using the above code we can easily understand how to use WebGrid and populate data in WebGrid in MVC application.


Don't want to miss updates? Please click the below button!

Follow MindStick