Ajax.BeginForm淡出不起作用

Question

我有:

@using (Ajax.BeginForm("actionToDo", new AjaxOptions 
{
    HttpMethod = "post",
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "updatediv",
    OnBegin = "$('#updatediv').fadeOut()", 
    OnComplete = "$('#updatediv').hide().fadeIn()"
}))
{
    <div id='updatediv'>
    </div>
}

淡入效果正常,但问题是当我提交Ajax请求时它不会淡出.它会消失,然后淡入新内容.在使用简单警报进行测试之后,似乎"OnBegin" 在旧内容被删除之后才会发生,这与文档相矛盾:"获取或设置在页面更新之前立即调用的javascript函数的名称. "

知道为什么会这样吗？

Answer 1

好吧,问题是,当你打电话给fadeout时,为时已晚.表单提交已经发生,这意味着div已经消失(由于替换方法的性质).请记住,这些事件的发射速度非常快.您需要做的是在提交表单之前强制淡出.有各种解决方案(许多已经在堆栈溢出,包括使用e.preventDefault)但我更喜欢隐藏真正的提交按钮,添加一个假的,并使用它来淡出,然后通过使用触发延迟表单提交一个setTimeout.当替换的div消失时,我还添加了一个外部div以保持固定的屏幕高度.

@using (Ajax.BeginForm("actionToDo", new AjaxOptions 
{
    HttpMethod = "post",
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "updatediv",
    OnComplete = "$('#updatediv').hide().fadeIn()"
}))
{
     <div style="height:20px;">
     <div id='updatediv'>
         text to replace</div>
     </div>
    <input id='realsubmit' style='display:none;' type="submit"  />
    <input id='fakesubmit' type="button" value="submit" onclick ="$('#updatediv').fadeOut('slow'); setTimeout(function () { $('#realsubmit').click(); }, 1000);" />
}