为什么PartialView不能使用Ajax重新加载MVC [英] Why PartialView cannot reload with Ajax in MVC

问题描述

我用一个弹出窗口，以创建一个新的纪录，我呈现视图的窗口内。除了这个，我称之为 partialview 在此视图根据它的组合框的selectedIndex。我可以成功发布的形式向控制器，并返回到视图时出现错误。然而，在返回的形式后，仅视图部分回报，我不能使 partialview 。所以，我怎么能也呈现 partialview 作为最后的状态只是提交表单前？

查看：

 ＆LT;脚本的src =〜/脚本/ jquery.unobtrusive-ajax.min.js＆GT;＆LT; / SCRIPT＆GT;



＆LT; D​​IV ID =目标＆GT;

@using（Ajax.BeginForm（_创建，问题，
        新AjaxOptions
        {
            HttpMethod =POST
            InsertionMode = InsertionMode.Replace，
            UpdateTargetId =目标
        }
        ））
{

    @ Html.AntiForgeryToken（）

    ＆LT; D​​IV CLASS =容器＆GT;

        @ Html.ValidationSummary（真）

        @ Html.LabelFor（M =＆GT; m.ProjectID）
        @（Html.Kendo（）。DropDownList的（））
        // ...一些东西（为清楚起见）

        @ *根据DROPDOWNLIST的selectedIndex渲染Partialview * @
        ＆LT;！ - 地方，你会插入部分 - ＆GT;
        ＆LT; D​​IV ID =partialPlaceHolder的风格=显示：无;＆GT;＆LT; / DIV＆GT;

    ＆LT; / DIV＆GT;

    ＆LT; D​​IV CLASS =模式躯＆GT;
        @（Html.Kendo（）按钮（）
                。名称（btnCancel）
        ）
        @（Html.Kendo（）按钮（）
            。名称（btnSubmit按钮）
        ）
    ＆LT; / DIV＆GT;
}

＆LT; / DIV＆GT;


＆LT;脚本＆GT;

//渲染Partialview根据DROPDOWNLIST的selectedIndex
$（'＃ProjectID'）。改变（函数（）{/ *这是一个变革的事件为你的DropDownList * /

    / *获取DropDownList的选定值* /
    VAR selectedID = $（本）.VAL（）;

    / *请求与不用彷徨请求局部视图。 * /
    $获得（'/发行/ RenderPartialView /+ selectedID，功能（数据）{
        / *数据是从操作方法返回的纯HTML，加载到你的页面* /
        $（'＃partialPlaceHolder'）的HTML（数据）。
    }）;

}）;

＆LT; / SCRIPT＆GT;
 

解决方案

您需要没有在这种情况下的HTML帮助做定制阿贾克斯后。 创建一个正常的形式：

 ＆LT;形式ID =frmEdit级=形与GT;
    @ Html.AntiForgeryToken（）
    ＆LT; D​​IV CLASS =容器＆GT;
        @ Html.ValidationSummary（真）
        // ....休息表单组件
        ＆LT;按钮ID =btnSubmit按钮类型=提交＆GT;提交＆LT; /按钮＆GT;
    ＆LT; / DIV＆GT;
＆LT; /形式GT;
 

和做的jQuery类似像这样的职位

 ＆LT;脚本＆GT;
$（形式）。在（提交，函数（事件）{
    。事件preventDefault（）;
    $。员额（urlPost，$（本）.serialize（））。完成（功能（）{
        //在这里更新您的目标ID并重新获取你的部分观点
    }），失败（函数（）{
        在验证摘要//显示错误
    }）;
}）;
＆LT; / SCRIPT＆GT;
 

希望这样的帮助你解决问题。

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不能使用Ajax重新加载MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！