Creating Silverlight Controls and Web Service with ASP.NET Futures

In this post I will demonstrates how Silverlight 1.1 can received and display data from a web service using the controls from ASP.NET Futures package.

Microsoft ASP.NET Futures July 2007

The Microsoft ASP.NET Futures July 2007 release contains an early developer preview of features providing new functionality for ASP.NET and Silverlight.

There are two new ASP.NET server controls: a Media server control for integrating media sources into your web application, such as audio (WMA) and video (WMV), and a XAML server control that enables you to reference your own XAML and associated JavaScript files.

Creating the Web Application

After installing the Microsoft ASP.NET Futures July 2007, open Visual Studio 2008, and create new project of type ASP.NET Ajax Futures Web Application or of type ASP.NET Futures Ajax Web Site.

Add new service which the Silverlight control can get the data from. Lets call it HelloService.asmx.

ASP.NET Futures Enabled Web Application: Add new Web Service

To allow this web service to be called from script using ASP.NET Ajax, uncomment the ScriptService attribute which allowed us to interact with the Xaml object that is going to display the result from this service.

The following sample code describes the web service:

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class HelloService : System.Web.Services.WebService
    {
        [WebMethod]
        public String HelloWorld(String name)
        {
            return String.Format("Hello World {0}", name);
        }
    }

Add Silverlight Project

To display the result from the web service inside a Silverlight control, lets add Silveright Project called SilverlightControlDisplay as showing in the following image:

ASP.NET Futures Enabled Web Application: Add new Silverlight Project

Page.Xaml

Add to Page.Xaml file a background color and a text block as showing in the following sample code:

<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="SilverlightControlDisplay.Page;assembly=ClientBin/SilverlightControlDisplay.dll"
        Width="640"
        Height="480"
        >
  <Canvas.Background>
    <LinearGradientBrush>
      <GradientStop Color="Blue" Offset="0" />
      <GradientStop Color="Orange" Offset="1" />
    </LinearGradientBrush>
  </Canvas.Background>
  <TextBlock
    x:Name="tb" 
    Text="Hello World!" 
    FontSize="36" 
    Canvas.Left="10" 
    Canvas.Top="10" />
</Canvas>

Add a Web Reference inside the Silverlight Project to the service HelloService.asmx:

ASP.NET Futures Enabled Web Application: Add Web Reference

Page.Xaml.cs

Add MouseLeftButtonDown event lestener to the Silverlight Control, retrieve the data from the web service and display it:

    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();
 
            tb.MouseLeftButtonDown += new MouseEventHandler(tb_MouseLeftButtonDown);
        }
 
        void tb_MouseLeftButtonDown(object sender, MouseEventArgs e)
        {
            // var - C# 3.0 - The compiler infered the type.
            var svc = new localhost.HelloService();
 
            // Get the data from the Web Service
            String result = svc.HelloWorld(new Random().Next());
 
            // Set the width of the text block 
            tb.Width = this.Width;
 
            tb.Text = result;
        }
    }

The asp:Xaml Control

The asp:Xaml control enables the page Default.aspx do display Xaml like any other ASP control. The content of Default.aspx:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Xaml runat="server" Width="640" Height="240" XamlUrl="~/Page.Xaml" />

<div>

In order to the Web Application to recognize the Page.Xaml we can right click on the Web Application and select 'Add Silverlight Link...' which add a Page.Xaml copy into the Web Application, and ClientBin folder, which contains the assembly of the Silverlight Project.

ASP.NET Futures Enabled Web Application: Add Silverlight Link...