Adott karakterlánc keresése HTML-oldalakon

Mellékelt példa megnyitása előtt szükséges egy WebTextRange 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 Webes kontrol projektjének létrehozása után a WebTextRangeControl.cs állományban helyeztük el a kontrol működéséért felelős kódsorokat. A mellékelt példában a WebTextRange mappában találjuk meg mind a kontrol, mind pedig a Webes alkalmazás állományait.

A program használata előtt a kontrolt fel kell tenni a ToolBox-ra a szokásos módon: kattintsunk a ToolBox valamely lapján az egér jobb gombjával, majd a megjelenő menüből válasszuk ki a Customize ToolBox pontot, a megjelenő ablakban a .NET Frameworks Components fület. A Browse gombbal keressük elő az imént létrehozott .DLL-t.

Lássunk hozzá a kód elkészítéséhez. A kontrol osztályában deklarálnunk kell két tagobjektumot, melyek a keresőfunkciót elvégzik. Az első egy HtmlButton objektum, melyre kattintva a keresés elindítható, a másik egy TextBox objektum, melyben megadható a keresendő karakterlánc. A gomb objektumot a HtmlButton osztályból származtattuk, mert nincs szükség PostBack esemény generálására:

private System.Web.UI.HtmlControls.HtmlButton findButton;
private TextBox findText;

A kontrol konstruktorában megadjuk a kontrol megjelenésére vonatkozó információkat:

public WebTextRangeControl()
{
  Height = 150;
  Width = 165;
  this.BackColor = Color.Moccasin;
  this.BorderColor = Color.Brown;
  Unit wu = new Unit(2);
  this.BorderWidth = wu;
}

A CreateChildControl metódusban létrehozzuk a kontrol gyermekkontroljait, majd felvesszük őket a gyűjteménybe:

protected override void CreateChildControls()
{
  findButton = new System.Web.UI.HtmlControls.HtmlButton();
  ...
  findButton.Attributes.Add("onclick","FindText()");
  ...
  Controls.Add(findButton);
  findText = new TextBox();
  ...
  Controls.Add(findText);
}

Megadjuk a keresést végző JScript kódot, mely tartalmazza a keresőfüggvényt:

protected override void OnInit(EventArgs e)
{
  base.OnInit(e);
  if (Page != null)
  {
    StringBuilder sb = new StringBuilder();
    sb.Append("<script language=\"JScript\">\n");
    sb.Append("function FindText()\n");
    sb.Append("{\n");

A megoldás egyik kulcsa, hogy ki kell jelölnünk, hogy milyen szöveget szeretnénk alávetni a keresésnek. Ehhez a document.body objektum createTextRange metódusát használjuk, melynek visszatérési értéke egy TextRange objektum, amelynek hasznos függvényeivel pásztázzuk végig a szöveget:

    sb.Append("  var t = document.body.createTextRange();\n");

Ha nem írunk szöveget a kontrol TextBox kontroljába, akkor figyelmeztető szöveget jelenítünk meg:

    sb.Append("  if (document.all(\"fT\").value == \"\"){\n");
    sb.Append("    alert(\"Nem adott meg keresendő szöveget!\");\n");
    sb.Append("    return;\n");
    sb.Append("  }\n");

A keresést a TextRange objektum findText függvényével végezzük, melynek visszatérési értéke TRUE ha a keresés sikeres, és FALSE ha nem. Paraméterként átadjuk a keresendő szöveget, jelen esetben a TextBox kontrolban megadott karakterláncot, valamint megadhatunk egy egész számot arra vonatkozóan, hogy a szöveg kezdő pozíciójától kezdve hány karakter hosszan vegye figyelembe a függvény a szöveget. Ezt mi most nem használjuk:

    sb.Append("  t.findText(document.all(\"fT\").value);\n");

A megtalált szöveg kijelöléséhez a TextRange objektum select függvényét használhatjuk:

    sb.Append("  t.select();\n");
    sb.Append("}\n");
    sb.Append("</script>");

Végül elhelyezzük a lapon a script-et:

    Page.RegisterClientScriptBlock("text", sb.ToString());
  }
}

A kontrol megjelenítéséhez a Render metódust használjuk:

protected override void Render(HtmlTextWriter output)
{
  EnsureChildControls();
  base.Render(output);
}

Amennyiben a szövegben nem található meg a keresett karakterlánc, a megadott szöveg lesz kijelölve.