Comunicar ASPX com Silverlight e vice-versa
04/03/2011
Alguém sabe como fazer a comunicação entre o Silverlight e a página ASPX... ainda
não? Pois bem, vamos ver como fazer essa comunicação que com certeza será muito
útil e para esta nobre tarefa, vamos utilizar o consagrado JavaScript.
Comunicando o ASPX(via JavaScript) com o Silverlight
Inicialmente vamos criar uma tela com 3 TextBlocks e 1 Button na MainPage.xaml semelhante
a imagem abaixo.
Lembrando que a tela é pequena (essa foi feita com o d:DesignHeight="142" e d:DesignWidth="390"),
pois colocaremos posteriormente a comunicação inversa (Comunicação SL com ASPX)
na mesma página.
Na página ASPX default da aplicação, eu alterei o nome para AcessoJavaScript.aspx,
apliquei a página inicial ("Set As Start Page") e localizei a tag object que possui
o conteúdo do SL inserindo a propriedade "id" com o valor "SilverlightControl" (ficando
id="SilverlightControl").
Agora no MainPage.xaml.cs, importaremos o namespace System.Windows.Browser e logo
após o método InitializeComponent() colocaremos a declaração "HtmlPage.RegisterScriptableObject("SilverlightControl",
this);" que possibilitará com que essa página possa ser utilizada via scripts.
Com isso, estaremos utilizando o objeto HtmlPage que possibilita a manipulação de
objetos HTML na página em que a aplicação está hospedada.
Nesse momento, adicionaremos um método com o atributo [ScriptableMember] que tornará
o nosso método acessível pelo JavaScript.
O resultado deverá ser este:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Browser;
namespace AcessoJavaScript
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
// Comunicação JavaScript > Silverlight
HtmlPage.RegisterScriptableObject("SilverlightControl", this);
}
[ScriptableMember]
public void ReceberTexto(string strTexto)
{
this.txtJavaScript.Text = strTexto;
}
}
}
Para visualizarmos essa funcionalidade, vamos adicionar no arquivo AcessoJavaScript.aspx
um botão e uma function que acessará o método ReceberTexto. O resultado deverá ser
parecido com este:
<form id="form1" runat="server">
<h2>
Silverlight > JavaScript</h2>
<div>
<object id="SilverlightControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/AcessoJavaScript.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none" />
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px;
width: 0px; border: 0px"></iframe>
</div>
<h2>
JavaScript > Silverlight</h2>
<div>
<input type="button" value="Exibir texto no Silverlight" onclick="ComunicarComSL()" />
</div>
</form>
E a function...
<script type="text/javascript">
function ComunicarComSL() {
var objetoSL = document.getElementById("SilverlightControl");
objetoSL.Content.SilverlightControl.ReceberTexto("Texto enviado via JavaScript.");
}
</script>
Seguindo esses passos, você conseguirá comunicar o ASPX(via JavaScript) com o SL.
Comunicação do Silverlight com o ASPX
Essa comunicação é mais simples e inicialmente na página AcessoJavaScript.aspx adicione
a function "Alerta()" da seguinte forma:
function Alerta(msg) {
alert(msg);
}
E no evento click do botão da página MainPage.xaml adicione a seguinte instrução:
private void btnEventoJavaScript_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta", "Teste com evento do JavaScript chamado pelo Silverlight!!!");
}
Com o método Invoke, primeiro passamos o nome da function que queremos acessar em
JavaScript e posteriormente passamos os parâmetros. Com esse método, ainda estamos
aproveitando a classe HtmlPage.
Legal! Agora temos a comunicação entre o ASPX e o SL e vice-versa.
Lembrando que você poderá utilizar o jQuery para selecionar elementos da página
ASPX com mais facilidade e também, é muito útil para aplicações em MVC e WebForms
que misturam SL.
|