UpdateProgress – blokada kontrolek w przeglądarce

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">&nbsp;</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>

Leave a Reply

Your email address will not be published.