Unable to load Partial View via JQuery ActionResult call in ASP.NET Core

Question

I am stuck in this problem for hours if not days.

I can start the ActionResult that returns PartialView("MODEL") but I am unable to render actual View into the div inside an Index cshtml page.

Here is what I am trying:

Controller:

...
public ActionResult Calendar()
    {
        PopulateCalendarAsync();
        return PartialView(_calendarViewModel);
    }
...

Index.cshtml :

<div id="calendarDiv" ></div>

script inside Index:

<script type="text/javascript">
$(document).ready(function (e) {
    $.get('@Url.Action("Calendar","Home")', {}, function (result) {
        $("#calendarDiv").load("~/Home/Calendar");

    });
});

When Index page loads, script calls the ActionResult Calendar() with no problems.

The problem is that div is not being updated.

my Calendar.cshtml page is aside Index page in Home folder.

What am I missing here?

Answer 1

The result parameter of the $.get request will contain the html output of the calendar partial view.
Assign it to the <div> via $("#calendarDiv").html(result);

Full code:

$(document).ready(function (e) {
    $.get('@Url.Action("Calendar","Home")')
        .then(function (result) {
             $("#calendarDiv").html(result);
         })
        .fail(function (xhqr, status, error) {
            alert(status);
            alert(JSON.stringify(xhqr));
        })
});