asp.net MVC Core - load partial view using Ajax

Question

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 <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"> in the shared _Layout.

The parent View Apply.cshtml:

@Html.Partial("_ApplyForm")

@section Scripts {
  <script>
    // 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;
    });
  </script>   
}

The partial view _ApplyForm.cshtml:

<form id="applyForm" asp-action="Apply" asp-controller="Jobs">
// content
</form>

The partial view _ApplySuccess.cshtml:

<div>Successfully applied.</div>

The controller's action Apply :

    public async Task<IActionResult> Apply(Applicant applicant)
    {
        if (ModelState.IsValid)
        {
            // code

            return PartialView("_ApplySuccess");
        }
        return PartialView("_ApplyForm");
    }

Answer 1

After I removed the condition if ($theForm.valid()), it works. The method valid() is not defined somehow while compiling.

Answer 2

You can use bootbox alert to show that process completed and successfully applied message in alert because you don't show any other details in partial view.

 $(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);
            })
   bootbox.alert({
title: '<h4 style="color:white">Alert</h4>',
message: '<p  style="font-weight:700;">successfully applied</p>'
});

    }
    return false;
});

you can get reference by refer this http://bootboxjs.com/ link