JavaScript в Silverlight

Written on . Posted in WPF и Silverlight

Теперь давайте поговорим про интеграцию Silverlight с JavaScript.

Вызов JavaScript функций из Silverlight

Для того, чтобы вызвать JavaScript функцию из Silverlight достаточно написать следующий код: 

HtmlPage.Window.Invoke("DisplayMessage","Привет из Silverlight!");

Здесь мы вызываем JavaScript функцию DisplayMessage и передаём её в качестве параметра строку. Добавим этот код в обработчик события нажатия кнопки.

Теперь создадим данную JavaScript функцию на ASP.NET странице. Раздел head страницы будет выглядить так: 

<head runat="server">
    <title>MySilverlightApplication</title>
<script type="text/javascript">
    function DisplayMessage(message) {
        alert(message);
    }
</script>
</head>

После этого при нажатии на кнопку выполняется JavaScript функция. Которая отображает сообщение с заданным текстом. Текст сообщения передаётся в параметре. Запустим приложение и проверим его работу.

Вызов Silverlight функций из JavaScript

Теперь пришло время вызывать из JavaScript функции в нашем Silverlight приложении. Для этого установим аттрибут ScriptableType у типа Page в файле Page.xaml.cs. 

[ScriptableType]
public partial class Page : UserControl

Это позволит нам обращаться к специально отмеченным функциям данного обекта из JavaScript. Но сначала нам надо зарегистрировать объект класса Page как доступный для вызова. Для этого в конструктор Page() добавим следующий код: 

HtmlPage.RegisterScriptableObject("silverlightApplication", this);

Здесь мы задали имя ("silverlightApplication") по которому мы сможем из JavaScript обращаться к .NET объекту.

Теперь внутри класса Page нам надо создать функцию, которую мы и будем вызывать из JavaScript. Вот код этой функции. Она имеет аттрибут ScriptableMember, что говорит о возможности её вызова из скриптов. 

[ScriptableMember]
public void ChangeButtonContent(string text)
{
    mainButton.Content = text;
}

Данная функция устанавливает текст у кнопки на Silverlight странице.

Далее представлен полный код класса Page: 

[ScriptableType]
public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
        HtmlPage.RegisterScriptableObject("silverlightApplication", this);
        HtmlDocument doc = HtmlPage.Document;
        HtmlElement div = doc.GetElementById("myDIV");
        div.AttachEvent("onclick", new EventHandler((o, x) =>
        {
            div.SetStyleAttribute("background", "yellow");
        }));
    }
 
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        HtmlDocument doc = HtmlPage.Document;
        HtmlElement div = doc.GetElementById("myDIV");
        div.SetStyleAttribute("background", "green");
        HtmlPage.Window.Invoke("DisplayMessage", "Привет из Silverlight!");
    }
 
    [ScriptableMember]
    public void ChangeButtonContent(string text)
    {
        mainButton.Content = text;
    }
}

И файла Page.xaml: 

<UserControl x:Class="MySilverlightApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Click="Button_Click" Content="Изменить цвет" Width="250" Height="50" x:Name="mainButton"/>
    </Grid>
</UserControl>

Теперь изменим JavaScript функцию DisplayMessage так, чтобы она вызывала C# функцию ChangeButtonContent. 

function DisplayMessage(message) {
    alert(message);
    silverLightControl = document.getElementById("Xaml1");
    silverLightControl.content.silverlightApplication.ChangeButtonContent(message);
}

Мы получаем объект Silverlight плагина и вызываем функцию ChangeButtonContent, передавая ей тот же самый параметр, что мы передавали из C# кода в функцию DisplayMessage.

Полный код страницы MySilverlightApplicationTestPage.aspx находится ниже: 

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
    <title>MySilverlightApplication</title>
    <script type="text/javascript">
        function DisplayMessage(message) {
            alert(message);
            silverLightControl = document.getElementById("Xaml1");
            silverLightControl.content.silverlightApplication.ChangeButtonContent(message);
        }
    </script>
</head>
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="myDIV" style="background:blue;width:100%;height:100%">
            <asp:Silverlight ID="Xaml1" runat="server" 
            Source="~/ClientBin/MySilverlightApplication.xap" 
            MinimumVersion="2.0.31005.0" Width="50%" Height="100%" 
            InitParameters="startPage=Page"/>
        </div>
    </form>
</body>
</html>

Запустите приложение и проверьте его работоспособность.

При нажатии на кнопку в Silverlight приложении меняется цвет фона у элемента div на HTML странице, а также происходит вызов JavaScript функции DisplayMessage, которая отображает сообщение. Данная JavaScript функция вызывает C# функцию ChangeButtonContent в классе Page. Функция ChangeButtonContent меняет текст на кнопке.
форум c# wpf silverlight