asp.net mvc4 ajax partial,asp.net MVC Core - load partial view using Ajax

In my MVC Core application, I want to load a partial view after the form is submitted.

After the form in _TransferForm is submitted, another partial view will be loaded instead of refreshing the entire page. Below are my code.

Why _ApplySuccess occupies the entire page, instead of displaying as a part of the page in Apply?

I have added

The parent View Apply.cshtml:

@Html.Partial("_ApplyForm")

@section Scripts {

// delegate submit event to document, since form might be replaced

$(document).on('submit', '#applyForm', function () {

var $theForm = $(this);

// manually trigger validation

if ($theForm.valid()) {

$('#progress').show();

$.post('', $theForm.serialize())

.done(function (response) {

$theForm.replaceWith(response);

})

}

return false;

});

}

The partial view _ApplyForm.cshtml:

// content

The partial view _ApplySuccess.cshtml:

Successfully applied.

The controller's action Apply :

public async Task Apply(Applicant applicant)

{

if (ModelState.IsValid)

{

// code

return PartialView("_ApplySuccess");

}

return PartialView("_ApplyForm");

}