Post
Ask Question

How To Load Partial Views In ASP.NET MVC Using jQuery Ajax

In this article, we'll discuss partial views in ASP.NET MVC and loading them via jQuery AJAX. There could be several scenarios for this. Let's assume that we have a page that contains multiple partial views and data from various sources. So we can load each partial view using AJAX individually, it will improve the user experience because the components that can be loaded earlier won't be delayed until all the components load. As soon as each control loads, they will be available to the user on the screen.

I have used ASP.NET MVC3 for this article but it does not matter whether you use MVC3 or MVC4 or MVC5. I have 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 viaAjax. It will make the page more intuitive and seamless to users.
I am showing simple data in these controls 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.

Also, I have created two methods GetUserDetails and GetProductDetails in Home Controller. GetUserDetails returns a list of users and GetProductDetails returns a list of products.

While we can load each control 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 the jQuery file specifically. So my HomePage.cshtml looks like:

  1. <body>  
  2. <h1>First Partial View</h1>  
  3. <div id="dvUserdetails" style="width: 50%%; height: 130px; display:none">  
  4. </div>  
  5. <h1>Second Partial View</h1>  
  6. <div id="dvProductDetails" style="width: 50%; height: 130px; display:none">  
  7. </div>  
  8. </body>  
Client-side code is as:

  1. <script type="text/javascript">  
  2. $.ajax ({  
  3. url: '/ Home/GetUserDetails',  
  4. contentType: 'application/html; charset=utf-8',  
  5. type: 'GET',  
  6. dataType: 'html'  
  7. })  
  8. .success (function (result) {  
  9. $('#dvUserdetails').html(result);  
  10. })  
  11. .error(function (xhr, status) {  
  12. alert(status);  
  13. })  
  14. $.ajax ({  
  15. url: '/ Home/GetProductDetails',  
  16. contentType: 'application/html; charset=utf-8',  
  17. type: 'GET' ,  
  18. dataType: 'html'  
  19. })  
  20. .success (function (result) {  
  21. $('#dvProductDetails').html(result);  
  22. })  
  23. .error(function (xhr, status) {  
  24. alert(status) ;  
  25. })  
  26. </script>  
So here you can see each control is loaded individually. For each control, I have defined a method in Controller and that method is called via Ajax. When the result is returned from the ajax call successfully then that success event is 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. Two partial Views are,

Product partial view ( _ProductDetails.cshtml) is as,
  1. <body>  
  2. <div>  
  3. <table style="width: 100%%; height: 100%">  
  4. <tr>  
  5. <th>Product Name</th>  
  6. <th>ManufacturedDate</th>  
  7. <th>Price</th>  
  8. <th>IsAvailable</th>  
  9. </tr>  
  10. @foreach (var item in Model)  
  11. {  
  12. <tr>  
  13. <td> @item.Name</td>  
  14. <td> @item.ManufacturedDate</td>  
  15. <td> @item.Price</td>  
  16. <td> @item.IsAvailable</td>  
  17. </tr>  
  18. }  
  19. </table>  
  20. </div>  
  21. </body>  
And the user partial view ( _UserDetails.cshtml) is as,
  1. <body>  
  2. <div>  
  3. <table style="width: 100%; height: 100%%">  
  4. <tr>  
  5. <th>FirstName</th>  
  6. <th>LastName</th>  
  7. <th>DisplayName</th>  
  8. <th>Age</th>  
  9. <th>Profession</th>  
  10. </tr>  
  11. @foreach (var item in Model)  
  12. {  
  13. <tr>  
  14. <td> @item.FirstName</td>  
  15. <td> @item.LastName</td>  
  16. <td> @item.DisplayName</td>  
  17. <td> @item.Age</td>  
  18. <td> @item.Profession</td>  
  19. </tr>  
  20. }  
  21. </table>  
  22. </div>  
  23. </body>  
Now when the page loads it fires two ajax calls fired individually and when the result is returned then the control is displayed. In the meantime, the user may see a blank screen, so here we can show some loader image and once the result is returned and we hide it we display the control in a success event.

When we'll run the application, it looks like,

afterrunning.png

These controls load individually via AJAX.


Similar Articles