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

Brij Mishra

24 Comments

Join the conversation! Your thoughts help the community grow.

gampa dug2y ago
Uncaught TypeError TypeError: $.ajax(...).success is not a function
gampa dug2y ago
Where is the controller code? How is the data being sent to the jquery?
gampa dug2y ago
It would be prudent for the author to use some indentation in the code samples. It is difficult to quickly ascertain where one function ends and another begins.
Endpoint Expenses3y ago
Can someone tell how the partial page is called from ajax? we don't have any link in above ajax code.
Endpoint Expenses3y ago
Please someone can explain how ajax is calling particular partial view ?in above code
Balasubramanian R4y ago
Where is action methods code for GetUserDetails,GetProductDetails?
suv suv4y ago
$('#dvProductDetails').html(result); this line is giving XSS issues by static code analyzer tools like Fortify. What to do ?
siddharth khatri5y ago
Thanks sir ,you solved my problem
Dharmendra Kumar Pandit6y ago
Thank you sir. Its helped me alot. Very very thank you.
Jhon Hernández6y ago
Please leave a link to the code
Shakir Ali7y ago
Hi, You can impliment same code which is given above by using Action in a simple way as given below , It's work for me Public PartialViewResult ProductionModelDetail(int id) { ProductBAL obj = new ProductBAL(); List<ProductionStockDetailModel> productModellist = new List<ProductionStockDetailModel>(); List<ProductionStockDetailEntity> paintentity = obj.ProductionModelDetail(id); ProductionStockDetailModel productModel; if (paintentity != null) { foreach (ProductionStockDetailEntity item in paintentity) { productModel = new ProductionStockDetailModel(); productModel.MakeId = item.MakeId; productModel.ModelId = item.ModelId; productModel.PartId = item.PartId; productModellist.Add(productModel); } } return PartialView(productModellist); }
Mrnams8y ago
Hello experts,I want to implement load more button for my website ,https://mrnams.com Can any one please give idea how to implement load more button to load more videos without refreshing (I mean without loosing loaded videos) page. Similar to YouTube functionality. I am using .net core 2.1 version Can any one please give idea how to implement load more button to load more videos without refreshing (I mean without loosing loaded videos) page. Similar to YouTube functionality. I am using .net core 2.1 version
Tridip Bhattacharjee9y ago
This code is incomplete. GetUserDetails and GetProductDetails code has not been posted here. this is very odd.
Jean Samson9y ago
Nope. Didn't work.
neal tyree9y ago
I made an account to say thanks.I have looked at so many different ways to populate multiple partials, this is awesome. This is easy to follow and straight forward. I cannot thank you enough. Thank you, thank you, thank you.
kiran k9y ago
You saved my day.Thank you very much sir!
kiran k9y ago
Saved my day.Thank you very much sir!
Munesh Sharma10y ago
nice
Thokozani Gwiliza10y ago
Would have been great to see how your controller look like.
- Elijah Tate9y ago
  It would be immensely helpful to see the controller. Kind of confused about what the return looks like. All examples I have seen are like return PartialView("MyPartialView"). Where do you put the model?!!!
Upendra Pratap Shahi11y ago
good..
Harshal Khatri11y ago
What if I have Create Partial View that needs to be POST and check the validation and bring success or failure
Karim Souissi12y ago
Hi Katja , good question , Normally the view might have two Input button wish their Id must be called in the top of the Ajax Implementation, like that : $('#btnAjax').click(function ajaxCall() { //Ajax method });
Katja Hansen12y ago
How do the view know which partialView to use?

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:

<body>
<h1>First Partial View</h1>
<div id="dvUserdetails" style="width: 50%%; height: 130px; display:none">
</div>
<h1>Second Partial View</h1>
<div id="dvProductDetails" style="width: 50%; height: 130px; display:none">
</div>
</body>

Client-side code is as:

<script type="text/javascript">
$.ajax ({
url: '/ Home/GetUserDetails',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
.success (function (result) {
$('#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').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 the parameter to the controller methods if we want, via URL itself. Two partial Views are,

Product partial view ( _ProductDetails.cshtml) is as,

<body>
<div>
<table style="width: 100%%; height: 100%">
<tr>
<th>Product Name</th>
<th>ManufacturedDate</th>
<th>Price</th>
<th>IsAvailable</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td> @item.Name</td>
<td> @item.ManufacturedDate</td>
<td> @item.Price</td>
<td> @item.IsAvailable</td>
</tr>
}
</table>
</div>
</body>

And the user partial view ( _UserDetails.cshtml) is as,

<body>
<div>
<table style="width: 100%; height: 100%%">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>DisplayName</th>
<th>Age</th>
<th>Profession</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td> @item.FirstName</td>
<td> @item.LastName</td>
<td> @item.DisplayName</td>
<td> @item.Age</td>
<td> @item.Profession</td>
</tr>
}
</table>
</div>
</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,

These controls load individually via AJAX.