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:
The controller's action Apply :
public async Task Apply(Applicant applicant)
{
if (ModelState.IsValid)
{
// code
return PartialView("_ApplySuccess");
}
return PartialView("_ApplyForm");
}