Sending PartialView Through jQuery Ajax Request In ASP.NET MVC

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: 

1. Header/Footer in each page in application.
2. A calendar widget multiple pages in application.
3. 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!!