Action XML-Scriptben

Korábban már írtam az ASP.NET AJAX-ban található actionökről, mégpedig az újraküldés figyelése kapcsán. Az ott bemutatott megoldás az ASP.NET AJAX Control Toolkiten alapult, így szerver oldali kontrollokat és logikát tételezett fel.

Jó hír, hogy van lehetőség actionök használatára a kliens oldalon, ehhez azonban az ASP.NET AJAX Futures CTP-re lesz szükségünk. Telepítsük fel, majd hozzunk létre Visual Studioban egy ASP.NET AJAX CTP-Enabled Web Site-ot. Váltsunk át markup nézetbe a Default.aspx-en, majd adjunk az oldalhoz egy kliens oldali gombot és egy SPAN elemet, valahogy így:

    <span id="lblResult">Egy egy SPAN, itt jelenik majd meg az eredmény.</span>
    <input type="button" id="btnChange" value="Változtatás" />

A továbbiakhoz szükség lesz a PreviewScript.js fájlra, ezért módosítsuk a ScriptManagert:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
        </Scripts>
    </asp:ScriptManager>

A formon belül hozzunk létre egy XML-Script blokkot, azon belül pedig egy-egy referenciát a fenti két elemre. A SPAN elérhető a Sys.Preview.UI.Label, az INPUT type="button" pedig a Sys.Preview.UI.Button osztályon keresztül, például így:

  <script type="text/xml-script">
        <page xmlns="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <label id="lblResult" />
                <button id="btnChange">
                </button>
            </components>
        </page>
  </script>        

A button elemet szándékosan üresen hagytam, ide fogjuk ugyanis hozzáadni az eseménykezelőket. A gomb click eseményére szeretnénk reagálni, mégpedig úgy, hogy megváltoztatjuk a cimke szövegét, ami a Label osztály text tulajdonságának köszönhetően gyerekjáték. Ehhez használhatjuk a setPropertyAction akciót:

    <button id="btnChange">
        <click>
            <setPropertyAction target="lblResult" property="text" value="Új szöveg a SPAN-be" />
        </click>
    </button>

Ki lehet próbálni, ennek így működnie kell! Újonnan megszerzett tudásunkkal próbáljuk meg átírni a gomb szövegét is! A fenti módon ez sajnos nem fog sikerülni, mert a Button osztálynak nincs text tulajdonsága, vége a gyereknapnak. Ha valaki tudja, hogy miért nincs, írja meg, én hiányolom!

A jó hír, hogy a setPropertyActionnek – és néhány más akcióknak is – van egy propertyKey tulajdonsága is, amivel nem csak a target osztály property tulajdonságát lehet beállítani value értékre target.property=value formában, hanem a target.property.propertyKey értékét is. Ennyi segítséggel felvértezve már ki is lehet találni a megoldást:

    <setPropertyAction target="btnChange" property="element" 
propertyKey="value" value="Új szöveg a gombra" />

Ez persze így már nem volt nehéz, hiszen a HTML kódból nyilvánvaló, hogy a gomb szövegét az INPUT elemen belül a value tulajdonság határozza meg. De mi van akkor, ha az oldalon egy DIV tartalmát szeretnénk átírni. A kérdés tehát, hogy az alábbi elem megjelenő szövege hogyan módosítható a setPropertyAction segítségével:

    <div id="pnlResult">Ez itt egy DIV, aminek nincs kliens oldali kontroll megfelelője.</div>

A DIV elemhez nem tartozik közvetlenül típusos kliens oldali kontroll a Sys.Preview.UI névtérben, tehát látszólag meg vagyunk lőve. Sebaj, használjuk minden kontrollok ősét, a Sys.UI.Control osztályt és azzal definiáljunk egy referenciát a label és a button tag környékére:

    <control id="pnlResult" />

Érdekesség, hogy a Control osztály nem a Sys.Preview.UI névtérben van. Mivel minden kontroll osztály innen örökli a funkcionalitásának egy részét, érdemes megnézni, hogy az ős mi mindent tud a C:Program FilesMicrosoft ASP.NETASP.NET 2.0 AJAX Extensionsv1.0.61025MicrosoftAjaxLibrarySystem.Web.Extensions1.0.61025.0MicrosoftAjax.debug.js fájlban.

Folytatva a fenti példát hátra van még az, hogy a gombra kattintáskor át kellene írnunk a DIV szövegét. A Control osztálynak sincs text tulajdonsága, de legalább el lehet kérni a burkolt HTML elemet az element tulajdonságon keresztül, és annak már meg lehet változtatni a tartalmát a jól ismert innerHTML tulajdonság átírásával:

    <setPropertyAction target="pnlResult" property="element" 
propertyKey="innerHTML" value="Új szöveg a DIV-re" />

A setPropertyAction csak egy a sokféle akció közül, érdemes megismerkedni a többivel is!

A fenti példa teljes forráskódja letölthető a devPORTALról.

 

Technorati tags: ,

2 thoughts on “Action XML-Scriptben

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s