Ejecutar JavaScript desde Silverlight
Al desarrollar con Silverlight muchas veces necesitamos que nuestro control interactúe con el resto de la página, por ejemplo, con un botón de HTML o con un DIV, colocando dentro algún texto. Para poder lograr esto el framework de .NET que posee el Silverlight nos ofrece la clase HtmlPage, la cual se encuentra en el namespace System.Windows.Browser. Esta clase posee varias propiedades y métodos estáticos para interactuar con el navegador del cliente, por ejemplo, la propiedad BrowserInformation nos brinda información del navegador, pudiendo saber su versión a través de la siguiente propiedad: HtmlPage.BrowserInformation.BrowserVersion, o la plataforma sobre la cual está corriendo con esta otra: HtmlPage.BrowserInformation.Platform.
Para poder interactuar con la página que contiene a nuestro control en el cliente podemos utilizar la propiedad HtmlPage.Window, la cual posee una instancia del objeto window del navegador, pudiendo, por ejemplo, crear un “alert” con la siguiente línea:
HtmlPage.Window.Alert("Hola mundo!");
crear un diálogo de confirmación con esta otra:
bool bolOK = HtmlPage.Window.Confirm("¿Está seguro de hacer eso?");
o simplemente navegar a otra página:
HtmlPage.Window.Navigate("http://www.silverlight.net");
Pero si lo que necesitamos es llamar a una función creada en JavaScript, podemos utilizar el método Invoke, el cual toma como primer parámetro el nombre de la función a ejecutar, y los subsiguientes parámetros se los pasa a la función. El valor devuelto por el método es el retornado por la función ejecutada (si es que devuelve algún valor). Como ejemplo vamos a ejecutar la llamada a la función “alert” pero a través del método invoke:
HtmlPage.Window.Invoke("alert", "Hola mundo!");
Cabe mencionar que para que nuestra aplicación pueda interactuar con la página necesitamos agregar el parámetro HtmlAccess="Enabled" en la creación del objeto de Silverlight.
Ejecutar métodos de Silverlight desde JavaScript
También puede darse el caso que necesitemos llamar a algún método de nuestro control al ejecutarse algún evento de la página, por ejemplo, al pulsarse un botón de HTML, para lo cual necesitamos registrar nuestro objeto para que pueda ser accedido a través de JavaScript y el método (o todos los miembros) de la clase también como accesibles.
Comencemos por el primer paso: para registrar nuestro objeto, por ejemplo, el control, simplemente necesitamos ejecutar el método RegisterScriptableObject, pasándole como primer parámetro el nombre de la propiedad de JavaScript a través de la cual será accedido, y como segundo parámetro la instancia del mismo, por ejemplo:
HtmlPage.RegisterScriptableObject("Page", this);
El siguiente paso es registrar a la clase completa para que pueda ser accedida a través de JavaScript con el atributo ScriptableType, o registrar sólo los métodos que se necesitan usar, a través del atributo ScriptableMember.
A continuación muestro como ejemplo una aplicación Silverlight que posee marcado como accesible desde JavaScript un método que cambia el texto un botón del mismo.
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Page", this);
}
[ScriptableMember]
public void ChangeButtonText(string Text)
{
TextBlock objTB = new TextBlock();
objTB.Text = Text;
Button1.Content = objTB;
}
}
Y la página que utiliza este método:
<body style="height: 100%; margin: 0; background-color: Blue">
<form id="form1" runat="server">
<asp:scriptmanager ID="ScriptManager1" runat="server"></asp:scriptmanager>
<input type="button" onclick="$get('Xaml1').Content.Page.ChangeButtonText('Html')"
value="Prueba" />
<div>
<asp:silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication5.xap"
MinimumVersion="2.0.31005.0" Width="500" Height="300" Windowless="true" HtmlAccess="Enabled"></asp:silverlight>
</div>
</form>
</body>
Por último, dejo un ejemplo creado con Visual Studio® 2008 donde se muestra un botón en una aplicación de Silverlight que cambia el texto de un botón de HTML, y un botón de HTML que cambia el texto de un botón de Silverlight.
Espero que este artículo les sea de utilidad.
