Brij's arena of .NET

Working with WebGrid using AJAX : ASP.NET MVC

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

@model IList
@{
    WebGrid grid = new WebGrid(Model);
}

@grid.GetHtml( columns:grid.Columns(
	        grid.Column("ProductName", "Product Name"),
		grid.Column("UnitPrice", "Unit Price"),
		grid.Column("SaleDate", "Sale Date"),
                grid.Column("SoldQuantity", "Sold Quantity"),
		grid.Column("SalesPersonName", "Sales Man")
     )
 )

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

        $.ajax({
            url: '/Home/GetSalesDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
       .success(function (result) {

           $('#dvSalesDetailsLoader').hide();
           $('#dvSalesdetails').show();
           $('#dvSalesdetails').html(result);
       })
       .error(function (xhr, status) {
           alert(status);
       })

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

WebGrid grid = new WebGrid(Model, ajaxUpdateCallback: "SalesDetailsUpdate", ajaxUpdateContainerId: "dvSalesdetails");

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

        function SalesDetailsUpdate(result) {
            $('#dvSalesdetails').html(result);
        }

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

Loading the partial views using Ajax for Beginners

Last week, I was working on an application that was made in ASP.NET MVC3. Earlier I thought of using ASP.NET MVC 4 but didn’t find any specific feature of ASP.NET MVC4 so moved ahead with ASP.NET MVC3 version.

So as I worked on a POC using with ASP.NET MVC initial version long back so I was excited working on it. I had to display multiple user controls and the data of these controls was getting picked up from multiple sources. So I thought of loading the controls via ajax call individually. So let me share my understanding with a example. I have created a sample application in ASP.NET MVC3. I created a main View (called here HomePage.cshtml)and created two Partial Views (_ProductDetails.cstml and _UserDetails.cshtml) that will be displayed. So I’ll show you how easily we can load these controls via Ajax. It will make page more intuitive and seamless to users.

I am showing simple data in these controls and and one control display the details of the users and other control displays product details. For this, I have created two models User and Product.

While we can load each controls easily via jQuery ajax. For this jQuery must be included in the on the View. By default it is included in the __Layout.cshtml. It works as a master layout of the page but if you are not using it in your View then include jQuery file specifically. So my HomePage.cshtml looks like

and my Client side code is as

<script type="text/javascript">// <![CDATA[
        $.ajax({
            url: '/Home/GetUserDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
        .success(function (result) {
           $('#dvUserdetails').show();
            $('#dvUserdetails').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })

        $.ajax({
            url: '/Home/GetProductDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
       .success(function (result) {
           $('#dvProductDetails').show();
           $('#dvProductDetails').html(result);
       })
       .error(function (xhr, status) {
           alert(status);
       })

// ]]></script>

So here you can see as each control is loaded individually. For each control, I have defined a method in Controller and that method is called via Ajax . When result is returned from the ajax call successfully that success event gets fired. Here I am setting the returned HTML in a div and displaying it.

Also here we can easily pass the parameter to the controller methods if we want, via url itself.

Now when page load it fires two ajax calls fired individually and when the result is returned then the control is displayed. In the meantime, user may see blank screen, so here we can show some loader image and once result is returned and we hide it display the control in success event.

I have included the sample in attachment. (I have created this demo using Visual Studio 2012). When we’ll run the application, it looks like

Hope you have enjoyed.

Thanks,
Brij