Asp .Net MVC - SPLessons
boy2

ASP.Net MVC Web Grid Class

Home > Lesson > Chapter 16
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

ASP.Net MVC Web Grid Class

ASP.Net MVC Web Grid Class

Web Grid Class

shape Introduction

Web Grid Class is used to display the data in the Tabular form as well as to provide all the facilities like Paging, Sorting..etc. Simply Web Grid Class acts like a GridView in the ASP.Net. The following one is the namespace which contains the Web Grid Class.

shape Description

Web Grid Class supports both types of View Engines. They are
  • ASPX View Engine
  • Razor View Engine
The following are the properties of Web Grid Class.

shape Methods

The following are the Methods of Web Grid Class.
  • Bind([IEnumerable datasource],[IEnumerable(string)ColumnNames],[bool AutoSortAndPage=true],[int RowCount=1])
  • Column([string ColumnName=null],[StringHeader=null],[Function<dynamic.Object>],[Format=null],[string Style=null], bool Consort=true])
  • Columns(Web Grid Column[] ColumnSet)
  • GetHTML()
  • GetPageURL(int PageIndex)
  • GetSortURL(string ColumnName)
  • Pager([WebGridPagerModes mode=WebGridPagerModes.Numeric|WebGridPagerModes.NextPrevious]. [string FirstText=null], [string PreviousText=null], [string NextText=null], [string LastText=null], [int NumericLinks COunt=5])
  • Table[string TableStyle=null], [string HeaderStyle=null], [string FooterStyle=null], [string RowStyle=null],[string AlternatingRowStyle=null], [string SelectedRowStyle=null], [bool DisplayHeader=true].

shape Examples

Example Application on Web Grid Class
  • Create a MVC Application with the name "WebGridExample".
  • Create a Model Class with the name Employee9[Refer the previous chapter to create  model].
  • Add a View with the name EmployeView and write the following code in EmployeeView.cshtml.
[html] @using WebGridExample.Models; @{ WebGrid EmpGrid = new WebGrid(model); } @{ ViewBag.Title = "EmployeeeView"; } <h2>SPlessons</h2> <body> <div> @using(Html.Beginform()) { @EmpGrid.GetHtml() } </div> </body> [/html]
  • Add a Controller with the name Home and write the following code in the HomeController.cs.
[csharp] using WebGridExample.Models; namespace WebGridExample.Controllers { public class EmployeeController : Controller { EmployeeEntities obj = new EmployeeEntities(); // GET: Employee public ActionResult Index() { return View(); } public ActionResult EmployeeView() { return View(obj.Employee.ToString()); } } } [/csharp] Run the Application and Check. Complete table data with sorting and Paging facility will be founded.

shape Alert

shape Example

Example to create Web Grid with own columns in required order. Create a new View page and write the following code. [html] <div> @using(Html.Beginform()) { @EmpGrid.GetHtml(columns:EmpGrid.Columns(EmpGrid.Column("EmpId"),EmpGrid.Column("EmpName"),EmpGrid.Column("EmpSalary"))) } </div> [/html] Go to Controller class and write the following code. [csharp] using WebGridExample.Models; namespace WebGridExample.Controllers { public class EmployeeController : Controller { EmployeeEntities1 obj = new EmployeeEntities1(); // GET: Employee public ActionResult Index() { return View(); } public ActionResult Sample() { return View(obj.Employee.ToString()); } } } [/csharp] If don't wanted to provide the sorting facility for the particular column. Then write the code as follows. [csharp] EmpGrid.Column("Ename",CanSort:false) [/csharp]
Hide Index Show Index
Chapter 16