Blokkolás aszinkron postback idejére

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.

Technorati-címkék: ,,,

Advertisements

One thought on “Blokkolás aszinkron postback idejére

  1. Pingback: Ajaxos fájl feltöltés | Balássy György szakmai blogja

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s