Sending PartialView Through jQuery Ajax Request In ASP.NET MVC

Manas Mohapatra

11y131k19100Article

19 Comments

Join the conversation! Your thoughts help the community grow.

Joe Castro8y ago
I know this an old post, I am new to programing. How can I accomplish this with .onclick instead of the data just showing up in the div?
Ajay Raval11y ago
if you are returning JsonResult or pure json by using custom action result then this code will work. but since you are returning partial view (basically html) you have to define dataType as html (or leave it blank). Run your code and tell me whether it is working or not.
Ajay Raval11y ago
Please have a look at this link : http://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/
Manas Mohapatra11y ago
Ajay, AJAX request is receiving data in Json because "datatype is josn". Controller is sending data(HTML content) as Json. It works fine.
Ajay Raval11y ago
You have defined data type as json in your ajax request. However you are returning html. So I guess you will have to change data type. Other wise it won't be considered as a successful request and error block will be executed.
Ajay Raval11y ago
Nice one. But there's a problem.
Sachin Kalia11y ago
Manas great attempt.made..Gear Up..However realized that the Title of Article should be Load Partial view using AJAX request...Sending PartialView Through jQuery Ajax Request looks a like that you are sending Partial page in AJAX request ..PLease share your opinion.
Mohammad Ghorbani11y ago
good job man . thanks
Sachin Kalia11y ago
Gud one..Simplfied !
Sibeesh Venu11y ago
Nice Share
Ajeet Mishra11y ago
good one
Ankit Bansal11y ago
thanks for sharing..
Milu Swain11y ago
Nice Share...
Sujeet Suman11y ago
Nice Article...................
Atul Rawat11y ago
nice article sir
Harshad Pansuriya11y ago
Nice one
Karthikeyan K11y ago
Good one sir...Thanks for sharing
Ramesh Maruthi11y ago
Neat And Clean !!
Santhakumar Munuswamy11y ago
Nice Article. Thanks for sharing

Introduction

Generally we use PartialView when we implement shared component in ASP.NET MVC. For instance, there is a requirement to display top members in couple of pages, in this scenario we need to create a PartialView and use in which page it is required. It helps to create reusable component to reduce code duplicity. PartialView behaves like UserControl in ASP.NET web forms. Examples of using PartialView:

Header/Footer in each page in application.
A calendar widget multiple pages in application.
A social networking component used on multiple pages, such as a Facebook Like button.

Suppose you need to load partially a webpage on demand and that needs to implement only couple of pages. Then how we will achieve this in MVC? So this article helps you to implement the same through sending PartialView using jQuery AJAX concept. Here I am taking an example as to display top members with ID, FirstName, LastName in view.

Here are the steps to implement the same:

Step 1

Add an entity class(Employee.cs) which is Employee Type in Models folder. Here we will define all the properties which are needed in our PartialView. Here's the code:

public class Employee
{
public int EmpID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}

Step 2

Add a user control (DemoPartial.cshtml) in Views/Shared folder. In the following code we are looping over Model and creating HTML table rows to display members.

@model IEnumerable<MvcApplication.Models.Employee>
<table cellpadding="1" cellspacing="1" border="1">
<tr>
<th>ID</th>
<th>Firstname</th>
<th>LastName</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@item.EmpID</td>
<td>@item.FirstName</td>
<td>@item.LastName</td>
</tr>
}
</table>

Step 3

Add action (GetResultByAjax) in Controller (Home) for AJAX request. Here we will create an Employee list and return PartialView(DemoPartial) with Employee list as Model. I added demo employees in code, you can implement your own logic to fetch employees from the database or any other data source. Here's the code:

[HttpPost]
public ActionResult GetResultByAjax()
{
List<Employee> empList = new List<Employee>()
{
new Employee{EmpID = 1, FirstName = "Mahesh", LastName = "Chand"},
new Employee{EmpID = 2, FirstName = "Parveen", LastName = "Kumar"},
new Employee{EmpID = 3, FirstName = "Dinesh", LastName = "Beniwal"},
new Employee{EmpID = 4, FirstName = "Dhananjay", LastName = "Kumar"}
};
return PartialView("DemoPartial", empList);
}

Step 4

Add a View page(Index.cshtml) and add the following code.

Add an HTML div tag where PartialView result will bind and display.

<div id="empList">
</div>

Then add the following javascript code to send AJAX request. Here we will call the action (defined in Step3) and it will return partial view result. Then we will bind it to DOM element.

Also add jQuery reference to send AJAX request and bind result to DIV.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: '/Home/GetResultByAjax',
datatype: "json",
type: "post",
contenttype: 'application/json; charset=utf-8',
async: true,
success: function (data) {
$("#empList").html(data);
},
error: function (xhr) {
alert('error');
}
});
});
</script>

See the following figure 1, we are getting HTML content response from server as result:

Figure 1: Response of AJAX request

Output:

See the following figure 2, how it is displaying employee in View.

Figure 2: Output of PartialView result

Conclusion

In this article we discussed how to send partial view through AJAX request in ASP.NET MVC. It will help you when you want to load a page partially on demand or want to create a reusable component in MVC.

Happy Coding!!