Contents
WebGrid in ASP.NET MVC – 6 important tips
Introduction
Simple Example of MVC WebGrid
Tip1 :- Sorting in MVC WebGrid
Tip 2 :- Paging in MVC WebGrid
Tip 3 :- Display Necessary Columns MVC WebGrid
Tip 4 :- Giving Custom Column Name’s in MVC WebGrid
Tip 5 :- Adding Style to MVC WebGrid
Tip 6:- Implementing Ajax with WebGrid
When a Webform developer migrates himself to MVC he sees some of his favorite things missing. He does not see the behind code, view state, page life cycle, server controls and so on. You can see this article what an ASP.NET Webform developer will miss when he comes to MVC.
But lots of developers go in to a heart breaking and jaw dropping state when they see their favorite server controls missing. From that the most missed is the gridview / datagrid controls. As a ASP.NET Webform developer I really understand the fun of dragging and dropping the GridView control on the form , binding and seeing the output in seconds is addiction.
So in MVC we have the “WebGrid” class for rescue. It’s a class again I repeat a class so it does not match to those visual RAD of old gridview and data grid but is pretty much better than using raw HTML tables if you want to reduce time. In case you are still wondering why we do not have visual RAD support for MVC read this article ASP.NET Webform VS ASP.NET MVC.
In this article we will try to understand MVC WebGrid and 6 important tips which help you to use WebGrid effectively.
“WebGrid” displays from a collection , now that collection can be a strong typed list, generic etc. So let us a see a first let us load a simple collection with some strongly typed objects and display these objects in to a grid using “WebGrid” class.
In the below code you can see we have loaded a simple “List” collection with “Customer” objects in variable called as “Custs”.
@{
List<Customer> Custs = new List<Customer>();
Custs.Add(new Customer { CustomerCode = "1001", CustomerName = "Shiv" });
Custs.Add(new Customer { CustomerCode = "1002", CustomerName = "Shiv1" });
In order to display the collection on a MVC view we create the object of “WebGrid” and pass the “Customer” collection via the constructor of the “WebGrid” class.”Custs” is a variable collection of list of customers.
The second step is to call “GetHtml()” method to display the grid in HTML table format.
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml();
Once you can run the above view using MVC you should get a display as shown in the below figure. Nice isn’t it :-).
When you talk about displaying data in the grid the first thing we look is how to do sorting.In MVC “WebGrid” by default sorting happens on the column names. If you see the column names very closely it has hyperlinks which helps you do sorting.
In case you want to disable the hyperlink sorting you can make “canSort” as “false” as shown in the below code snippet.
WebGrid obj = new WebGrid(Custs, canSort:false);
If you want to apply a default sort you can pass the column name to the “defaultsort” in the constructor as shown in the below code.
WebGrid obj = new WebGrid(Custs,defaultSort:"CustomerCode");
For doing paging using MVC WebGrid you can specify the “rowsPerPage” value as shown in the below code.
WebGrid obj = new WebGrid(Custs,rowsPerPage:3);
The paging is seen as hyperlinks as shown in the below figure.
Lot of times you have 10 columns in the collection but you want to display only 5. In order to display necessary columns you can use “ColumnNames” parameter and specify the column names.
WebGrid obj = new WebGrid(Custs,columnNames: new[] { "CustomerCode"});
In the below display you can see “CustomerCode” is only displayed and “CustomerName” is suppressed.
Many times the column names specified in the collection is not user friendly. For example we have a column name as “CCode” but when we want to display the same on the grid we would like to display it as “CustomerCode”.
For that we need pass the column names in the “columns” parameter in the “GetHtml” function as shown below. In the below code snippet we want to display “CustomerCode” as “Code” and “CustomerName” as “Name”.
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml(columns: obj.Columns(
obj.Column("CustomerCode", header: "Code"),
obj.Column("CustomerName", header: "Name")
));
If you run the above view you will get a display as shown in the below figure.
One of the most demanded feature from a developer is changing the look and feel of the grid. In MVC Webgrid we can create a style in CSS and apply the same to the webgrid.
You can apply style to all sections of the WebGrid. In other words you can apply CSS style to table footer, header , row etc.
So you can create CSS the way do normally. You can see in the below code snippet we have created a style “webGrid” with specific margin , border and width etc.
<style type="text/css">
.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #B4CFC3;
}
The above style can now be applied to the grid by setting the “tableStyle” in the “GetHtml” function.
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml(tableStyle:"webGrid");
If you run the above code you see your table with the below style in the browser.
Ajax is now a default thing needed in all websites. If you want to enable Ajax in WebGrid you need to the following. First step wrap the call to “GetHtml” in a HTML div tag as shown in the below code. The second step is to provide the div tag id value in “ajaxUpdateContainerId” parameter.
<div id="div1">
@{
WebGrid obj = new WebGrid(Custs, ajaxUpdateContainerId: "div1");
}
@obj.GetHtml();
</div>
In case you are new to ASP.NET MVC start with the video Learn MVC in 2 day’s a.k.a 16 hours.
For further reading do watch the below interview preparation videos and step by step video series.
