Beismerem, már a cím is elég visszás, hiszen az aszinkron postback, az Ajax egyik eredeti célja az volt, hogy a felhasználó kényelme érdekében a postback művelet a háttérben történjen, és ne blokkolja a felhasználói felületet. Ennek ellenére sajnos időnként mégis szükség van arra, hogy az Ajaxos hívás idejére letiltsunk bizonyos vezérlőket, vagy legalábbis a képernyő egyes részeit.
Ehhez nagyon hasznos segítség lehet a jQuery, amit biztosan nem kell bemutatni. Legjobban azt szeretem benne, hogy végtelen mennyiségű plugin érhető el hozzá, (bár egyben ez a hátránya is, gyakran a megfelelő plugin kiválasztása tovább tart, mint utána a beépítése az alkalmazásba), melyek közül a fenti feladatra nekem legjobban a jQuery BlockUI plugin vált be. A letölthető JavaScript fájl mindössze 16KB, de ha vesszük magunknak a fáradtságot és minimalizáljuk, akkor mindössze 7.59 KB-ot foglal, amit még a webszerver tovább tömöríthet, így a kliensnek máris csak 3.6KB-ot kell letölteni.
Ezt a plugint felhasználva a teljes ablakunk (amit itt a példában egy id=”main” attribútummal ellátott div valósít meg) blokkolása egy üzenettel, mellette egy forgó képpel, félig átlátszó szürke átfedéssel (overlay) és egy fehér, keretezett ablakkal középen mindössze ennyi:
$("#main").block({ message: ' <img src="progress.gif" /> Feldolgozás folyamatban...', css: { border: '1px solid black', width: '200px', padding: '20px',
color: 'black', 'background-color': 'white' }, overlayCSS: { backgroundColor: '#f2f5f8', opacity: 0.9 } });
A blokkoló üzenet eltűntetése még egyszerűbb:
$("#main").unblock();
Már csak arra van szükségünk, hogy ezeket a kódokat aszinkron postback esetén hívjuk meg. Szerencsére az ASP.NET Ajax Library PageRequestManager kliens oldali “osztálya” biztosít beginRequest és endRequest eseményeket, melyekre feliratkozhatunk:
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (sender, args) { // Blokkolás itt }); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) { // Blokkolás feloldása itt });
Ennyi az egész, a kód mehet rögtön a master page tetejére a ScriptManager után, és máris minden oldalon meg fogjuk kapni a Feldolgozás folyamatban… üzenetet aszinkron művelet esetén.