Question

当用户点击链接并淡入新获取的局部视图时，我试图从局部视图中淡出包含html的div。我遇到的问题是，有时我的视图是在原始局部视图的淡出完成之前获取的，所以我最终看到部分视图切换出来，淡出，然后再次淡入。有没有办法延迟ajax请求，直到淡出完成？

这是我想要实现的操作顺序用户点击链接＆gt;部分视图淡出＆gt;通过ajax获取新的局部视图＆gt;部分视图B淡入。

这是有时发生的事情

用户点击链接＆gt;局部视图A开始淡出但部分视图B在完成淡入淡出之前进入＆gt;局部视图B淡出＆gt;局部视图B再次消失。

@Ajax.ActionLink("Me", "ManageUserAccount", null, new AjaxOptions
                                   {
                                       HttpMethod = "GET",
                                       UpdateTargetId = "ajax-update",
                                       InsertionMode = InsertionMode.Replace,
                                       OnBegin = "ajaxBegin",
                                       OnSuccess = "ajaxSuccess"
                                   }, new { @class = "active" })    


 @Ajax.ActionLink("Alerts", "ManageAlerts", null, new AjaxOptions
                               {
                                   HttpMethod = "GET",
                                   UpdateTargetId = "ajax-update",
                                   InsertionMode = InsertionMode.Replace,
                                   OnBegin = "ajaxBegin",
                                   OnSuccess = "ajaxSuccess"
                               }, new { @class = "active" })



<div id="ajax-update">
            @Html.Action("ManageUserAccount")
        </div>  


<script type="text/javascript">
    function ajaxSuccess() {
        $('#ajax-update').fadeIn();
        //sometimes the new partial view is returned before this even finishes its job
    }
    function ajaxBegin() {
        $('#ajax-update').fadeOut();
    }

Answer 1

我做了一个非常相似的功能...但我使用get，done和effect。并且工作！我用来制作一个没有回发的复杂网站，更改部分是在菜单中模拟更改页面

$(".menu-button").click(function (e) {
    var id = e.target.id;
    var urlID = document.URL.split('#')[1];
    if (id != urlID) {
        location.hash = id;
        changepartial(id);
    }
 });

    function changepartial(id)
    {
         var path = "../home/"+id;
         getOut();
         $.get(path).done(function (result) { 
  //done is for wait get result after make the next step.

            $("#Contenant").html(result);
            getIn();
         });
    }

    function getOut() {
        $("#Contenant").effect('drop', { direction: 'left' }, 100);
    }

    function getIn() {
        $("#Contenant").effect('slide', { direction: 'right' }, 1000);
    }

延迟ajax OnBegin直到fadeOut的DOM - MVC5

1 个答案: