AjaxControlToolkit, Silverlight 和 JavaScript

• 下载源代码 - 20.69 KB

引言

在本文中，作者描述了如何组合 AjaxControlToolkit (Ajax, ASP.NET)、Silverlight (XamlControl) 和 JavaScript。在示例项目中，我们正在一个 JavaScript 函数中旋转一个 Canvas，该函数由一个滑块调用。

有关更多有趣的 Silverlight 文章，请访问 Codegod's Silverlight section。

概念

使用 Silverlight，可以创建增强且丰富的用户界面，这些界面可以在浏览器中显示。这些用户界面使用描述语言 XAML 定义。使用 ASP.NET Futures，您可以使用 XamlControl 将此类 XAML 文件集成到 WebForm 中。本文的目标是展示如何通过 JavaScript 操作在 XAML 文件中定义的对象。这意味着我们有三种技术协同工作：ASP.NET、Ajax 和 Silverlight。作为输入控件，我们使用基于 Ajax.NET 的 AjaxControlToolkit 中的 SliderExtender。

必备组件

在开始之前，我们必须安装所需的软件。

1. 必须在您的机器上安装 Visual Studio 2005
2. 从 此处 下载并安装 ASP.NET Ajax Essential Components。 这些是
• ASP.NET 2.0 AJAX Extensions 1.0
• ASP.NET Futures (2007 年 7 月)
• ASP.NET AJAX Control Toolkit

创建网站

安装先决条件后，我们可以从一个新的 AjaxControlToolkit 网站开始。选择文件->新建网站->AjaxControlToolkit 网站。现在您的网站包含对 *AjaxControlToolkit.dll* 和 *Microsoft.Web.Preview.dll* 的引用。第一个是 Toolkit 的控件所必需的，最后一个是 ASP.NET Futures 控件 (XamlControl) 所必需的。

示例

在我们的示例网站中，我们希望在 SilverLight-Canvas 上显示带有边框的图像。除此之外，我们希望让用户可以使用滑块控件旋转显示的图像。当用户更改滑块位置时不应有回发，因此必须通过客户端脚本旋转图像。好的，让我们首先添加一个带有 Canvas 的 XAML 页面。这是文件 *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 像素的 Canvas。它具有线性渐变作为背景，以及一个在中间定义的、大小为 200x200 像素的 Canvas，其中包含图像。此 Canvas 可以通过标签 RotateTransform 旋转。我们想要做的是在用户更改滑块位置时，在 JavaScript 函数中操作属性 Angle。

网站的布局

这是控件的布局

XamlControl 是一个 ASP.NET 服务器控件。它被添加到 WebForm *Default.aspx* 中。该控件具有一个名为 XamlUrl 的属性，它是我们要显示的 XAML 文件的名称。在 XAML 控件下方，我们放置一个 TextBox，我们想将其用作滑块控件。现在您会问：如何将 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 交互

我们希望滑块更改内部 Canvas 的旋转角度。这意味着我们必须对滑块的值（TextBox）的 change 事件做出反应。因此，我们在 *Default.aspx* 的 Page_Load 事件处理程序中注册 TextBox Slider1 的 JavaScript 事件处理程序 onchange。

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(Slider1);
    Slider1.Attributes.Add("OnChange",
        "sliderChanged('" + Slider1.ClientID + "');");
}

现在，当滑块的值更改时，将调用函数 sliderChanged。接下来是更改旋转角度，这意味着我们必须在 JavaScript 函数中获取 Canvas 以进行旋转并操作 Angle 属性。XamlControl 具有一个属性 ClientXamlLoad。您可以在此处定义在 XamlControl 中的 XAML 完全加载时调用的 JavaScript 方法。在此函数中，我们可以获取 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>

没有太多代码，不是吗？结果看起来真的很棒。祝您玩得开心，该项目已附加。

历史

• 2008年5月27日：初始发布