Acessando funções Javascript com Silverlight
Saudações pessoal, segue um tutorial de como acessar uma função javascript através da sua aplicação Silverlight:
Para esse tutorial, eu utilizei o Visual Studio 2010 e o Silverlight 4, porém o processo é exatamente o mesmo para versões anteriores da tecnologia.
Vamos lá.
1. Crie um novo projeto no Visual Studio:
2. Selecione um projeto do tipo Silverlight Application:
3. Marque a opção Host the Silverlight application in a new Web site para que seja criada um novo projeto ASP.NET contendo a aplicação Silverlight automaticamente:
4. Agora, com nosso projeto criado, vamos criar a nossa função Javascript que será executada pelo Silverlight.
Ela ficará na página ASPX onde o Silverlight está contido, no meu caso, no web form chamado AcessandoJavascriptComSilverlightTestPage.aspx. Abra a página para edição:
5. Com o código da página aberto, vamos inserir o seguinte trecho de código entre as tags <head> e </head> do web form:
<script type="text/javascript">
function Alerta() {
alert("Olá Mundo!");
}
</script>
Obs.: Esta pequena função javascript é responsável por exibir uma mensagem de alerta na tela do usuário.
Exemplo (AcessandoJavascriptComSilverlightTestPage.aspx):
6. Agora, acesse o código XAML da sua MainPage para criarmos o botão que acionará a chamada à função javascript.
7. Insira o seguinte trecho de código dentro do LayoutRoot do seu UserControl:
<Button x:Name="btnAlerta" Content="Alerta" Height="100" Width="100" Click="btnAlerta_Click" />
Exemplo (MainPage.xaml – Design):
Exemplo (MainPage.xaml - XAML):
8. Agora abra o code-behind da MainPage para inserirmos a chamada à função javascript.
9. Insira, na classe, o seguinte trecho de código:
private void btnAlerta_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta");
}
10. Agora execute a aplicação (tecla F5) e veja o resultado:
Obs.: Caso queira passar parâmetros para as funções javascript, você poderá utilizar o mesmo método, veja:
1. Função javascript parametrizada:
<script type="text/javascript">
function Alerta(mensagem) {
alert(mensagem);
}
</script>
Exemplo (AcessandoJavascriptComSilverlightTestPage.aspx):
2. Passando valores para funções javascript parametrizadas via code-behind:
private void btnAlerta_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("Alerta", "Olá Mundo via parâmetro.");
}
Exemplo (MainPage.xaml.cs):
Espero que este tutorial tenha sido útil.
Qualquer dúvida, basta deixar um comentário.
Um forte abraço.
Fabriccio (@fabricciocb).
Posts Relacionados:
Recuperando valores passados por QueryString em Silverlight
Editando e Recuperando valores de Controles ASPX com Silverlight
Publicado em 10 10UTC setembro 10UTC 2010, em Silverlight 3, Silverlight 4, Tutoriais e marcado como javascript, Silverlight, Tutorial. Adicione o link aos favoritos. 2 Comentários.
Pingback: Recuperando valores passados por QueryString em Silverlight « Blog de Fabriccio Bernardes
Pingback: Editando e Recuperando Valores de Controles ASPX com Silverlight « Blog de Fabriccio Bernardes