In WebForms, first we had a DataGrid and then the GridView that we relied on for our grid type presentations. Well, once we started using MVC, it was a little more difficult since there are no ‘controls’ per se.

We’ll skip the Model and the Controller parts, since you probably know how to return data, and we’ll concentrate on presentation using the View for this demonstration. Also, for the record, I’m using the Razor syntax.

First, we declare it using the model:

@{ var grid = new WebGrid(Model.YourModel); }

Then, if you are not loading the grid while loading the page (on demand, so to speak), you’ll need an ‘if’ statement:

@if (Model.YourModel != null)

Then, for the rest of the if, surround the following with curly brackets – something like this:

{
@grid.GetHtml(
htmlAttributes: new { id = "grid" },
fillEmptyRows: true,
tableStyle: "webgrid",
headerStyle: "head",
alternatingRowStyle: "alt",
selectedRowStyle: "selected",
footerStyle: "footer",
numericLinksCount: 10,
firstText: "First",
lastText: "Last",
columns: grid.Columns(
    grid.Column("Last_Name"", header: "Last Name", canSort: true),
    grid.Column("First_Name", header: "First Name", canSort: false),
    grid.Column("Birth_Date", header: "Birth Date", canSort: true,
        format: (item) => string.Format("{0:MM/dd/yyyy}", item.Birth_Date), style: "alignLeft"),
    grid.Column("Address_Line_1", header: "Address", canSort: false),
    grid.Column("Zip", canSort: false)
),
mode: WebGridPagerModes.All
)
}

I won’t get into details on this because I’m just presenting it as an example. Anything referencing ‘style’ in the upper portion is of course a specific style you would need to put in your style sheet for your site. A lot of it is much like what would be included in a GridView, so it’s not that hard to learn.

Now it’s up to you – give it a shot!