asp.net MVC Core - 使用 Ajax 加载部分视图

Question

在我的 MVC Core 应用程序中，我想在提交表单后加载部分视图。

提交_TransferForm中的表单后，将加载另一个局部视图，而不是刷新整个页面。下面是我的代码。

为什么_ApplySuccess占据了整个页面，而不是在Apply中显示为页面的一部分？

我在分享_Layout中添加了<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">。

父视图 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>   
}

局部视图 _ApplyForm.cshtml:

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

局部视图 _ApplySuccess.cshtml:

<div>Successfully applied.</div>

控制器的动作 Apply :

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

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

Answer 1

您可以使用 bootbox 警报在警报中显示进程已完成并成功应用消息，因为您不会在局部视图中显示任何其他详细信息。

 $(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;
});

你可以参考这个http://bootboxjs.com/link

Answer 2

在我删除条件 if ($theForm.valid()) 后，它起作用了。编译时未以某种方式定义方法 valid()。

asp.net MVC Core - 使用 Ajax 加载部分视图

asp.net MVC Core - load partial view using Ajax

ajax

asp.net-mvc

asp.net-ajax

partial-views

asp.net-core-mvc