MVC Web Grid

In this tutorial, we will go over a simple way to get data from controller and display it in the view using Web Grid.

  For this tutorial, we will be using the Web API tutorial to get the data from Web API source.

   Lets create a view first. I had created a new view in Home folder as TestPage.cshtml

Once the page is created, create a class named CategoryData as below...  This is being used in reference to the Web API we developed earlier. 

To retrieve data from Web API, I will request a call from controller to return all data, which I will tie it up with the grid to display....

 Now, we have everything ready except view. To implement view changes, I will use WebGrid  (make sure you have reference to System.Web.Helpers.dll). Below is the sample code for view.

Now, we are all set to run and test our web grid... But before that, if you are using Home Controller and a different view than index, make sure you update the following changes in App_Start\RouteConfig.cs

Everything is set to run the application. Press F5 and you should see the following output...

The styles implemented so far are pretty simple, you could always refer more at many web sites or be creative to have your own version of styles for table, header, rows, etc...

Happy coding...