A Simple Data Grid for ASP.NET MVC 3 and 4 - Part 1

One of the most useful and often overlooked features of ASP.NET MVC 3 and 4 is the ability to create and use Simple Data Grids. Unlike prior versions of ASP.NET MVC which did not have built in support for Data Grids, the latter allows you to fairly quickly create a Grid wich includes Sorting of Columns as Well as Paging.

Here is a short example of how to do that. Create an MVC 3 or 4 Web Application Project. First let's create a Model called "Person" for our Data, which will hold the data for us:



 In the Home Controller (HomeController.cs) of it under the Index Action Method, enter the following to generate some fake data for us and pass it to the view (of course one could query the database to do the same here):




Last but not least, on the Home View (Index.cshtml), add the following code:



Once you put it all together, you will get a simple Grid that looks like the following:



































Of course there is a lot more you can do with the Grid, but this is definitely a great start! Feel free to download the Source Code of the above Test Project below (Visual Studio 2012 Solution):

Download: GridTest1.zip

Want to see the whole thing in a video? Take a look at this clip:



Pete Soheil
DigiOz Multimedia, Inc.
www.digioz.com