Silverlight в ASP.NET уеб сайт

admin — Thu, 27 Nov 2008 09:53:00 GMT

Въведение

Silverlight е нова технология от Майкрософт предназначена за разработването на RIA. Тя се вгражда във всеки браузър като плъг-ин и е платформено независима. В тази статия ще покажа как се вграждат Silverlight проект в ASP.NET сайт.

Какво е необходимо

Като за начало изтеглете и инсталирайте новата версия на VS 2008 бета 2 от тук. Повече за новостите във Visual Studio 2008 бета 2. За да разработвате Silverlight приложения, също така ви е необходимо и Silverlight Tools Alpha. След като ги инсталирате, опцията за Silverlight проект ще стане активна в VS.
За да виждаме резултата в браузър ни е необходимо Silverlight runtime/plugin 1.1 Alpha

Идеята

Silverlight е базиран на Xaml, което е XML базиран език за UI елементи. С помоща на Xaml е възможно разграничаването на визуалните елементи от програмната част. Това се реализира чрез ‘code-behind’ концепция позната ни от ASP.NET. На всеки Xaml файл съществува C# файл, който съдържа програмната логика за управлението на графичните елементи.
Когато създаваме Silverlight проект използвайки темплейт от VS 2008, някои файлове се генерират автоматично с образователна цел. Xaml файлът е интегриран в примерена HTML страница. В тази статия ще ви покажа как да извадите Xaml от HTML страницата и да го интегрирате в ASP.NET страница.

Проектите

1. Silverlight проекта
Ако сте инсталирали всичко правилно трябва да видите следният екран когато изберете от менюто File -> New Project:

Проекта ще бъде създаден след като натиснете OK. Следните страници са създадени по подразбиране:
- Page.xaml: това е страницата в която описвате UI елементите
- Page.xaml.cs: тук пишете програмната логика. Обикновен C# код
- Silverlight.js: това е javascript файл с който създавате Silverlight контрола в HTML/ASPX страницата за да показвате Xaml съдържанието.
- TestPage.html: HTML страницата която съдържа Silverlight контрола

2. ASP.NET сайтът
Трябва да добавим и асп проектът към общия solution. Add -> New Web Site.

3. Добавяме Silverlight към уеб сайта
Натискаме с десния бутон на прокта на уеб сайта и от падащото меню избираме Add Silverlight Link.

Това беше първата стъпка. Следващата е да разгледаме HTML страницата за да разберем кой код е отговорен за генерирането на Silverlight контрола в testpage.html:

<head>
    <title>Silverlight Project Test Page </title>
 
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
 
</head>
 
<body>
    <div id="SilverlightControlHost">
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>

Както се вижда, контрола е създаден с javascript функция, която се съдържа в Silverlight.js. Това което трябва да направим е да добавим този файл към асп сайта. После създаваме нов javascript файл, който ще съдържа в себе си кода от testpage.html.js

// JScript source code
 
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight( xamlPage )
{
    Silverlight.createObjectEx({
        source: xamlPage,
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.1",
            enableHtmlAccess: "true"
        },
        events: {}
    });
 
    // Give the keyboard focus to the Silverlight control by default
    document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
      silverlightControl.focus();
    }
 
}

С малка промяна(добавен параметър) кодът изглежда по следния начин:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Integrating Silverlight in aspx</title>
 
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="XamlPageCreation.js"></script>
 
</head>
<body>
    <form id="frmMain" runat="server">
    <div id="SilverlightControlHost" >
        <script type="text/javascript">
            createSilverlight( 'Page.xaml' );
        </script>
    </div>
    </form>
</body>
</html>

Какво ще показваме?

Засега имаме работещ ASP.NET/Silverlight пример който не показва нищо. Нека направим TextBlock със съобщение потребителя да избира файлове. При кликване на TextBlock-а се отваря FileBrowse диалог и след селекция на няколко файла, техните имена се показват в TextBlock контрола.

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="SilverlightSamplePrj.Page;assembly=ClientBin/SilverlightSamplePrj.dll"
        Width="400"
        Height="400"
        Background="#EEEEEE"
        >
 
  <TextBlock x:Name="txtFileName"
             Canvas.Top="5" Canvas.Left="5" 
             Foreground="Black"
             Text="Click for OpenFileDialog"
             MouseLeftButtonDown="OnClick"/>
 
</Canvas>

Ето и кода в C# файла:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SilverlightSamplePrj
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();
        }
 
        public void OnClick(object o, MouseEventArgs e)
        {
            txtFileName.Text = "";
            string NL = Environment.NewLine;
            OpenFileDialog ofDlg = new OpenFileDialog();
            ofDlg.EnableMultipleSelection = true;
            if (ofDlg.ShowDialog() == DialogResult.OK)
            {
                foreach (FileDialogFileInfo fdFileInfo in ofDlg.SelectedFiles)
                {
                    txtFileName.Text += fdFileInfo.Name + NL;
                }
            }
        }
    }
}

Заключение

Това е достатъчно за начало, очакваме следващите версии на Silverlight където се надяваме да има предефинирани контроли плюс куп други възможности който да утвърдят Silverlight като Технологията за RIA.