I am going to write another post on ASP.NET MVC. Here in this post, I’ll be talking about WebGrid. If you have read my last post ( to go Click here), I had a main View and many Partial Views that are integrated with main View. Every partial view was independent and we loaded each partial view via jQuery AJAX call.

I got another requirement to have one more partial view on that page which also shows the data similar to other controls but here the requirement was to provide a specific feature Sorting. So as I was looking for various options for it. First I thought to making my custom partial view which provides the desired behavior. But I thought of using any existing control.

Later I found, that a class WebGrid is provided and available under namespace System.Web.Helpers, that renders the data in HTML table element and also provide feature like sorting, paging etc. I required sorting feature so I decided to use it and found fairly simple to write the code for it.

The code at my partial view is as

<br />@model IList<br />@{<br />    WebGrid grid = new WebGrid(Model);<br />}<br /><br />@grid.GetHtml( columns:grid.Columns(<br />	        grid.Column("ProductName", "Product Name"),<br />		grid.Column("UnitPrice", "Unit Price"),<br />		grid.Column("SaleDate", "Sale Date"),<br />                grid.Column("SoldQuantity", "Sold Quantity"),<br />		grid.Column("SalesPersonName", "Sales Man")<br />     )<br /> )<br />

If we see the above code, we have created am instance of WebGrid and gave the model in the constructor itself. So that it can bind with the model. Then I have defined the column in the WebGrid that I want to show on the page.

I have just added this control to my sample that I created in last post. (I’ll attach the complete code) and wrote my Client side to load the control as

<br />        $.ajax({<br />            url: '/Home/GetSalesDetails',<br />            contentType: 'application/html; charset=utf-8',<br />            type: 'GET',<br />            dataType: 'html'<br /><br />        })<br />       .success(function (result) {<br /><br />           $('#dvSalesDetailsLoader').hide();<br />           $('#dvSalesdetails').show();<br />           $('#dvSalesdetails').html(result);<br />       })<br />       .error(function (xhr, status) {<br />           alert(status);<br />       })<br />

Apart from this  I created the model class for SalesDetails and corresponding Controller method.

Here if we see I am again using jQuery ajax to load the control and assigning the returned HTML to the corresponding div.

I have shown the specific code that is required for this post. The complete code is attached.

When I ran the code, it worked perfectly as

You can see the newly added control (Sales Details in the encircled area), It displays the data perfectly. But when I clicked on Unit Price column header to sort, I got shocked because it got displayed as

But when I gave it a thought, I understood the problem. After clicking on Unit Price the page did not maintained the state of the page and after the refresh only control that I clicked got available on the refreshed page.

But if you see the column is sorted and if check the URL grid itself send the sort column name and sort direction as query string.

I had to refresh the only that area of the page that contains the last control. So I did some research on it and made changes and finally got succeeded. For that I had to made the change in the code.

First I updated the code where I instantiated the WebGrid class in the Partial View as

<br />WebGrid grid = new WebGrid(Model, ajaxUpdateCallback: "SalesDetailsUpdate", ajaxUpdateContainerId: "dvSalesdetails");<br />

Here, if you see I have assigned two more properties; one is ajaxUpdateContainerId which is assigned with the div id where the control’s rendered HTML is displayed. And another ajaxUpdateCallback this is assigned a Client side method that is fired on every refresh initiated from the grid. So the Client side method is simple and is as

<br />        function SalesDetailsUpdate(result) {<br />            $('#dvSalesdetails').html(result);<br />        }<br />

Here I am just putting the result in the defined div. Now when I ran the code, It started working fine and the now only the grid
is updating on sorting.

Hope you have enjoyed this post.

Thanks,
Brij