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);" /> 
}