Vágólap elérése ASP.NET alkalmazásainkban

Mellékelt példa megnyitása előtt szükséges egy ClipBoardUsage 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 ASP.NET példaprogramban egy színes téglalapban elhelyeztünk egy szöveget, melynek kijelölt elemeit a megfelelő gombokkal – COPY, illetve CUT – a vágólapra másoljuk, illetve töröljük is a forráshelyről, majd a PASTE gomb segítségével a tetszőleges helyre másoljuk. Ezen azt értjük, hogy miután a Vágólapra került a kívánt szöveges információ, egy másik szövegrészletet jelölünk ki, majd ennek tartalmát a Vágólap tartalmával kicseréljük. A lapon elhelyezett szövegmezőben a Vágólap aktuális tartalma látható.

A megoldáshoz nincs szükség arra, hogy szerver-objektumokat érjünk el, így a másolást, illetve kivágást végző nyomógombokra klikkelve nem juttatjuk el a kérést a szerverhez, helyette JScript-objektumokat használunk.

Legfontosabb objektumunk a rendszer Vágólapját reprezentáló, a Microsoft Internet Explorer 5-ös verziójától kezdve elérhető clipboardData objektum, melynek három fontos metódusa van annak érdekében, hogy adatokat másoljunk a Vágólapra, onnan adatokat másoljunk változókba, valamint tartalmát töröljük. Ezek a következők:

A metódus törli a Vágólapon található adatokat. Szintaxisa:

object.clearData( [sDataFormat]);

Paraméterként karakterlánc formátumban kell megadni egy vagy több adatformátumra jellemző értéket, melyek a következők:

Amennyiben nem adunk meg paramétert, valamennyi adattípus törlődik a Vágólap területéről. A szöveg-formátumú adat törlését a következőképpen adhatjuk meg a metódusban:

clipboardData.clearData("Text");

A metódussal elérhetjük a Vágólapon található, megadott formátumú adathalmazt. Szintaxisa:

object.getData(sDataFormat);

Paraméter megadása kötelező, ezek típusa és megadási módja megegyezik az előző metódus esetében említettekkel.

A visszatérési érték attól függ, hogy milyen adatok adunk meg paraméterként. Típusa karakterlánc. Szöveges adat esetén maga a szöveg, a kép esetén a kép elérési útvonala, URL esetén egy hivatkozás. Például:

var otext = clipboardData.getData(("Text");

A metódussal adatokat helyezhetünk el a Vágólap memóriaterületén. Szintaxisa:

bSuccess = object.setData(sDataFormat, sData);

A formátumra utaló első paraméter megegyezik a fent említettekkel, második paraméterként pedig magát az elhelyezendő adatot kell megadnunk. Képek esetén természetesen egy létező elérési útvonalat kell megadnunk. Például:

Image i = new Image(...);
i.src = ...;
clipboardData.setData("URL",i.src);

A metódus visszatérési értéke egy logikai érték, sikeres művelet végrehajtás esetén TRUE, egyébként FALSE.

Az objektum metódusainak ismeretében lássuk, hogyan is történik az adatok mozgatása.

Az adatok másolását a COPY gombra klikkelve a doCopy JScript függvénnyel végezzük el. A függvény első soraiban meghatározzuk a mintaszövegben található kijelölést, majd ezt betesszük egy objektumba, melyre meghívjuk a másolófüggvényt:

function doCopy()
{
  var textRange = document.selection.createRange();

Ha létezik kijelölt szövegrész, akkor kimásoljuk a Vágólapra az objektum execCommand metódusával, melynek meg kell adni karakterlánc formájában az elvégzendő műveletet. A művelet elvégzése után a Vágólap tartalmát megjelenítjük a szövegmezőben, majd a kijelölt szöveget töröljük a memóriaterületről:

  textRange.execCommand("Copy");
  document.all["cpText"].innerText = "";
  document.all["cpText"].innerText = window.clipboardData.getData("Text");
  document.selection.empty();
}

A CUT gombra kattintva a doCut függvény fut le, melyben ki is vágjuk a kijelölt szöveget az eredeti helyről:

function doCut()
{
  var textRange = document.selection.createRange();
  ...

A kivágás, és a megjelenítés:

  textRange.execCommand("Cut");
  document.all["cpText"].innerText = "";
  document.all["cpText"].innerText = window.clipboardData.getData("Text");
  document.selection.empty();

Amennyiben a forrás szöveg teljes tartalmát kivágtuk, vagyis nem lehetséges újabb szövegrészt kijelölni, akkor megjelenítünk egy gombot, melynek megnyomásával újra feltölthetjük a szövegdobozt:

  if (document.all["source"].innerText.length == 0)
  {
    document.all["repaire"].style.visibility = "visible";
  }
}

A PASTE gombra kattintva a doPaste függvény fut le, mely a következőt végzi:

function doPaste()
{
  var textRange = document.selection.createRange();

A beillesztés és megjelenítés:

  textRange.execCommand("Paste");
  document.selection.empty();

A beillesztés után a szövegdoboz alatti kontrolok helyét igazítjuk a megfelelő helyre, hogy a szöveg ne lógjon a kontrolokra.

  document.all["clipboard"].style.top = document.all["source"].scrollHeight + 30;  
  document.all["control"].style.top = document.all["source"].scrollHeight + 30;  
}

Amennyiben nem jelölünk ki szöveget, figyelmeztető üzeneteket kapunk.