Node is saved as draft in My Content >> Draft
-
WebGrid in MVC
over 8 years ago
While working with bulk of records in MVC Model View Controller, you need to display it in the grid or repeater.
With binding it with the grid is different thing in MVC for those who have bind it in simple web application before.
First we will create a model class for defining our attributes or entities
public class Product { public string Id { get; set; } public string Name { get; set; } public string Description { get; set; } public long Quantity { get; set; } }After that we will create a controller which contains the dummy data to be bind with the web grid.
public class InventoryController : Controller { public ActionResult WebgridSample() { List<Product> inventoryList = new List<Product>(); inventoryList.Add(new Product { Id = "P101", Name = "Computer", Description = "All type of computers", Quantity = 800 }); inventoryList.Add(new Product { Id = "P102", Name = "Laptop", Description = "All models of Laptops", Quantity = 500 }); inventoryList.Add(new Product { Id = "P103", Name = "Camera", Description = "Hd cameras", Quantity = 300 }); inventoryList.Add(new Product { Id = "P104", Name = "Mobile", Description = "All Smartphones", Quantity = 450 }); inventoryList.Add(new Product { Id = "P105", Name = "Notepad", Description = "All branded of notepads", Quantity = 670 }); inventoryList.Add(new Product { Id = "P106", Name = "Harddisk", Description = "All type of Harddisk", Quantity = 1200 }); inventoryList.Add(new Product { Id = "P107", Name = "PenDrive", Description = "All type of Pendrive", Quantity = 370 }); return View(inventoryList); } }After it we will create a view by right clicking on it and selecting add view from that.
After selecting that you will select model named Product and click ok.
View will be generated where you will write the following HTML:
<html> <head> <title>WebgridSample</title> <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <style type="text/css"> .webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;} .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; } .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; } .alt { background-color: #E4E9F5; color: #000; } .gridHead a:hover {text-decoration:underline;} .description { width:auto} .select{background-color: #389DF5} </style> </head> <body> @{ WebGridSampleApplication.Models.Product product = new WebGridSampleApplication.Models.Product(); } @{ var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent"); grid.Pager(WebGridPagerModes.NextPrevious);} <div id="gridContent"> @grid.GetHtml(tableStyle: "webGrid", headerStyle: "header", alternatingRowStyle: "alt", selectedRowStyle: "select", columns: grid.Columns( grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)), grid.Column("Name", " Name"), grid.Column("Description", "Description", style: "description"), grid.Column("Quantity", "Quantity") )) @if (grid.HasSelection) { product = (WebGridSampleApplication.Models.Product)grid.Rows[grid.SelectedIndex].Value; <b>Id</b> @product.Id<br /> <b>Name</b> @product.Name<br /> <b>Description</b> @product.Description<br /> <b>Quantity</b> @product.Quantity<br /> } </div> </body> </html>You will get the following result:
.
0 Comment(s)