为什么 PartialView 无法在 MVC 中使用 Ajax 重新加载 [英] Why PartialView cannot reload with Ajax in MVC

问题描述

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

查看:

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script><div id="目标">@using (Ajax.BeginForm("_Create", "Issue",新的 Ajax 选项{HttpMethod = "POST",插入模式 = 插入模式.替换，UpdateTargetId = "目标"})){@Html.AntiForgeryToken()<div class="容器">@Html.ValidationSummary(true)@Html.LabelFor(m => m.ProjectID)@(Html.Kendo().DropDownList())//... 一些东西(为了清楚起见删除了)@*根据Dropdownlist的selectedIndex渲染Partialview*@<!-- 插入部分的位置--><div id="partialPlaceHolder" style="display:none;"></div>

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

}

<脚本>//根据Dropdownlist的selectedIndex渲染Partialview$('#ProjectID').change(function () {/* 这是下拉列表的更改事件 *//* 获取下拉列表的选中值 */var selectedID = $(this).val();/* 使用 .get 请求请求局部视图.*/$.get('/Issue/RenderPartialView/' + selectedID, function (data) {/* data是action方法返回的纯html，加载到你的页面*/$('#partialPlaceHolder').html(data);});});

解决方案

在这种情况下，您需要在没有 HTML helper 的情况下执行自定义 ajax post.创建一个范式:

@Html.AntiForgeryToken()<div class="容器">@Html.ValidationSummary(true)//.... 休息表单组件<button id="btnSubmit" type="submit">提交</button>

</表单>

并通过类似这样的jquery发布

希望这个示例可以帮助您解决问题.

I use a popup window to create a new record and I render a view inside the window. In addition to this, I call a partialview in this view according to the selectedindex of a combobox in it. I can successfully post the form to the Controller and return it to the view when there is an error. However, after returning the form, only the view part returns and I cannot render the partialview. So, how can I also render partialview as the last status just before submitting the form?

View:

<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>

解决方案

You need to do custom ajax post without HTML helper in this case. Create a normal form :

<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>

and do post by jquery similar like this

<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>

Hope this sample help you solve the problem.

这篇关于为什么 PartialView 无法在 MVC 中使用 Ajax 重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！