Dot Net Example: WebGrid in ASP.Net MVC

Step 1:- Open Visual Studio 2015 => Go to File Menu => New => Project...

Step 2:- In the Installed Templates list, select Visual C# => Web

Step 3:- Select ASP.Net Web Application from the Web list => Type MvcWebGrid in the Name box and click OK

Step 4:- Select Empty template from ASP.NET Templates List and Checked MVC check box under Add folders and core references for:

Step 5:- Right-click Models folder in Solution Explorer => Add => Click

New Items...

Step 6:- Select Class from the Visual C# list = > Type Product.cs in the name box and click Add

Step 7:- Copy Past following code in the Product.cs

public class Product

{

public int ProductId { get; set; }

public string ProductName { get; set; }

public string ProductCode { get; set; }

public int ProductQty { get; set; }

public decimal ProductWeight { get; set; }

public string ProductDesc { get; set; }

}

Step 8:- Right-click Controllers folder in Solution Explorer => Add => Click

Controllers...

Step 9:- Select MVC 5 Controller - Empty from the controller list = > Click Add

Step 10:- Type ProductController in the Controller name box and click Add

Step 11:- Add following Action method in Product Controller

using MvcWebGrid.Models;

// GET: Product

public ActionResult Index()

{

List<Product> listProduct = new List<Product>();

listProduct.Add(new Product { ProductId = 1, ProductName = "Parle G", ProductCode = "P001", ProductQty = 12, ProductWeight = 820, ProductDesc = "Parle G" });

listProduct.Add(new Product { ProductId = 2, ProductName = "CNC", ProductCode = "P002", ProductQty = 24, ProductWeight = 2400, ProductDesc = "CNC" });

listProduct.Add(new Product { ProductId = 3, ProductName = "Krackjack", ProductCode = "P003", ProductQty = 12, ProductWeight = 960, ProductDesc = "Krackjack" });

listProduct.Add(new Product { ProductId = 4, ProductName = "20-20 Cookies", ProductCode = "P004", ProductQty = 12, ProductWeight = 820, ProductDesc = "20-20 Cookies" });

listProduct.Add(new Product { ProductId = 5, ProductName = "Monaco-Salted Craker", ProductCode = "P005", ProductQty = 12, ProductWeight = 900, ProductDesc = "Monaco-Salted Craker" });

listProduct.Add(new Product { ProductId = 6, ProductName = "Hide & Seek Choco Chips", ProductCode = "P006", ProductQty = 24, ProductWeight = 720, ProductDesc = "Hide & Seek Choco Chips" });

listProduct.Add(new Product { ProductId = 7, ProductName = "Hide & Seek Bourbon", ProductCode = "P007", ProductQty = 12, ProductWeight = 780, ProductDesc = "Hide & Seek Bourbon" });

listProduct.Add(new Product { ProductId = 8, ProductName = "Parle Marie", ProductCode = "P008", ProductQty = 24, ProductWeight = 2400, ProductDesc = "Parle Marie" });

listProduct.Add(new Product { ProductId = 9, ProductName = "Coconut Cookies", ProductCode = "P009", ProductQty = 12, ProductWeight = 820, ProductDesc = "Coconut Cookies" });

listProduct.Add(new Product { ProductId = 10, ProductName = "Good Day", ProductCode = "P0010", ProductQty = 12, ProductWeight = 820, ProductDesc = "Good Day" });

return View(listProduct);

}

Step 12:- To Add View of Action Method, Right-click inside the Index Action body => Click Add View => Click Add

Step 13:- Double-click Index.cshtml in Solution Explorer to open and decorate Index.cshtml view with following code

@model IEnumerable<MvcWebGrid.Models.Product>

ViewBag.Title = "Index";

}

<h2>Index</h2>

var webGrid = new WebGrid(Model, rowsPerPage: 5);

}

<hr />

<h3>WEBGRID WITHOUT FORMAT</h3>

@webGrid.GetHtml()

<hr />

<h3>WEBGRID WITH FORMAT</h3>

@webGrid.GetHtml(

tableStyle: "Grid-table",

headerStyle: "Grid-header",

footerStyle: "Grid-footer",

rowStyle: "Grid-row",

alternatingRowStyle: "Grid-alt",

selectedRowStyle: "Grid-selected",

caption: "",

displayHeader: true,

fillEmptyRows: false,

emptyRowCellValue: "",

mode: WebGridPagerModes.All

)

<hr />

<h3>WEBGRID WITHOUT FORMAT WITH EDIT, DETAIL, DELETE HYPERLINK</h3>

@webGrid.GetHtml(

columns: webGrid.Columns(

webGrid.Column(columnName: "ProductName", header: "Product Name"),

webGrid.Column(columnName: "ProductCode", header: "Product Code"),

webGrid.Column(columnName: "ProductQty", header: "Product Qty"),

webGrid.Column(columnName: "ProductWeight", header: "Product Weight"),

webGrid.Column(columnName: "ProductDesc", header: "Product Desc"),

webGrid.Column(header: "Edit", format: @<text>@Html.ActionLink("Edit", "Edit", new { prodId = item.ProductId }) </text>),

webGrid.Column(header: "Details", format: @<text>@Html.ActionLink("Details", "Details", new { prodId = item.ProductId }) </text>),

webGrid.Column(header: "Delete", format: @<text>@Html.ActionLink("Delete", "Delete", new { prodId = item.ProductId }) </text>)