为什么 PartialView 无法在 MVC 中使用 Ajax 重新加载

Question

我使用弹出窗口 window 创建新记录，并在 window 中呈现 view。除此之外，我根据其中的一个组合框的selectedindex在这个视图中调用了一个partialview。当出现错误时，我可以成功地将表单 post 发送到控制器并 return 发送到视图。但是，在 return 表单之后，只有 view 部分 returns 而我无法呈现 partialview。那么，我怎样才能在提交表单之前将 partialview 呈现为最后一个状态？

查看：

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>



<div id="target">

@using (Ajax.BeginForm("_Create", "Issue",
        new AjaxOptions
        {
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "target"
        }
        ))
{

    @Html.AntiForgeryToken()

    <div class="container">

        @Html.ValidationSummary(true)

        @Html.LabelFor(m => m.ProjectID)
        @(Html.Kendo().DropDownList())
        //... some stuff (removed for clarity)

        @*Render Partialview according to Dropdownlist's selectedIndex*@
        <!-- Place where you will insert your partial -->
        <div id="partialPlaceHolder" style="display:none;"></div>

    </div>

    <div class="modal-footer">
        @(Html.Kendo().Button()
                .Name("btnCancel")
        )
        @(Html.Kendo().Button()
            .Name("btnSubmit")
        )
    </div>
}

</div>


<script>

//Render Partialview according to Dropdownlist's selectedIndex
$('#ProjectID').change(function () { /* This is change event for your dropdownlist */

    /* Get the selected value of dropdownlist */
    var selectedID = $(this).val();

    /* Request the partial view with .get request. */
    $.get('/Issue/RenderPartialView/' + selectedID, function (data) {
        /* data is the pure html returned from action method, load it to your page */
        $('#partialPlaceHolder').html(data);            
    });

});

</script>

Answer 1

在这种情况下，您需要在没有 HTML 助手的情况下自定义 ajax post。创建一个普通表格：

<form id="frmEdit" class="form">
    @Html.AntiForgeryToken()
    <div class="container">
        @Html.ValidationSummary(true)
        //.... rest form component
        <button id="btnSubmit" type="submit">Submit</button>
    </div>
</form>

并通过 jquery 做 post 类似这样

<script>
$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    $.post(urlPost, $(this).serialize()).done(function(){
        // update your target id here and re-fetch your partial view
    }).fail(function() {
        // show error in validation summary
    });
});
</script>

希望这个示例能帮助您解决问题。

为什么 PartialView 无法在 MVC 中使用 Ajax 重新加载

Why PartialView cannot reload with Ajax in MVC

ajax

asp.net-mvc

asp.net-ajax

ajax.beginform

asp.net-mvc-partialview