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 rows per page specified for the paging functionality. The GetHtml method of the Grid object will render an HTML table for the grid helper.
So follow the steps
Step 1: Open Visual Studio 2010.
- Go to file -> New->Projects.
- Create an ASP.NET MVC 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.
- The name of the Class is "Employee".
- In a class define the properties
->Click Add button
Step 3: Define the properties in Employee class.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebGrid.Models
{
public class Employee
{
public string EmpName { get; set; }
public string Address { get; set; }
public double Salary { get; set; }
public string MobileNo { get; set; }
public string PinCode { get; set; }
public static List<Employee> GetList()
{
List<Employee> Employees = new List<Employee> {
new Employee{EmpName="Mithilesh",Address="Hyderabad",Salary=5000,MobileNo="8374747439",PinCode="123456"},
new Employee{EmpName="Sanjeev",Address="Patna",Salary=15000,MobileNo="9865747439",PinCode="892359"},
new Employee{EmpName="Sonu",Address="Delhi",Salary=2000,MobileNo="838377439",PinCode="123656"},
new Employee{EmpName="Sagar",Address="Mumbai",Salary=25000,MobileNo="8374832439",PinCode="123756"}
};
return Employees;
}
}
}
Step 4: Add a controller.
- Right click on the Controllers folder ->add->Controllers.
- The name of Controllers is "Emp".
- In a controller, define the request.
->Click Add Button
Step5:- Write Code in Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebGrid.Models;
namespace WebGrid.Controllers
{
public class EmpController : Controller
{
//
// GET: /Emp/
public ActionResult Index()
{
ViewBag.Message = "Welcome to WebGrid Example in MVC";
return View();
}
public ActionResult About()
{
return View();
}
public ActionResult show()
{
var employees = Employee.GetList();
return View(employees);
}
}
}
Step 6: Add the view.
- Right-click of index methods->add view
- The name of the view is "index".
Step 7: Write the code on view
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>show</title>
</head>
<body>
<div align="center">
@{
var grid = new WebGrid(source: Model, defaultSort: "EmpName", rowsPerPage: 4);
}
<h1 style="color:green">Employee Details</h1>
<div id="grid" align="center" style="background-color:aquamarine;width:450px;border:3px solid maroon">
@grid.GetHtml(tableStyle:"grid",
headerStyle:"head",
alternatingRowStyle:"alt",
columns:grid.Columns(grid.Column("EmpName"),
grid.Column("Address"),
grid.Column("Salary",format:@<text>$@item.PinCode</text>),
grid.Column("MobileNo"),
grid.Column("PinCode")))
</div>
</div>
</body>
</html>
Step 8: Press Crtl+F5 to run the application.
Output
No comments:
Post a Comment