Newsletter
Nome:
E-mail:

Artigos

| TI24x7 Cursos Online

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-decorationnone">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-stylenone" />
            </a>
        </object>
        <iframe id="_sl_historyFrame" style="visibilityhiddenheight0px
width0pxborder0px"></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.



Colunista

Fabrizio Rodrigues

Graduado em Tecnologia, Análise e Desenvolvimento de Sistemas. Possui cursos Microsoft 2278/2192A, 4994A, 2956B, 2542A, 2543B, e 2544A. Trabalha com desenvolvimento de sistemas na linguagem C# e utiliza tecnologias como JavaScript, jQuery e SilverLight. Experiência em desenvolvimento de sistemas para governos na área da construção civil. Atualmente trabalha como Desenvolvedor WEB em um empresa na área de Segurança Digital Tributária.
© Copyright 2011 - Todos os direitos reservados. Proibida a reprodução parcial ou total do conteúdo deste site.
Como Funciona Formas de Pagamento Logo Ebit Compra Segura

TI 24x7 - O Maior portal de cursos online especializado em TI do Brasil