Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

Come richiamare dei metodi C# all'interno di Silverlight, tramite javascript

Le applicazioni Silverlight 2.0 hanno una stretta collaborazione con il browser che le ospita, soprattutto grazie alle classi presenti all'interno del namespace System.Windows.Browser, che appunto permettono l'interazione tra metodi scritti in managed code all'interno dei controlli Silverlight e codice scritto in Javascript presente nella pagine che ospita il controllo.
Per noi sviluppatori web, in ambito .NET, questa cosa è una vera rivoluzione in quanto siamo sempre stati abituati al concetto che il nostro codice C# o VB.NET venisse eseguito lato server, mentre quello Javascript venisse eseguito esclusivamente lato client; ora invece, essendo Silverlight un plug-in il cui codice quindi eseguito lato client, questo concetto viene totalmente sconvolto.
Lato managed code, Silverlight offre la classe HtmlPage che permette l'interazione tra Silverlight e la pagina.
L'interazione contraria, quindi da codice Javascript al managed code, deve essere invece preparata in un modo un pò più particolare. Innanzitutto, all'interno dell'evento Loaded dell'applicazione Silverlight, deve essere registrato l'oggetto tramite il quale poi potrà essere effettuata la comunicazione dalla pagina.
Tale registrazione viene fatta chiamando il metodo RegisterScriptableObject, sempre della classe HtmlPage:

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{
HtmlPage.RegisterScriptableObject("SilverlightToJavascriptControlObject", this);
}

Notiamo che la chiave scelta è del tutto arbitraria.
Poi invece, dobbiamo scegliere il metodo che vogliamo sia richiamabile da codice Javascript e decorarlo con l'attributo "ScriptableMember".

[ScriptableMember]

public void AddItem(string value)
{
listbox.Items.Add(value);
HtmlPage.Window.Alert("richiamato da javascript !");
}

Così facendo, abbiamo appena abilitato la nostra applicazione Silverlight a ricevere informazioni dalla pagina che la ospita; in realtà, quello che effettivamente può essere richiamato è il metodo "AddItem".
Ora, vediamo il codice Javascript necessario per effettuare tale chiamata:

<script type="text/javascript">

function SendToSilverlight()
{
var txt = document.getElementById("txt");
var silverlight = document.getElementById("silverlightControl");
silverlight.Content.SilverlightToJavascriptControlObject.AddItem(txt.value);
}
</script>
<body>
Manda qualcosa a Silverlight...<br />
<input type="text" id="txt" />
<input type="button" onclick="javascript:SendToSilverlight()" value="send" />
<br /><br />
<div id="silverlightControlHost">
<object id="silverlightControl"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="100%" height="100%"
>
<param name="source" value="ClientBin/SilverlightAndJavascript.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none"
/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>

Come abbiamo visto, nel caso di utilizzo di una semplice pagine html per la fruizione dell'applicazione Silverlight, è necessario prima prelevare l'elemento di tipo "object" (tramite il suo id) che rappresenta il controllo Siverlight vero e proprio ed, in seguito, richiamare il metodo AddItem.
Allo stesso modo, è possibile eseguire la medesima operazione anche all'interno di una pagina ASP.NET:

<head runat="server">

<script language="javascript" type="text/javascript">

function SendToSilverlight()
{
var txt = document.getElementById("txt");
var silverlight = document.getElementById("Xaml1");
silverlight.Content.SilverlightToJavascriptControlObject.AddItem(txt.value);
}

</script>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Manda qualcosa a Silverlight...<br />
<asp:TextBox ID="txt" runat="server" />
<asp:Button ID="btn" runat="server" Text="Send" OnClientClick="SendToSilverlight(); return false;" /><br /><br />
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/SilverlightAndJavascript.xap"
MinimumVersion="2.0.31005.0"
Width="100%" Height="100%"
/>
</div>
</form>
</body>

In questo caso, l'identificativo per richiamare il controllo è il medesimo utilizzato all'interno dell'attributo ID del controllo asp:Silverlight, componente che si preoccupa di effettuare il rendering del relativo elemento di tipo "object".
Come avete potuto vedere, risulta veramente facile far interagire la pagina con il controllo Silverlight ospitato e viceversa, tramite le classi offerte dal .NET Framework. Chiaramente poi, le informazioni che vengono scambiate e che fanno parte di quello che è l'input dell'utente, devono passare sotto degli adeguati controlli di validazione per evitare qualsiasi tipo di vulnerabilità.
Vi lascio un piccolo esempio di quanto abbiamo visto fin'ora.

DEMO ONLINE | Source code
blog comments powered by Disqus