Silverlight - Acessando métodos em C# pelo javascript
Neste artigo, será mostrado como acessar um método em C# pelo javascript. Inicie um projeto em Silverlight, e crie uma simples animação, como o código da Tabela 1.
|
<UserControl.Resources> <Storyboard x:Name=”SbTranslacao”> <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00“ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)”> <SplineDoubleKeyFrame KeyTime=”00:00:02“ Value=”152″/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> |
|
Tabela 1 – Animação de Translação no eixo X de 2 segundos |
Feito a animação adicione o namespace.
Using System.Windows.Browser;
O próximo passo é adicionar dentro do construtor da classe Page, o seguinte código:
HtmlPage.RegisterScriptableObject(”Page”, this);
Isso apenas cria um objeto (DOM), o qual permite conversar com o Javascript porém não é só isso. Crie agora um método e adicione sobre o método um ScriptableMember, o qual indica que este método está acessível para ser chamado por uma função em Javascript, veja o código da Tabela 2, como deverá ficar o método para executar nossa animação por uma função em javascript.
|
[ScriptableMember] public void GetAnimacao() { SbTranslacao.Begin(); } |
|
Tabela 2 – ScriptableMember |
Agora crie uma função em Javascript, onde SilverlightControl é o plugin do Silverlight, ou seja o Id do OBJETO, que pode estar dentro da sua page em Html, ou na sua pagina Aspx. A tabela 3, Mostra a construção da função em Javascript
|
function GetMetodo() {
);slPlugin.Content.Page.GetAnimacao(); } OBSERVAÇÃO Em HTML
<object id=”SilverlightControl” data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”100%” height=”100%”>
<param name=”source” value=”ClientBin/Script.xap”/>
<param name=”onerror” value=”onSilverlightError” />
<param name=”background” value=”white” />
<param name=”minRuntimeVersion” value=”2.0.31005.0″ />
<param name=”autoUpgrade” value=”true” />
<a href=”http://go.microsoft.com/fwlink/?LinkID=124807″ style=”text-decoration: none;“>
<img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style: none”/>
</a>
</object>
ou em Aspx
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
<div style=”height:100%;“>
<asp:Silverlight ID=”SilverlightControl” runat=”server” Source=”~/ClientBin/Script.xap” MinimumVersion=”2.0.31005.0″ Width=”100%” Height=”100%” />
</div> var slPlugin = document.getElementById(“SilverlightControl” |
|
Tabela 3 – Função Javascript |
Agora, só resta chamar a função do Javascript, para isso eu adicionei um botão e usei o método Onclick e executar a aplicação. A Tabela 4 mostra o código
|
<input id=”Button1″ type=”button” value=”button” onclick=”GetMetodo()”/></div> |
|
Tabela 4 – Botão e método OnClick |
Abraços,
Flávia Moreira
