Walkthrough: Integrating XAML into an ASP.NET Web Site Using JavaScript
Introduction
This walkthrough introduces the ASP.NET server controls for Silverlight, which you can use to provide a Rich Internet Application (RIA) experience in your ASP.NET Web site.
You can use the Silverlight control in the following ways:
This walkthrough shows you in outline how to use the Silverlight server control to reference XAML and how to create a JavaScript library that handles user interaction with the XAML.
In order to complete this walkthrough, you will need:
Creating an ASP.NET Web Site
To begin, you will create an ASP.NET Web Site in Visual Studio 2008.
To create a new ASP.NET Web site in Visual Studio
-
In the File menu, click New Web Site.
-
Under Visual Studio installed templates, select ASP.NET Web Site.
-
In the Location list, select File System.
-
Specify a name, path, and language for the application, and then click OK.
Creating the XAML
You must create XAML that can be referenced by the Silverlight control. Typically, you use a tool such as Microsoft Expression Blend 2 to perform this operation. For more information about Microsoft Expression Blend 2, see the Microsoft Expression Web site.
Microsoft Expression Blend can create a Web application project. You can share the Web application project with Visual Studio 2008 or you can add the project's XAML file to the Web site. The following procedure describes how to copy a XAML file to the Web site.
To add a XAML file to the Web site
-
In Solution Explorer, right-click the Web site name and then click Add New Item.
-
Select the Text File template, name the file calculator.xaml, and then click Add.
-
In the Silverlight Control topic, click the View Source link and then copy the XAML in the calculator.xaml file.
-
In the new text file, paste the result into the lower pane, overwriting any existing content.
Adding a Silverlight Control to an ASP.NET Web Page
Next, you will add and configure a Silverlight control in the Web page and use it to reference the XAML file that you added previously.
To add a Silverlight control to the Web page
-
In Solution Explorer, double-click the Default.aspx file to open it in the designer.
-
Switch to Design view.
-
From the AJAX Extensions tab of the Toolbox, drag a ScriptManager control onto the page.
-
From the Silverlight controls tab of the Toolbox, drag a Silverlight control onto the page and drop it under the ScriptManager control.
-
In the properties grid, set the Height and Width properties to values that will enable you to see the result of running the XAML in the page, such as 340 by 320.
-
Set the Source property to the location of the XAML file.
-
Run the Web page.
The control loads the XAML and you can interact with the application.
Creating a JavaScript Library to Manage the Silverlight Control
In this section, you will create a JavaScript library that contains a type that you can use with the Silverlight control to manage it. In the Silverlight control, you can reference the .js file that contains the type.
To create a JavaScript library to manage the Silverlight control
-
In Solution Explorer, right-click the Web site name and then click Add New Item.
-
Select the AJAX Client Library template, name the file calculator.js, and then click Add.
-
In the Silverlight Control topic, click the View Source link and then copy the script in the calculator.js file.
-
In the new calculator.js file, paste the script.
-
Close the .js file.
Referencing the JavaScript Library in the Silverlight Control
You can now reference the JavaScript library for the Silverlight control in the Web page that you have built.
To reference the JavaScript library in the Silverlight control
-
In the Default.aspx page, switch to Source view.
-
After the @ Page directive, add an the following @ Register directive if it is not already added:
<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
-
In the markup for the Silverlight control, set the ScriptType property to the fully qualified name (Custom.Calculator) of the JavaScript class that you created previously.
Notice that when you type "S", IntelliSense enables you to select the ScriptType property.
The following example shows the markup for the Silverlight server control.
<asp:Silverlight runat="server" id="Silverlight1"
Source="Custom.Xaml"
ScriptType="Custom.Calculator">
</asp:Silverlight>
-
Inside the ScriptManager control markup, add a Scripts element.
-
Inside the Scripts element, add the following markup:
<asp:ScriptReference Name="SilverlightControl.js" Assembly="System.Web.Silverlight"/>
<asp:ScriptReference Path="calculator.js" />
These references include the client-script libraries that are required in order to run the calculator. This includes the JavaScript library that you created earlier in the walkthrough.
-
Press CTRL+F5 to run the Silverlight calculator example.
Note
When you execute the page, you might be prompted with an installation logo instead of the Silverlight plug-in and control. If so, install Silverlight and try again. When Silverlight is running you will be able to interact with the calculator that you created in this walkthrough.
-
Test the calculator by performing calculations.
This topic is ASP.NET Extensions documentation and is unsupported by Microsoft. Blank topics are included as placeholders and existing content is subject to change in future releases.