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 Dodajemu
UpdatePanel a w nim przycisk.Na samym końcu dodajemy UpdateProgress/
1: <form id="form1" runat="server">
2: <asp:ScriptManager ID="ScriptManager1" runat="server" />
3: <div>
4: <asp:UpdatePanel ID="UpdatePanel1" runat="server">
5: <ContentTemplate>
6: <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
7: </ContentTemplate>
8: </asp:UpdatePanel>
9: <asp:UpdateProgress ID="UpdateProgress1" runat="server">
10: <ProgressTemplate>
11: <h1>Proszę czekać...</h1>
12: </ProgressTemplate>
13:
14: </asp:UpdateProgress>
15: </div>
16: </form>
Oczywiście do przycisku dodajemy akcje Click
1: protected void Button1_Click(object sender, EventArgs e)
2: {
3: System.Threading.Thread.Sleep(4000);
4: }
W UpdateProgress Wprowadzamy zmiany
1: <asp:UpdateProgress ID="UpdateProgress1" runat="server">
2: <ProgressTemplate>
3: <div id="blur"> </div>
4: <div id="progress">
5: <h1>Proszę czekać...</h1>
6: </div>
7: </ProgressTemplate>
8: </asp:UpdateProgress>
Teraz musimy do naszej strony dodać plik css z naszymi stylami.
1: #blur
2: {
3: width: 100%;
4: background-color: black;
5: moz-opacity: 0.5;
6: khtml-opacity: .5;
7: opacity: .5;
8: filter: alpha(opacity=50);
9: z-index: 120;
10: height: 100%;
11: position: absolute;
12: top: 0;
13: left: 0;
14: }
15: #progress
16: {
17: z-index: 200;
18: background-color: White;
19: position: absolute;
20: top: 0pt;
21: left: 0pt;
22: border: solid 1px black;
23: padding: 5px 5px 5px 5px;
24: text-align: center;
25: }
A teraz nasza wstawka w JavaScript:
1: <asp:ScriptManager ID="ScriptManager1" runat="server" />
2: <script language="javascript" type="text/javascript">
3: <!--
4: Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(
5: function () {
6: if (document.getElementById) {
7: var progress = document.getElementById('progress');
8: var blur = document.getElementById('blur');
9:
10: progress.style.width = '300px';
11: progress.style.height = '30px';
12:
13: blur.style.height = document.documentElement.clientHeight;
14: progress.style.top = document.documentElement.clientHeight/3 - progress.style.height.replace('px','')/2 + 'px';
15: progress.style.left = document.body.offsetWidth/2 - progress.style.width.replace('px','')/2 + 'px';
16: }
17: }
18: )
19: // -->
20: </script>
WatiN jest to biblioteką dzięki której będziesz mógł przetestować swoja aplikację pod kątem wyniku jaki zostanie uzyskany przy wyświetlaniu strony. Sprawdzisz czy wynik jaki uzyskałeś jest tym co miałeś zamiar uzyskać.
A teraz króciutki przykład. Tworzymy bibliotekę, projekt dla NUnit.
1: using System.Threading;
2: using WatiN.Core;
3: using WatiN.Core.Exceptions;
4: using NUnit.Framework;
5:
6:
7: namespace itblogs.pl
8: {
9: [TestFixture, Description("Watin class Test")]
10: public class TestWatin
11: {
12: [TestFixtureSetUp]
13: public void Init()
14: {
15: System.Threading.Thread.CurrentThread.SetApartmentState(ApartmentState.STA);
16: }
17:
18: [Test]
19: public void WatinIE()
20: {
21: using (IE ie = new IE("http://www.google.pl"))
22: {
23: ie.TextField(Find.ByName("q")).TypeText("itblogs");
24: //ie.Button(Find.ByValue("Szukaj w Google")).Click();
25: ie.Button(Find.ByName("btnG")).Click();
26: int i = 3;
27: do
28: {
29: try
30: {
31: ie.Link(Find.ByUrl("http://itblogs.pl/blogs/")).Click();
32: }
33: catch (ElementNotFoundException exp)
34: {
35: ie.Link(Find.ByText("Następna")).Click();
36: i = 0;
37: }
38:
39: }
40: while ((--i) > 0);
41: Assert.IsTrue(i < 0);
42: }
43: }
44: }
45: }
Ponieważ aplikacja musi być uruchomiona w trybie STA nie wystarczy tylko inicjalizacja podczas początku testu. Musimy dodać plik z rozszerzeniem config którego nazwa jest taka jak nazwa pliku dll i jest w tym samym folderze co tenże plik. Np: mojtest.dll, nazwa pliku config to mojtest.dll.config.
Więcej informacji na ten temat możesz uzyskać na stronie Nunit oraz na stronie projektu WatiN.
1: <?xml version="1.0" encoding="utf-8" ?>
2: <configuration>
3: <configSections>
4: <sectionGroup name="NUnit">
5: <section name="TestRunner" type="System.Configuration.NameValueSectionHandler"/>
6: </sectionGroup>
7: </configSections>
8: <NUnit>
9: <TestRunner>
10: <!-- Valid values are STA,MTA. Others ignored. -->
11: <add key="ApartmentState" value="STA" />
12: </TestRunner>
13: </NUnit>
14: </configuration>
Może napisany przykład nie działa zachwycająco szybko ale nie to jest celem. Projekt jest nadal rozwijany i warto obserwowac jego postępy. Dzięki niemu można też testować aplikacje przy użyciu FireFox wszystkie dostepne narzędzia są w paczce którą ściągamy.