Визуальная обратная связь для обновления данных в ASP.NET AJAX

Question

Я нахожусь в процессе разработки проекта, который использует ASP.NET/C#. Я часто использую AJAX на страницах, чтобы облегчить ввод и обновление данных. Одна небольшая визуальная проблема заключается в том, что из-за того, что страницы не публикуются при изменении данных, пользователь ничего не видит. Есть ли в ASP.NET AJAX простой способ предоставить пользователю обратную связь, чтобы показать, что данные были сохранены? то есть поле, которое появляется на секунду или две, а затем исчезает.

Или, может быть, общий вопрос о том, как вы, ребята, обращаетесь, чтобы пользователь знал, что его изменения были сохранены?

Answer 1

Если вы используете Asp.net AJAX, вы можете использовать обработчик ScriptManager beginRequest для отображения визуальной обратной связи (например, загрузки изображения). Пример этого можно найти здесь .

Если вы используете jQuery AJAX, вы можете использовать функции ajaxStart() и ajaxStop(), чтобы отображать и скрывать визуальный интерфейс обратной связи.

Answer 2

Существуют различные подходы к функции «пожалуйста, подождите» на веб-странице.То, что вы в конечном итоге делаете, зависит от конкретного пользовательского интерфейса и от того, должен ли он «выглядеть» как постбэк, просто иметь небольшую вращающуюся анимацию рядом с данным элементом и т. Д. Некоторые соответствующие ссылки:

• Как создать анимацию «Пожалуйста, подождите, идет загрузка ...» с помощью jQuery?
• Как показать загрузочный счетчик в jQuery?
• Хочу показать "загрузка ....." на странице PHP

Обратите внимание, что эти ссылки в меньшей степени ориентированы на подключаемые элементы управления виджетов Microsoft и больше на простой старый jQuery (или даже простой старыйJavaScript без библиотеки jQuery) для клиентского кода.На мой взгляд, это более слабая связь, на мой взгляд.

Answer 3

Важно предоставлять своим пользователям обратную связь при ожидании выполнения запросов AJAX с точки зрения удобства использования, а также потому, что это мешает им делать такие вещи, как повторное нажатие кнопки отправки, поскольку они думают, что ничего не происходит.

То, как вы это делаете, зависит от вашей реализации, но обычно вы можете делать такие вещи, как отображать анимированный GIF в начале вашего вызова ajax (который вы можете сгенерировать на http://ajaxload.info/), а затем снова скрывать его в onSuccess () метод. При использовании jQuery что-то вроде

<div id="progress" style="display: none;"><img src="ajax-loading.gif"/></div>

$('#button').click(function(){
    $('#progress').show();
    // ajax call
});

function onSuccess() {
    $('#progress').hide();
}

Это в равной степени относится к использованию чего-то вроде службы WCF с поддержкой AJAX. Вы также можете использовать следующее при работе с UpdatePanels

<asp:UpdatePanelAnimationExtender ID="uppEx"
    runat="server"
    BehaviorID="animation" 
    TargetControlID="upResults">
    <Animations>
        <OnUpdating>
            <Parallel duration="0">
                <ScriptAction Script="onUpdating();" />
                <EnableAction AnimationTarget="btnSearch" Enabled="false" />
                <FadeOut minimumOpacity=".2" />
            </Parallel>
        </OnUpdating>
        <OnUpdated>
            <Parallel duration="0">
                <ScriptAction Script="onUpdated();" />
                <EnableAction AnimationTarget="btnSearch" Enabled="true" />
                <FadeIn minimumOpacity=".2" />
            </Parallel>
        </OnUpdated>
    </Animations>
</asp:UpdatePanelAnimationExtender>