Disply Data on Grid in ASP.NET MVC 3 Application

Inroduction

We have created a simple application to help to bind the data in a Grid using the properties. This article helps to bind the data on the Grid and apply the sorting or paging in an ASP.NET MVC 3 application. The ASP.NET MVC Framework is a web application framework that implements the model-view-controller (MVC) pattern. Based on ASP.NET it allows software developers to build a Web application as a composition of three roles Model, View and Controller. A model represents the state of a particular aspect of the application. Frequently a model maps to a database table with the entries in the table representing the state of the application. A controller handles interactions and updates the model to reflect a change in state of the application and then passes information to the view. A view accepts necessary information from the controller and renders a user interface to display that. We create an instance of Grid with data source as our Model object and we specified that the default sort is FirstName for the sorting purpose and rowsPerPage specified for the paging functionality. The GetHtml method of the Grid object will render an HTML table for the grid helper.

Step 1 : Open Visual Studio 2010.

• Go to file -> New->Projects.
• Create an ASP.NET MVC 3 Web Application.
• Name of "WebGrid".

Step 2 : Add a class in the model folder.

• Right click on the Models folder ->add new items->add class.
• Name of Class is "Employee".
• In a class define the properties.

Step 3 : Define the properties in Employee class.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Webgrid.Models
{
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public double Salary { get; set; }
        public static List<Employee> GetList()
        {
            List<Employee> Employees = new List<Employee>{
          new Employee   { FirstName="Rahul", LastName="Kumar", Salary=45000},
          new Employee   { FirstName="Jose", LastName="Mathews", Salary=25000},
          new Employee   { FirstName="Ajith", LastName="Kumar", Salary=25000},
          new Employee   { FirstName="Scott", LastName="Allen", Salary=35000},
            new Employee   { FirstName="Abhishek", LastName="Nair", Salary=125000}
            };
            return Employees;
        }
    }
}
Step 4 : Add a controller.

• Right click on the Controllers folder ->add->Controllers.
• Name of Controllers is "Home".
• In a controller, define the request.

Step 5 : Write the code on controller.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Webgrid.Models;
namespace Webgrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            return View();
        }
        public ActionResult About()
        {
            return View();
        }
        public ActionResult show()
        {
            var empoyees = Employee.GetList();
            return View(empoyees);
        }
    }
}

Step 6 : Add the  view.

• Right click of index methods->add view
• The name of view is "index".

Step 7 : Write the code on view.

Code

@model Webgrid.Models.Employee
@{
    Layout = null;
}
@{       
   var grid = new WebGrid(source: Model,
                defaultSort: "FirstName",
                rowsPerPage: 3);
}
<h2>Employee List</h2>
<div id="grid">
    @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column("FirstName"),
            grid.Column("LastName"),
            grid.Column("Salary",format:@<text>$@item.Salary</text>)
        )
    )
</div>

Step 8 : Press Crtl+F5 to run application.

Output: