Editando e Recuperando Valores de Controles ASPX com Silverlight

Colocado por Fabriccio Bernardes na(s) categoria(s): Ria’s Geral, silverlight, Silverlight 3, Silverlight 4, Tutoriais em 09 11th, 2010 | Sem comentários

Olá pessoal,

Hoje vou compartilhar com vocês uma técnica muito útil de comunicação entre a aplicação Silverlight e os controles presentes na página ASPX onde esta aplicação está contida.
A idéia central deste tutorial é, basicamente, recuperar e editar o valor de um textbox contido numa página ASPX via Silverlight utilizando as classes HtmlDocument e HtmlElement.

Vamos lá, arregacem as mangas e mãos à obra.

1. Primeiramente, vamos criar o TextBox que será utilizado no ASPX para a transferência dos dados entre as tecnologias. Para isso, copie e cole a linha de código abaixo para dentro da tag <form> da sua página.

<asp:TextBox ID="TextBox_ASPX" runat="server" Text="..." style="text-align: center" />

Exemplo (AcessandoElementosASPXviaSLTestPage.aspx)

2. Agora vamos criar os componentes necessários para a comunicação do lado da aplicação Silverlight. Copie o código XAML abaixo para dentro do LayoutRoot da sua aplicação:

        <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="50,31,45,0" Name="textBlock1" Text="Aplicação Silverlight" VerticalAlignment="Top" Width="305" TextAlignment="Center" />
        <Button x:Name="btnAlteraValor" Width="100" HorizontalAlignment="Center" Content="Atribuir valor" Click="btnAlteraValor_Click" Margin="12,105,288,0" Height="50" VerticalAlignment="Top" />
        <TextBox x:Name="txtEntradaDados" Width="200" HorizontalAlignment="Center" Text="Olá Mundo" TextAlignment="Center" FontSize="18" Margin="133,112,67,0" Height="37" VerticalAlignment="Top" />
        <Button x:Name="btnRecebeValor" Width="100" HorizontalAlignment="Center" Content="Recuperar valor" Click="btnRecebeValor_Click" Margin="0,0,0,60" Height="50" VerticalAlignment="Bottom" />
        <TextBlock x:Name="txbRecebeValor" Text="..." VerticalAlignment="Bottom" TextAlignment="Left" FontSize="18" Margin="0,0,0,20" HorizontalAlignment="Center" />

Sua aplicação deverá ficar parecida com o exemplo abaixo:

Exemplo (MainPage.xaml – Design)

3. Ok, já preparamos o cenário necessário para a realização da nossa demonstração, vamos agora implementar os eventos dos controles Silverlight com a lógica da comunicação entre as tecnologias.
Copie o código abaixo e cole no code-behind do seu UserControl (ou Page):

//evento responsável por alterar o valor contido no TextBox_ASPX
private void btnAlteraValor_Click(object sender, RoutedEventArgs e)
{
   HtmlDocument hd = HtmlPage.Document;
   HtmlElement he = hd.GetElementById("TextBox_ASPX"); //recupera o textbox da página ASPX
   he.SetAttribute("value", txtEntradaDados.Text); //atribui o valor de txtEntradaDados ao TextBox_ASPX
   hd.Submit(); //envia as modificações
}

//evento responsável por recuperar o valor contido no TextBox_ASPX
private void btnRecebeValor_Click(object sender, RoutedEventArgs e)
{
   HtmlDocument hd = HtmlPage.Document;
   HtmlElement he = hd.GetElementById("TextBox_ASPX"); //recupera o textbox da página ASPX
   txbRecebeValor.Text = he.GetAttribute("value"); //atribui o valor do TextBox_ASPX no textblock chamado txbRecebeValor
}

Exemplo (MainPage.xaml.cs)

4. Execute a aplicação. Ela terá mais ou menos essa aparência:
Ao clicar em Atribuir valor, o texto contido na textbox da aplicação Silverlight (txtEntradaDados) será enviado para a textbox da página ASPX (TextBox_ASPX), como no exemplo abaixo:

E ao clicar em Recuperar valor, o texto contido na textbox da página ASPX (TextBox_ASPX) será enviado para o textblock da aplicação Silverlight (txbRecebeValor), segue um exemplo: