Ajax.BeginForm淡出不起作用

Ajax.BeginForm fade out not working

本文关键字：不起作用 淡出 BeginForm Ajax      更新时间：2023-09-26

我有：

@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函数的名称。"

知道为什么会发生这种事吗？

好吧，问题是当你调用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);" />
}
相关文章：