C# - Folyamatos vásárlói tájékoztató weblapokon

forráskód letöltése
Bizonyára mindannyian találkoztunk már azzal az esettel, amikor egy weblapon történő rendelés aktuális adatait (egységár, rendelt mennyiség, fizetendő összeg, stb.) az adott oldal egy bizonyos részén összegyűjtve találjuk csak meg, és ellenőrzéséhez mindenképpen a képernyőtartalom görgetésére van szükség. Cikkünkben bemutatunk egy lehetséges megoldást, mely kiküszöböli ezt az apró hiányosságot, és amellyel folyamatosan közölhetünk ilyen információkat a látogatóval.
Mellékelt példa megnyitása előtt szükséges egy StateViewer 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 mellékelt példában egy olyan vásárló tájékoztató funkciót valósítunk meg, mely megoldás lehet a fenti problémákra. A példában egy olyan megrendelő rendszert modellezünk, ahol egy bizonyos termékből (például egy előfizetésből) 12 időegység példányait lehet megrendelni, és – ahogy a felületen elhelyezett táblázatból kiderül – mennyiségtől függően változik az egységár, és így a fizetendő végösszeg is. Minden egyes időegységet a kijelölendő CheckBox kontrolok jelentenek.
Amikor a látogató jelölgeti az egyes időintervallumok kontroljait, akkor valószínűleg folyamatosan szeretné látni, hogy éppen mennyi az adott mennyiségi egységár, illetve hogy ezért majd mennyit kell fizetnie. Ha az ilyen információkat a szerver oldali alkalmazással szeretnénk kiszámíttatni, akkor ennek időköltsége túl magas, mivel a kérést el kell juttatni a szerverhez, majd a választ meg kell várni. Ez még egy kvázi gyors kapcsolattal is fölös időkidobás. Ehelyett kliens oldalon kell lekezelni a kérést.
Másik probléma, hogy a tájékoztató információ halmazt az oldal egy szegmensében kell elhelyezni úgy, hogy a megrendelő felületet ne foglalja el. Sok vezérlőt tartalmazó oldal esetén ez azt jelenti, hogy a rendelés helyéről mindig el kell görgetnünk az oldalt, majd a folytatáshoz ismét vissza kell térnünk. Ez is igen fárasztó lehet.
A megoldás lényege abban rejtőzik, hogy egy kliens oldali JavaScript kóddal folyamatosan végigpásztázzuk a weboldalon elhelyezett kontrolokat, és megvizsgáljuk állapotukat, majd kalkuláljuk a megfelelő árinformációkat a darabszám függvényében. A megjelenítéshez egy DIV HTML vezérlőt, valamint a rajta elhelyezett címkéket használjuk, melyek folyamatosan követik az egér mozgását, így mindig az éppen figyelt területen jelennek meg, az aktuális információt tartalmazva.
A példában négy adatot jelenítünk meg a felbukkanó kis ablakban. Közöljük a kijelölt darabszámot, a darabszámtól függő egységárat, a kalkulált nettó, és bruttó árakat.
A weblap <body> elemének ’onmousemove’ eseményének kezelőfüggvénye lesz az a JavaScript kód, mely kalkulálja a megjelenített értékeket. Az esemény minden egyes egérmozgásra bekövetkezik, így gondoskodva arról, hogy mindig friss információk álljanak rendelkezésre.
A megjelenítő kontrolokat tehát elhelyezzük a HTML kódban. A megjelenítő Label kontrolok gyermekei a DIV kontrolnak:
<DIV id="infobox" style="..." ms_positioning="GridLayout">
A megjelölt darabszámot közlő Label kontrol:
<asp:Label id="pieceLabel" runat="server" Width="210px" style="..."></asp:Label>
Az egységár kontrolja:
<asp:Label id="unitpriceLabel" runat="server" Width="210px" style="..."></asp:Label>
A nettó összeg kontrolja:
<asp:Label id="netmoneyLabel" runat="server" Width="210px" style="..."></asp:Label>
A bruttó összeg kontrolja:
<asp:Label id="totalmoneyLabel" style="..." runat="server" Width="210px"></asp:Label>
</DIV>
A JavaScript kódot az oldal betöltődésekor helyezzük a weblapra a Page osztály RegisterClientScriptBlock metódusával. A kódot egy StringBuilder objektumban helyezzük el. A kód első soraiban gondoskodunk arról, hogy a DIV kontrol folyamatosan kövesse az egérmutató mozgását. Az információs ablak koordinátáinak megadásakor úgy jártunk el, hogy az a kurzortól kicsit távolabb kerüljön, hogy ne zavarja a pozícionálást. Az árak tárolására használunk egy ’pr’ nevű változót:
StringBuilder sb = new StringBuilder();
sb.Append("<script language=\"javascript\">\n");
sb.Append("function doMouseMove(){\n");
sb.Append("  document.all[\"infobox\"].style.visibility = \"visible\";\n");
sb.Append("  var checked = 0;\n");
sb.Append("  var pr = 0;\n");
sb.Append("  document.all[\"infobox\"].style.pixelLeft = event.x+20;\n");
sb.Append("  document.all[\"infobox\"].style.pixelTop = event.y+10;\n");
Majd sorban megvizsgáljuk a CheckBox kontrolokat, és ellenőrizzük, hogy ki vannak-e jelölve, vagy sem:
sb.Append("  var obj = document.all;\n");
sb.Append("  for(i=0;i<obj.length;i++){\n");
sb.Append("    if ((obj(i).type == \"checkbox\") && (obj(i).checked == true)) checked++;\n"); 
sb.Append("  }\n");
Miután megkaptuk, hogy hány kontrol van kijelölve az adott időpillanatban, az egységárat elhelyezzük a változóban, majd ezzel kalkulálunk.
sb.Append("  if (checked == 0){\n");
sb.Append("   pr = 0;}");
sb.Append("  else if ((checked >= 1) && (checked <= 3)){\n");
sb.Append("   pr = 252;}");
sb.Append("  else if ((checked >= 4) && (checked <= 11)){\n");
sb.Append("   pr = 243;}");
sb.Append("  else if ((checked >= 12) && (checked <= 51)){\n");
sb.Append("   pr = 232;}");
A megjelenítő kódsorok:
sb.Append("  document.all[\"pieceLabel\"].innerText = \"Választott mennyiség: \" + checked + \" db\";\n");
sb.Append("  document.all[\"unitpriceLabel\"].innerText = \"Egységár: \" + pr + \" Ft/db\";\n");
sb.Append("  document.all[\"netmoneyLabel\"].innerText = \"Nettó ár: \" + Math.round(checked*pr) + \" Ft\";\n"); 
sb.Append("  document.all[\"totalmoneyLabel\"].innerText = \"Bruttó ár: \" + Math.round(1.25*(checked*pr)) + \" Ft\";\n");
sb.Append("}");
sb.Append("</script>");
RegisterClientScriptBlock("doMouseMove", sb.ToString());
A felhasználó így folyamatosan nyomon követheti a rendelés állapotát, az információk a legkevesebb fáradság nélkül állnak rendelkezésre.