Click here to Skip to main content
Click here to Skip to main content

WebGrid in ASP.NET MVC4

, 14 Jul 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
This tip will help you to develop a webgrid in ASP.NET MVC application.

Introduction  

We can define WebGrid to display data on a web page using an HTML table element. It renders tabular data in a very simple manner with support for custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.

The main properties in WebGrid are:

  • Source – Where your data comes from. Usually the model passed by the controller action.
  • DefaultSort – Here you can define how the data will be sorted. Just provide the column name here.
  • RowsPerPage – Number of records that will be shown on table.
  • CanPage – Allows paging.
  • CanSort – Allows sorting by clicking on column title.
  • SelectedFieldName - Gets full name of the query-string field that is used to specify the selected row of the WebGrid instance.

Using the Code

In this tip, I will explain how to use WebGrid in an ASP.NET MVC 4 application. First, I am going to create a Model named Product.

Product.cs

public class Product
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public long Quantity { get; set; }
} 

I am using Razor view engine and my InventoryController contains the following action:

InventoryController.cs

public ActionResult WebgridSample()
{
    ObservableCollection<Product> inventoryList = 
    	new ObservableCollection<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);
}  

In my WebgridSample View, I am creating a WebGrid and specify the columns in the call to GetHtml.

WebgridSample.cshtml:

@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, 
    selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);} 

The WebGrid helper allows us to add class names to style the table, header, footer, row, and alternating row elements.

<style type="text/css">
    .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#B4CFC3;}
    .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: #71857C}
</style> 

Adding the columns to a grid for specifying the column order, name, and field to bind:

<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")
     )) 
</div>

For navigating the selected item, I use the format parameter in the Id column. The format parameter of the Column method allows us to customize the rendering of a data item.

grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)) 

The below code display the selected row in an HTML code block, and for that I created an instance of the model Product.

@{
    InventoryManagement.Models.Product product = new InventoryManagement.Models.Product();
}

@if (grid.HasSelection)
{
 product = (InventoryManagement.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 />
}

For avoiding page refresh while pagination, we can add an AJAX parameter ajaxUpdateContainerId and wrap the grid markup with a DIV element. Here we can assign the div id as  ajaxUpdateContainerId.

ajaxUpdateContainerId: "gridContent"

Add a reference to jQuery.

 <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>   

Here in this  example if you want to get the selected item from webgrid and want to show in seperate page, yoy can use Action link in webgrid column.

 @Html.ActionLink("Link text",
                          "Action Method Name",
                          "Controller Name",
                         "Route value",
                 "htmlArguments" 
                 )
                
grid.Column("Detail", format: @<text>@Html.ActionLink("Select", "Submit",
                new { QtId = item.QtId }) </text>),

In the Action , you can pass the parameter as id and retrieve the corresponding value to show in the page.

History

  • 4th July, 2013: Initial post.

This tip is based on this blog.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

josh-jw

India India
No Biography provided

Comments and Discussions

 
QuestionAbout edit template inside webgrid PinmemberMember 1066626226-Jan-15 22:30 
QuestionNice written a similiar one PinmvpShivprasad koirala20-Nov-14 2:56 
QuestionExcellent Pinprofessionalkra_kos24-Oct-14 3:42 
QuestionGood article Pinmemberjetendramanpradhan24-Jul-14 20:06 
Questionwhat is ObservableCollection PinmemberMember 80204536-Jul-14 7:18 
AnswerRe: what is ObservableCollection Pinprofessionalkra_kos24-Oct-14 3:40 
Generalwebgrid in mvc PinmemberBinu19852-Jul-14 3:37 
Questionweb grid in mvc 4 razor(.vbhtml) Pinmemberavelsamy27-Mar-14 21:54 
QuestionAdding Id value to a checkbox Pinmemberlherselman13-Mar-14 23:59 
SuggestionOverall helpful Topic for WebGrid PinmemberMonibrata Bhattacharjee11-Feb-14 19:47 
GeneralMy vote of 3 Pinmembermatheus-guimaraes10-Feb-14 12:38 
QuestionError on running Pinmemberjoeller30-Jan-14 9:58 
GeneralMy vote of 5 PinmemberMember 1032399326-Jan-14 1:13 
Questionradio button instead of select link Pinmemberolaleye_oladejo2-Dec-13 5:44 
QuestionQuerystring parameters not showing up in url after click!?! [modified] PinmemberLuc Archambault22-Nov-13 21:13 
QuestionThe best overloaded method match for 'System.Web.Helpers.WebGridRow.GetSelectLink(string)' has some invalid arguments PinmemberTony Girgenti1-Oct-13 14:06 
AnswerRe: The best overloaded method match for 'System.Web.Helpers.WebGridRow.GetSelectLink(string)' has some invalid arguments PinmemberVaibhav Tiparadi8-May-14 2:16 
GeneralMy vote of 5 PinprofessionalSampath Lokuge15-Jul-13 0:43 
GeneralMy vote of 4 PingroupDeenuji11-Jul-13 22:37 
Questionhow do i add button i each column Pinmembervidhya511-Jul-13 1:19 
AnswerRe: how do i add button i each column Pinmemberjosh-jw11-Jul-13 19:07 
GeneralMy vote of 5 PinmemberGregoryW8-Jul-13 21:57 
QuestionAdd the source code in downloadable format PinmemberTridip Bhattacharjee8-Jul-13 6:02 
AnswerRe: Add the source code in downloadable format Pinmemberjosh-jw8-Jul-13 21:45 
GeneralRe: Add the source code in downloadable format PinmemberTridip Bhattacharjee9-Jul-13 22:25 
SuggestionAdd the source project Pinmembercvogt614575-Jul-13 11:31 
GeneralRe: Add the source project Pinmemberjosh-jw8-Jul-13 21:45 
QuestionNice tip! PinprofessionalPrasad Khandekar5-Jul-13 4:40 
Questionvery nice tip PinprofessionalEduardo Antonio Cecilio Fernandes5-Jul-13 2:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150129.1 | Last Updated 15 Jul 2013
Article Copyright 2013 by josh-jw
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid