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