ASP.NET: отключение всех элементов управления при использовании обратной передачи с UpdatePanel - похоже на анимацию AJAS? - PullRequest
Новая
       14

ASP.NET: отключение всех элементов управления при использовании обратной передачи с UpdatePanel - похоже на анимацию AJAS?

2 голосов
/ 22 ноября 2010

Я использую UpdatePanel, и мне нужно отображать некоторую анионную анимацию Ajax, пока страница обновляется с помощью UpdatePanel.

Было бы замечательно иметь возможность отключить все элементы управления и отобразить сообщение загрузки ajax..

Я бы хотел поставить Div поверх всего, как наложение.Диалоговое окно Jquery UI делает то же самое.

Кто-нибудь имеет с этим опыт?

Проблема в том, что пользователи щелкают элементы перед возвратом из PostBack (с помощью панели обновления)

заранее спасибо

Ответы [ 3 ]

3 голосов
/ 09 сентября 2011

Я тоже боролся с этой же проблемой, и мне посчастливилось наткнуться на Обзор управления UpdateProgress на MSDN . Пример на этой странице показывает secret javascript для подключения к асинхронным вызовам ajax элемента управления ASP UpdatePanel. С небольшой модификацией я смог заставить подключаемый модуль jQuery BlockUI работать с ASP UpdatePanel.

Вот чем я закончил. Здесь должно быть достаточно, чтобы вы могли делать все, что захотите, когда начинается асинхронный обратный вызов и когда он заканчивается.

HTML 

<asp:UpdateProgress runat="server" id="updateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false" DisplayAfter="0">
    <ProgressTemplate>Processing...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- Some stuff here -->
    </ContentTemplate>
</asp:UpdatePanel>

JAVASCRIPT 

$(document).ready(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    function InitializeRequest(sender, args) {
        // Whatever you want to happen when the async callback starts
        $.blockUI();
    }
    function EndRequest(sender, args) {
        // Whatever you want to happen when async callback ends
        $.unblockUI();
    }
});

Обратите внимание, что я включил элемент управления ASP UpdateProgress, это важно, потому что, если у вас его нет, JavaScript не работает должным образом. Он будет блокировать и разблокировать пользовательский интерфейс, но часть разблокировки не происходит при возврате обратного вызова, это происходит почти сразу после запуска асинхронного вызова.

2 голосов
/ 23 сентября 2012

Мне было достаточно заблокировать сам элемент управления DropDownList вместо всего пользовательского интерфейса и все, что я сделал вместо использования плагина jquery.blockUI() Я просто добавил одну строку, и она прекрасно работала для меня

Вот что я добавил: 

$('#DD_selectPassportType').attr('disabled', 'disabled');

@ Запрос инициализации 

function InitializeRequest(sender, args) {

    // Whatever you want to happen when the async callback starts
    $('#DropDownList_ID').attr('disabled', 'disabled');
}
function EndRequest(sender, args) {
    // Whatever you want to happen when async callback ends
    nothing I did in here
}
0 голосов
/ 22 ноября 2010

Вы можете использовать Обновление контроля прогресса набора инструментов управления ajax. когда страница ссылается на панель обновления, то будет показано изображение ниже, и пользователь не сможет щелкнуть элементы страницы. 

<ajax:UpdateProgress AssociatedUpdatePanelID="UpdatePanel3" ID="updateProgress3"                 runat="server">
<ProgressTemplate>
 <div>
  <img alt="Loading" src="images/Adding.gif" />
 </div>
</ProgressTemplate>
</ajax:UpdateProgress>

Здесь UpdatePanel3 является идентификатором вашей панели обновления.

Вы также можете добавить AlwaysVisibleControlExtender из набора инструментов ajaxcontrol. 

<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server"
                TargetControlID="updateProgress3" VerticalSide="Middle" HorizontalSide="Center"
                VerticalOffset="10" HorizontalOffset="10" ScrollEffectDuration=".1">
            </cc1:AlwaysVisibleControlExtender>

Здесь cc1 - префикс тега dll набора инструментов управления ajax.

...