AjaxControlToolkit, Silverlight и JavaScript
Данная статья об объединении Silverlight и JavaScript на веб-странице ASP.NET
Введение
В этой статье автор описывает, как объединить AjaxControlToolkit (Ajax, ASP.NET), Silverlight (XamlControl) и JavaScript. В примере проекта мы вращаем Canvas (холст) с помощью функции JavaScript, вызываемой ползунком.
Принцип
При помощи Silverlight можно создавать усовершенствованные пользовательские интерфейсы с широкими возможностями, которые могут быть отображены в браузере. Эти пользовательские интерфейсы определяются при помощи описательного языка XAML. При помощи ASP.NET фьючерсов, можно использовать XamlControl, чтобы встроить такой файл XAML в WebForm (веб-форма). Цель этой статьи – показать, как можно манипулировать объектами, определенными в файле XAML, при помощи JavaScript. Это означает, что вместе работают три технологии: ASP.NET, Ajax и Silverlight. Как средство управления вводом, используется SliderExtender из AjaxControlToolkit (набор инструментов управления Ajax), основанный на Ajax.NET.
Предварительные требования
Перед началом работы нужно установить необходимое программное обеспечение.
1. Visual Studio 2005 должна быть установлена на вашем компьютере
2. Скачайте и установите существенные компоненты Ajax ASP.NET отсюда. В них входят:
o ASP.NET 2.0 AJAX Extensions 1.0
o ASP.NET Futures (июль 2007)
o ASP.NET AJAX Control Toolkit
Создание веб-сайта
После установки необходимого программного обеспечения можно начать с нового веб-сайта AjaxControlToolkit. Выберите Файл->Новый веб-сайт->Веб-сайт AjaxControlToolkit. Теперь ваш веб-сайт содержит ссылки на AjaxControlToolkit.dll и Microsoft.Web.Preview.dll. Первый нужен для элементов управления Набора инструментов, второй нужен для элементов управления ASP.NET Futures (XamlControl).
Пример
В нашем тестовом веб-сайте мы хотим вывести на экран изображение с рамкой на «холсте» SilverLight. Более того, мы хотим дать пользователю возможность вращать выведенное изображение с помощью элемента управления “ползунок”. Не должна происходить обратная передача, когда пользователь меняет положение ползунка, так как вращать изображение должен скрипт на стороне клиента. Сначала добавим страницу XAML с Canvas (холст). Здесь содержимое файла RotatingImage.xaml:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
x:Name="rootCanvas"
>
<Canvas.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFAAAAAA" Offset="0"/>
<GradientStop Color="#FFE2EAFF" Offset="0.5"/>
<GradientStop Color="#FF666666" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
<Canvas Width="200" Height="200" x:Name="Cover" Canvas.Left="280" Canvas.Top="250">
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransform x:Name = "rotObj" CenterX="0.5" CenterY="0.5" Angle="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Image Source="img/codegod.jpg" Stretch="Fill" Width="215" Height="120"/>
<Path Stroke="White" Data="M0,0L215,0 215,120 0,120z" StrokeThickness="15"/>
</Canvas>
</Canvas>
Мы имеем холст размером 640x480 пикселей. Он имеет линейный градиент, так как фон и холст размером 200x200 пикселей определены в центре, удерживая изображение. Этот холст будет вращаться при помощи тега RotateTransform. Нам нужно манипулировать свойством Angle (угол) в функции JavaScript, когда пользователь меняет положение ползунка.
Компоновка веб-сайта
Ниже показана компоновка элементов управления:
XamlControl – элемент управления сервер ASP.NET. Он добавлен в веб-форму Default.aspx. Элемент управления имеет свойство под названием XamlUrl. Это имя файла XAML, который мы хотим отобразить. Ниже элемента управления XAML расположен aTextBox, используемый в качестве элемента управления “ползунок’. Теперь вы спросите: Как TextBox можно использовать в качестве ползунка? AjaxControlToolkit предоставляет набор расширителей элементов управления, способных расширять функциональность и внешний вид серверных элементов управления ASP.NET. Здесь показана разметка для SliderExtender.
<ajaxtoolkit:sliderextender ID="SliderExtender1" runat="server"
BehaviorID="Slider1"
TargetControlID="Slider1"
Minimum="0"
Maximum="360"
Steps="360" RaiseChangeOnlyOnMouseUp="False" />
Rotate: <asp:TextBox ID="Slider1" runat="server" AutoPostBack="True"
style="right:0px" Text="0"/>
Как видно, он имеет BehaviourID (идентификатор поведения), указывающий на элемент управления, который должен вести себя как ползунок. TargetControlID указывает на элемент управления, который должен хранить значение ползунка.
Взаимодействие с JavaScript
Нам нужен ползунок, чтобы изменять угол поворота внутреннего холста. Это значит, что мы должны реагировать на событие изменения значения ползунка (TextBox). Поэтому мы регистрируем обработчик события JavaScript «при изменении» TextBox Slider1 в обработчике события Page_Load (загрузка страницы) Default.aspx.
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Slider1);
Slider1.Attributes.Add("OnChange",
"sliderChanged('" + Slider1.ClientID + "');");
}
Теперь функция sliderChanged (ползунок изменен) вызывается, когда изменяется значение ползунка. Затем нужно менять угол поворота, что означает, что нужно заставлять холст вращаться в нашей функции JavaScript и манипулировать свойством Angle. XamlControl имеет свойство ClientXamlLoad. В нем можно задать метод JavaScript, вызываемый, когда XAML внутри XamlControl полностью загружен. В этой функции мы можем получить элемент Silverlight RotateTransform и сохранить его в локальной переменной. Эта переменная используется в функции sliderChanged, чтобы получить ее свойство Angle и изменить его значение. Здесь приведен код:
<script type="text/javascript" language="javascript">
var _rotObj;
function SL_Loaded(sender, args)
{
// Get the RotateTransform-object of the Xaml-Canvas
_rotObj = document.getElementById("Xaml1").content.findName('rotObj');
}
function sliderChanged( id )
{
// set the new rotation angle on slider-change
var slider = document.getElementById(id);
var rotAngle = slider.value;
_rotObj.Angle = rotAngle;
}
</script>
Не много кода, не так ли? И результат выглядит приятно. Развлекайтесь с ним, проект прилагается.