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:
