Step By Step How to create an Ajax WebGrid with CRUD functionality in MVC 4 in 20 minutes

        By Carmel Schvartzman

In this tutorial we'll learn how to create an Ajax enabled WebGrid  with paging-sorting capabilities and with CRUD functionality in MVC 4 in 20 minutes. This Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer CRUD (Create Retrieve Update Delete) functionality. Also, the Grid will send Ajax requests for paging and sorting commands.

We'll want to create a Grid with CRUD functionality , showing as follows:

This tutorial will use data fetched from the Entity Framework, exposing the following classes:

To create the WebGrid we must create our own View, and it will not be difficult if we take advantage of the Scaffolding capacities of the MVC environment. So first let's create a new Controller called "BlogController", automatically creating the necessary Views to cope with the CRUD functionality requirements. So right click over the Controllers folder, and add a new Controller:

Name it "BlogController", and select the template "MVC Controller with read/write actions and views, using Entity Framework":

The Context to use will be of course the one you named while creating your Entity Framework Data Model, and the Model will be the Blog class, because we'll be creating, updating and deleting Blog objects.
After you create the Controller, open it and take a look at the Action Methods created for you: there are action methods for displaying the list of Blog posts (Index method), to create new ones , to update them, and to delete:

Open the Views folder and see the Views that were created for you:

First of all, let's add a link to the _Layout .cshtml file Menu, in order to browse to the Blog web page from the Home page:

Build and run without debugging(CTL-F5) your app. Then press the link "See All Posts" from the Menu:

We got a list of the posts in the shape of an HTML table. Click the Create link:

Return to the list and press the Details link:

Now do the same , and press Edit:

And now Delete:

As you see, we got all CRUD functionality. But now we want a WebGrid with paging-sorting capabilities,  instead of a table. So we'll replace the <TABLE> with an WebGrid Html Helper: open the Index View:

And comment the whole  <table> tag:

Next, we'll instantiate a WebGrid, using an overload of the extension method with the following parameters:

The final code for the WebGrid will set as its arguments the data included in the Model (an IEnumerable<>), the number of rows to display in each page, the sorting order and the columns to be displayed:

Now we display the markup of the WebGrid using the GetHtml() WebGrid method:

Buid (F6) and run your app (CTL-F5) , to get this presentation UI:

We automatically got the paging and sorting WebGrid functionalities. But we lost all CRUD functionality that was there before: deleting, editing , and so.
To get that functionality back, find the CRUD block that you comment before:

Copy - paste it to a new column on the WebGrid:

Refresh the browser to see the new column for editing:

As you can see, the Grid has not built-in style, and also the date and the pictures had not been correctly displayed. Let's add templates for displaying the data, using the "format:" argument, to display html tags correctly via the MvcHtmlString() class.
Add a new .css stylesheet file to the "Contents" folder:

Name the .css as GridStyle:

In the stylesheet we include all the style for the WebGrid, footer, header, hyperlinks, even the style for displaying adecuately the pictures:

The code (to copy-paste) is the following:

       .webgrid-table
        {
            font:italic 11px Verdana;
            width: 100%;
            display:grid;
            border-collapse: separate;
            border: solid 1px #98BF21;
            background-color: #f0c9a0;
            padding: 5px 5px 5px 5px;
        }
        .webgrid-header a
        {
            background-color: #c67f1c;
            color: #FFFFFF !important;
            font: 900 14px Verdana !important;
            padding:5px 5px 5px 5px;
            text-align: center;
        }
        .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;
        }

Finally we add a <link> tag before the WebGrid, to include the .css in the Index View:

And we also add a reference to the JQuery javascript file, in order to enable the Ajax functionality:

Then, let's add the style classes to the WebGrid:

Refresh the web page, and look at the results:

Now the Grid has style, but the date and the pictures had not been correctly displayed. Let's fix that:

We added a formatted column as follows:

grid.Column("MainPicture","MainPicture", (item) =>{ return new MvcHtmlString("<img src='Images/"+  item.MainPicture +"' class='webgrid-img'></img>");})

Save and refresh the browser:

This time we got the pictures. Now for the dates:

Now the dates are well displayed. 

Notice that you can do paging:

Also the records are sorted by Title, ascending. Click on the headers of the WebGrid to sort them by date or text, or try to invert the sorting to be descending:

As you can see, i sorted the WebGrid by date descending, by clicking the DatePosted header.
But notice the flickers of the web page when you sort or you page on the grid. That's because every time you do that, the web page sends requests and refreshes the whole page.
Now we'll add Ajax support for the grid. The first thing to do is surround the webgrid with a <DIV> tag with an "ID" attribute:

Next, add the ID of the container to be refreshed with the contents of the response to an Ajax request:

Finally, refresh the web page to see that this time, when you press to the paging buttons, or when you click on the sorting headers of the webgrid, the grid is refreshed accordingly without refreshing the whole web page:

In this tutorial we've learned how to create an Ajax enabled WebGrid  with paging-sorting capabilities and with CRUD functionality in MVC 4 in 20 minutes, exposing data dynamically loaded from database and sent by the Action method from the web server.  
That's all!! 
Happy programming.....

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