Silverlight metódus hívása JavaScripttel

Tegnap merült fel egy érdekes probléma az ASP.NET Facebook csoportban, nevezetesen, hogy hogyan adjunk át adatokat a Silverlight alkalmazásnak. Nyílván nem optimális a felállás, de attól még előfordulhat, szóval ha valaki ilyesmibe fut akkor itt a megoldás.

Meglehetősen egyszerű dolgunk van, elsősorban szükségünk van egy hihetetlenül életszerű példára, ez a következő: a SL alkalmazásunkban van egy darab TextBox, amivel kiíratjuk a javascripttel érkező üzenetet.

A következő lépés, hogy hidat teremtünk a SL és a JS között. Ehhez szükségünk van egy metódusra, amelyet a ScriptableMember attribútummal dekorálunk:

[ScriptableMember]
public void SendMessage(string message)
{
    this.messageTextBox.Text = message;
}

Az MSDN nem említi, de az alkalmazást regisztrálni is kell, hogy “lássa” a JS, ehhez a konstruktorban kell elhelyezni pár sort:

public MainPage()
{
    InitializeComponent();

    if (HtmlPage.IsEnabled)
    {
        HtmlPage.RegisterScriptableObject("Communicator", this);
    }
}

Silverlight oldalról ennyi volt, lássuk azt a javascriptet. Első lépésként húzzuk be a jquery könyvtárat:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Majd adjunk nevet (id) a Silverlight objektumnak:

</pre>
<object id="sl-plugin" width="100%" height="100%" classid="clsid:dfeaf541-f3e1-4c24-acac-99c30715084a"><param name="src" value="data:application/x-silverlight-2," /><embed id="sl-plugin" width="100%" height="100%" type="application/x-silverlight-2" src="data:application/x-silverlight-2," />

Hozzunk létre egy szövegmezőt és egy gombot:

<input id="message" type="text" value="write here..." />
<input id="Button1" onclick="sendMessage();" type="button" value="Send message" />

Ezután az alábbi függvénnyel tudjuk hívogatni az SL metódust:

function sendMessage()
{
    var control = $('#sl-plugin').get(0);
    if (control != null)
    {
        control.content.Communicator.SendMessage($('#message').val());
    }
}

Az eredmény (annyit csinosítottam rajta, hogy a silverlight objektumot tároló div magasságát csökkentettem):

‹ “Error creating the web proxy…” hibaüzenet

ASP.NET MVC – Egyszerű webshop lépésről lépésre (fordítás, 123 oldal) ›

Tagged with: Javascript, Silverlight
Nincs kategorizálva kategória