---
title: "Render Partial Views in ASP.NET MVC Using Ajax"  
description: "Hi everyone in this blog I’m explaining about load partial view using JQuery Ajax.Description:In this article, we'll discuss partial views in ASP.NET"  
author: "Anonymous User"  
published: 2015-02-28  
updated: 2018-02-22  
canonical: https://www.mindstick.com/blog/805/render-partial-views-in-asp-dot-net-mvc-using-ajax  
category: "ajax"  
tags: ["ajax", "view", "ajax.net"]  
reading_time: 4 minutes  

---

# Render Partial Views in ASP.NET MVC Using Ajax

Hi everyone in this blog I’m explaining about load [partial view](https://www.mindstick.com/articles/1132/auto-refresh-partial-view-in-asp-dot-net-mvc) using [JQuery Ajax](https://www.mindstick.com/forum/157890/how-does-the-jquery-ajax-method-work-what-are-some-common-options-and-parameters-used-in-it).

##### Description:

##

In this article, we'll discuss [partial views](https://www.mindstick.com/interview/33672/what-are-partial-views-in-mvc) in [ASP.NET MVC](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-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](https://www.mindstick.com/articles/12731/the-importance-of-feedback-to-the-user-experience) because the [components](https://www.mindstick.com/blog/74096/understanding-the-role-of-some-integral-ac-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](https://www.mindstick.com/blog/273/passing-values-from-controller-to-view-in-asp-dot-net-mvc). 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](https://answers.mindstick.com/qa/36932/what-is-your-view-opinion-about-sonu-nigam-s-tweet-about-azaan) then include the jQuery file specifically. So my HomePage.cshtml looks like:

##### HomeController.cs:

```
public class HomeController : Controller    {        //        // GET: /Home/         MyDBEntities db = new MyDBEntities();         public ActionResult Index()        {            return View();        }         public ActionResult GetUserDetails()        {            return PartialView(db.UserDetails.ToList());        }        public ActionResult GetProductDetails()        {            return PartialView(db.ProductDetails.ToList());        }    }
```

##### Index.cshtml:

```
<div class="container">    <div class="row form-group" id="userdetails">     </div>    <div class="row form-group" id="productdetails">     </div></div>
```

```
<script>    $(document).ready(function () {        $.ajax({            url: '/Home/GetUserDetails',            contentType: 'application/html; charset=utf-8',            type: 'GET',            dataType: "html",        })        .success(function(result){            $('#userdetails').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) {            $('#productdetails').html(result);        })        .error(function (xhr, status) {            alert(status);        })    });</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](https://answers.mindstick.com/qa/37508/how-do-i-easily-pass-a-float-serve-in-volleyball) the parameter to the controller methods if we want, via URL itself. Two partial Views

##### GetUserDetails Partial View:

```
@model List<LoadPartial.Models.UserDetail> <div class="col-md-12">    <div class="table-responsive">        <table class="table table-bordered table-striped">            <thead>                <tr>                    <th>User ID</th>                    <th>User Name</th>                    <th>City</th>                    <th>Phone</th>                    <th>Zip Code</th>                </tr>            </thead>            <tbody>                @foreach (var item in Model)                {                    <tr>                         <td>@item.UserId</td>                        <td>@item.Name</td>                        <td>@item.City</td>                        <td>@item.Phone</td>                        <td>@item.Zip</td>                     </tr>                }            </tbody>        </table>    </div></div>
```

##### GetProductDetails Partial View:

```
@model List<LoadPartial.Models.ProductDetail> <div class="col-md-12">    <div class="table-responsive">        <table class="table table-bordered table-striped">            <thead>                <tr>                    <th>Product ID</th>                    <th>Product Name</th>                    <th>Product Quantity</th>                    <th>Price</th>                    <th>Emi Code</th>                </tr>            </thead>            <tbody>                @foreach (var item in Model)                {                    <tr>                         <td>@item.ProductId</td>                        <td>@item.Name</td>                        <td>@item.Quantity</td>                        <td>@item.Price</td>                        <td>@item.EmiCode</td>                     </tr>                }            </tbody>        </table>    </div></div>
```

Now when the page loads it fires two Ajax calls fired individually and when the result is returned then the control is displayed.

##### Output:

##### \

![Render Partial Views in ASP.NET MVC Using Ajax](https://www.mindstick.com/blogs/0a0f4992-1457-4657-b946-84f4692ec02e/images/9e00d43a-b768-46ec-a9a5-0338de258b8c.png)

\

in my next post, i'll explain about [Laptop is dead. How to troubleshoot](https://www.mindstick.com/blog/818/Laptop%20is%20dead%20How%20to%20troubleshoot#.VQKBMo6Udz8)

---

Original Source: https://www.mindstick.com/blog/805/render-partial-views-in-asp-dot-net-mvc-using-ajax

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.