Wednesday, August 21, 2019

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


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:
MVC Ajax WebGrid with Sorting and Paging1



Paste the files inside your MVC project as follows:

MVC Ajax WebGrid with Sorting and Paging2


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:

MVC Ajax WebGrid with Sorting and Paging3

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:
MVC Ajax WebGrid with Sorting and Paging4

MVC Ajax WebGrid with Sorting and Paging5

MVC Ajax WebGrid with Sorting and Paging6





      by Carmel Schvartzman


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



1 comment:

  1. Thanks for sharing, nice post! Post really provice useful information!

    Hương Lâm chuyên cung cấp máy photocopy, chúng tôi cung cấp máy photocopy ricoh, toshiba, canon, sharp, đặc biệt chúng tôi có cung cấp máy photocopy màu uy tín, giá rẻ nhất.

    ReplyDelete