Pisząc aplikację WEB zdarza ci się konieczność blokowania możliwości naciśnięcia jakiegoś przycisku w chwili kiedy wykonuje sie inna akcja która trwa stosunkowo długo. Zapewne nie raz się zastanawiałeś jak to zrobić może już nawet wykonywałeś takie skrypty w JavaScript i JQuery. Ale czy widziałeś kiedyś jak można to wykonać w ASP .NET z kontrolką UpdateProgress i dosłownie kilkoma linijkami w JavaScript. Zapraszam.
Zakładam że osoba ma Visual Studio 2008 i może utworzyć nową aplikacje która ma już ScriptMenager na swoim pokładzie, czyli New->Projekt->AJAXEnabledWebApplication Dodajemy UpdatePanel a w nim przycisk.Na samym końcu dodajemy UpdateProgress/
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <h1>Proszę czekać...</h1> </ProgressTemplate> </asp:UpdateProgress> </div> </form>
Oczywiście do przycisku dodajemy akcje Click
protected void Button1_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(4000); }
W UpdateProgress Wprowadzamy zmiany
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div id="blur"> </div> <div id="progress"> <h1>Proszę czekać...</h1> </div> </ProgressTemplate> </asp:UpdateProgress>
Teraz musimy do naszej strony dodać plik css z naszymi stylami.
#blur { width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5; opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute; top: 0; left: 0; } #progress { z-index: 200; background-color: White; position: absolute; top: 0pt; left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center; }
A teraz nasza wstawka w JavaScript:
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <script language="javascript" type="text/javascript"> <!-- Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest( function () { if (document.getElementById) { var progress = document.getElementById('progress'); var blur = document.getElementById('blur'); progress.style.width = '300px'; progress.style.height = '30px'; blur.style.height = document.documentElement.clientHeight; progress.style.top = document.documentElement.clientHeight/3 - progress.style.height.replace('px','')/2 + 'px'; progress.style.left = document.body.offsetWidth/2 - progress.style.width.replace('px','')/2 + 'px'; } } ) // --> </script>