MVC Ajax WebGrid with Sorting and Paging

In this Step by step MVC Ajax WebGrid with Sorting and Paging in 10 Minutes 

   we see how to build an Ajax enabled WebGrid using an jQueryUI Theme  in 10 minutes, following this simple steps :

1) Use MVC scaffolding and build your Model and Views
2) Select a jQueryUI Theme & download it
3) In the "Index" View, replace the Table with a WebGrid and enable Ajax


All the code in this tutorial , can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/MVC_WebGrid

This is how this sortable paged Ajax WebGrid is shown in the Ripple Mobile Emulator , Nexus Galaxy settings:

MVC Ajax WebGrid with Sorting and Paging in 10 Minutes

The whole process of creating an Ajax WebGrid with a jQueryUI Theme , is as following:

1) Use MVC scaffolding and build your Model and Views:

First build your MVC project using EDM & Controller scaffolding.

2) Select a jQueryUI Theme & download it

Browse to http://jqueryui.com/themeroller/  , select your Theme, and download it.
After you unzip the folder, you'll see several files in it.
You do not need all of them. Just copy the following 2 files and folder to your MVC project:

Paste the files inside your MVC project as follows:

As you can see, the ONLY files that we'll use from the jQueryUI theme are the following:

1) JS folder :
     "jquery-X.X.X.min.js" (here get the latest version of jQuery)
     "jquery-ui.min.js"

2) CSS folder :
     "jquery-ui.css"

Add the following references to the _Layout file:

There is no need of referencing the "images" folder.

Also, you get the latest version of jQuery framework : at this moment, that version is 2.1.4

3) In the "Index" View, replace the Table with a WebGrid and enable Ajax

Then go to the "Index" view, and comment the Table that was scaffolded there.
Add the following markup to replace it:

<link href="~/Content/index.css" rel="stylesheet" />

@{ var grid = new WebGrid(Model, new[] { "Title", "DatePosted", "MainPicture" }, rowsPerPage: 3, ajaxUpdateContainerId: "gridDIV"); }


<div id="gridDIV">
@grid.GetHtml(tableStyle:"webgrid-table",headerStyle:"webgrid-header",

    columns: new[] {

        grid.Column("ID",format:(item) =>  item.GetSelectLink(item.BlogID.ToString()) ) ,
        grid.Column("Title",format:@<a href='/Blog/Comments/@item.BlogID'><b>@item.Title</b></a>),
        grid.Column("DatePosted","DatePosted", (item) => String.Format("{0:dd/MM/yyyy}", item.DatePosted != null ? item.DatePosted : DateTime.Now )),
        grid.Column("Picture",format:(item) =>
        { return new MvcHtmlString("<a href='/Blog/Comments/" + item.BlogID +
            "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");
        }),
  
        grid.Column(
            format:@<div class="ActionsTH">
            @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })
            @Html.ActionLink("Details", "Details", new { id=item.BlogID })
            @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })
        </div>)
    })
</div>

This code enable Ajax on the Grid, which comes already with Sorting and Paging functionality.
Of course, customize this code with your Model's properties.

As you can see, we also reference a "~/Content/index.css" file:
Inside this file, i added background style found in the "images" folder, such as "images/ui-bg_fine-grain" corresponding to the Theme "Pepper-Grinder" .
If you select another Theme, replace the backgrounds accordingly.
Create this CSS file in the Content folder , and paste this style in it:


body {
    background: #f7f3de url("images/ui-bg_fine-grain_15_f7f3de_60x60.png") 50% 50% repeat;
}

.webgrid-table {
    font: italic 11px Verdana;
    width: 100%;
    display: grid;
    border-collapse: separate;
    border: solid 1px #98BF21;
    background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

.webgrid-header th {
    width: 150px;    
    background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFFFFF !important;
    font: 900 14px Verdana !important;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

.ActionsTH {
    width: 50px;
    background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;
    color: #FFFFFF !important;
    font: 900 14px Verdana !important;
    padding: 5px 5px 5px 5px;
    text-align: center;
    width: 180px;
}

.webgrid-footer, .webgrid-footer a {
    background-color: #c67f1c;
    color: #FFF;
    font: 900 14px Verdana;
    padding: 3px 3px 3px 3px;
}

.webgrid-alternating-row {
    background-color: #e5d773;
    padding: 5px 5px 5px 5px;
}

.title-column {
    font: 900 13px Verdana;
    text-align: center;
}

.webgrid-img {
    width: 150px;
    height: 150px;
}

.webgrid-table a {
    text-decoration: none;
    color: #808080;
}

Important:
If you do not see the Ajax working (), it is because the jQuery scripts are lacking.
Just cut the jQuery.js file from the _Layout file to the <head> tag :
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
</head>

THE END

To use a Mobile devices Emulator, take a look at this short tutorial on installing the FREE Ripple Emulator.

That's all. Our WebGrid will be displayed this way:

      by Carmel Schvartzman

כתב: כרמל שוורצמן