C# - Aktuális kurzorpozíció megőrzése ASP.NET oldalainkon

forráskód letöltése
A szerver-oldali kontrolok nagyszerű újításokat hoztak a fejlesztésben, a legváltozatosabb eseményeikkel képesek egy kérést eljuttatni a szerver felé. Az adatok visszaküldésekor azonban a küldés előtti scroll-pozíciók elvesznek, és az aktuális pozíció az oldal teteje lesz. Ez különösen nagy adathalmazokat megjelenítő lapokon lehet kényelmetlen, ahol az adatokat keresgélni kell egy táblázatban. Cikkünkben néhány egyszerű kóddal segítünk ezen a problémán.
Mellékelt példa megnyitása előtt szükséges egy KeepingCursorPosition nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A megoldásban egy scrollTop nevű dinamikus JavaScript property-t használunk fel, mely megadja az adott objektum felső pontjának (Top property) aktuális értéke és az oldalon egyébként elfoglalt helye esetén meghatározható legfelső pontjának értéke közti különbséget pixelben. A property értéke írható és olvasható. Az adott kontrolra (objektumra) a következőképpen hívható: object.scrollTop.
A megoldásban az oldal Body elemének aktuális pozícióját fogjuk kiolvasni akkor, amikor az oldal letöltődik a kliens böngészőjére. Az oldal szerverre küldésében a táblázat soraiban található gombok segítenek, melyeket megnyomva egy kis üzenetablakban megjelenik az oldal aktuális scroll-pozíciója. Ez az oldal töltődésekor nulla.
A megoldás két részből áll: először deklarálni kell egy HTML hidden elemet a lap Form elemén belül, amely hordozni fogja az adott kurzorpozíciót a Form elküldésekor (submit). A hidden mező neve __SROLLPOS lesz:
<input style="Z-INDEX: 104; LEFT: 286px; POSITION: absolute; TOP: 18px" type="hidden" name="__SCROLLPOS">
A Form submit eseményének kezelésére írunk egy JavaScript kezelőfüggvényt, melyet megadunk a Form-unk onsubmit attribútumában. A kód értéket ad a scrollTop property segítségével a hidden mezőnek, így az információ eljuthat a szerverre. Az érték a <body> aktuális pozíciója lesz:
<form id="WebForm1" onsubmit="javascript:return onSubmitForm ();" method="post" runat="server">
...
<script language="javascript">
  function onSubmitForm ()
  {
    WebForm1.__SCROLLPOS.value = myBody.scrollTop;
    return true;
  }
</script>
Megfigyelhetjük az oldal szerkesztési időben is megtekinthető HTML forrásában, hogy nincs nyitó <body> tag deklarálva. Ez lesz a megoldás kulcsa, hiszen ezt egy ASP kód fogja oldalunkra írni attól függően, hogy tartalmaz-e értéket a hidden mező, vagy sem, vagyis az oldal most töltődik először, vagy egy POSTBACK eredménye. A következőt írja, mikor van értéke a hidden mező value attribútumának:
<%
  if (Request["__SCROLLPOS"] != null && Request["__SCROLLPOS"] != String.Empty)
  {
    int pos = Convert.ToInt32 (Request["__SCROLLPOS"]);
    Response.Write ("<body id=\"myBody\" " + "onload=\"javascript:myBody.scrollTop=" + pos + ";window.alert('Aktuális pozíció: " + pos + "')\">");
  }
És a következőt, amikor nincs __SCROLLPOS érték:
else
  {
    int pos1 = Convert.ToInt32 (Request["__SCROLLPOS"]);
    Response.Write ("<body id=\"myBody\" MS_POSITIONING=\"GridLayout\" " + "onload=\"window.alert('Aktuális pozíció: " + pos1 + "')\">");
  }
%>
A dinamikusan létrehozott <body> elemmel olvassuk, vagy hagyjuk figyelmen kívül az adott információhordozó mező értékét. A fenti megoldás megkönnyíti a felhasználók táblázatokkal való munkáját, de alkalmazható hosszú űrlapok esetén is.