Load Partial Views using Ajax in ASP.NET Core MVC and Razor Pages

In the previous article we discussed how to use partial views in ASP.NET Core MVC and Razor Pages. Although many a times you would place a partial view on a page at development time, it is also possible to load a partial view programmatically through Ajax. To that end this article shows how that can be done.

Loading partial view using Ajax in MVC

In order to load a partial view we will use jQuery Ajax. So, make sure jQuery library files are added to your wwwroot folder. Let's do the ASP.NET Core MVC example first. Have a look at the following HTML markup housed inside the main view (Index.cshtml).

<button type="button" id="button1">Load Partial View</button>

<div id="div1"></div>

The above markup consists of a <button> with id of button1. Note that the button is not a submit button because we want to handle its click event using jQuery. Clicking on this button loads the _CountriesPartial partial view in the <div> element placed below it. The following figure shows a sample run of this example: 

The jQuery code that handles the click event of the Load Partial View button is shown below:

<script>
    $(document).ready(function () {

        $("#button1").click(function () {
            $("#div1").load("/Home/GetPartial");
        });

    });
</script>

As you can see the jQuery load() method is used to make an Ajax call to an action of HomeController named GetPartial(). The response returned from GetPartial() is added to the <div> element on which the load() is being called.

The GetPartial() action of the HomeController is shown below:

public IActionResult GetPartial()
{
    List<string> countries = new List<string>();
    countries.Add("USA");
    countries.Add("UK");
    countries.Add("India");

    return PartialView("_CountriesPartial",countries);
}

The GetPartial() action create a List of countries. It then calls the PartialView() method to return the partial view to the client. The first parameter of PartialView() is the name of the partial view and the second parameter is the model object to be passed to the partial view.

 The _CountriesPartial partial view then renders the countries as follows:

@model List<string>

@foreach (var item in Model)
{
    <h2>@item</h2>
}

Loading partial view using Ajax in Razor Pages

In razor pages the process of loading a partial view through Ajax is slightly different. Have a look at the following code housed inside the Index.cshtml razor page.

<script>
    $(document).ready(function () {

        $("#button1").click(function () {
            $("#div1").load("/Index?handler=Partial");
        });

    });
</script>

<button type="button" id="button1">Load Partial View</button>

<div id="div1"></div>

Notice the code marked in bold letters. The load() method points to the Index.cshtml razor page and has handler query string parameter set to Partial. This way you instruct the framework that OnGetPartial() handler residing inside the Index page model is to be invoked when the button is clicked.

The OnGetPartial() handler is shown below:

public IActionResult OnGetPartial()
{
    List<string> countries = new List<string>();
    countries.Add("USA");
    countries.Add("UK");
    countries.Add("India");

    return new PartialViewResult
    {
        ViewName = "_CountriesPartial",
        ViewData = new ViewDataDictionary
<List<string>>(ViewData, countries)
    };
}

The OnGetPartial() handler returns IActionResult. Inside, you create a List of countries as before. Then you create a new object of type PartialViewResult and pass view name and a ViewDataDictionary wrapping the countries List.

The _CountriesPartial residing in the Pages/Shared folder can output the values as shown below:

@model List<string>

@foreach (var item in Model)
{
    <h2>@item</h2>
}

There is one more way to return partial views from a page handler. You can use Partial() method of razor pages to return a partial view.  

That's it for now! Keep coding!!