ASP.NET: Deaktivierung aller Steuerelemente bei Verwendung von Postback mit UpdatePanel - ähnlich AJAS-Animation?

Question

Ich verwende das UpdatePanel und muss eine Art von AjaxAnination anzeigen, während die Seite mit dem UpdatePanel aktualisiert wird.

wäre toll Was ist in der Lage sein, alle Steuerelemente zu deaktivieren und eine Ajax-Lademeldung angezeigt ..

Ich würde ein Div über die Oberseite der alles zu setzen lieben - wie ein Overlay. Jquery UI-Dialogfeld verhält sich ziemlich ähnlich.

Hat jemand Erfahrung damit?

Problem ist, dass die Nutzer Elemente klicken, bevor sie von einem Postback Rückkehr (mit dem Update-Panel)

Dank im Voraus

Answer 1

Sie können Update Fortschritt Kontrolle Kit AJAX Control-Tool verwenden. Wenn die Seite mit dem Update-Panel verknüpft ist, wird das Bild unten angezeigt und der Benutzer kann nicht auf Seitenelemente klicken.

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

Hier UpdatePanel3 ist ID Ihres Update-Panel.

Sie können auch AlwaysVisibleControlExtender von ajaxcontrol tool kit hinzufügen.

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

Hier cc1 ist Tagpräfix von AJAX Control Toolkit dll.

Answer 2

Ich hatte auch mit dem gleichen Problem zu kämpfen und hatte das Glück, über die UpdateProgress Control Overview on MSDN stolpern. Ein Beispiel auf dieser Seite zeigt secret Javascript zum Einbinden in die asynchronen Ajaxaufrufe des ASP UpdatePanel-Steuerelements. Mit ein wenig Modifikation konnte ich die jQuery BlockUI plugin mit einem ASP UpdatePanel arbeiten.

Hier ist, was ich endete. Es sollte hier genug sein, damit Sie alles tun können, was Sie möchten, wenn der asynchrone Rückruf beginnt und wenn er endet.

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(); 
    } 
}); 

Beachten Sie, dass ich eine ASP-Update Kontrolle eingeschlossen, das ist wichtig, denn wenn Sie das nicht haben, wird die Javascript nicht richtig funktionieren. Es blockiert und entsperrt die Benutzeroberfläche, aber der Blockierungsteil wird nicht ausgeführt, wenn der Rückruf zurückkehrt. Dies geschieht fast unmittelbar nachdem der Async-Aufruf gestartet wurde.

Answer 3

Es war ausreichend für mich, die Kontrolle selbst DropDownList statt die gesamte Benutzeroberfläche zu blockieren und alles, was ich tat, anstatt jquery.blockUI() Plugin verwenden Habe ich nur eine Zeile und es funktionierte gut für mich

Hier ist, was ich tat hinzufügen:

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

@ the InitializationRequest

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 
}