Home > ASP.NET and Silverlight > Using the Xaml Control with JavaScript

ASP.NET Futures (July 2007): Integrating XAML into an ASP.NET Web Application with JavaScript

Prerequisites

To complete the walkthrough, you need the following.

If you are using Microsoft Visual Studio Code Name "Orcas" Beta 2:

• Microsoft Silverlight 1.0. For download information, visit the Silverlight download site.
• The ASP.NET Futures release (July 2007 or later). For download information visit the ASP.NET Futures (July 2007) download site. The .msi installer file includes a Visual Studio Content Installer (.vsi) for creating a blank ASP.NET Futures Web Site in Visual Studio.
• A XAML file to reference in your application. You can use Microsoft Expression Blend to edit your XAML. However, this walkthrough does not assume that you are using Expression Blend to create a XAML file.

If you are using Visual Studio 2005:

• Microsoft Silverlight 1.0. For download information, visit the Silverlight download site.
• The Microsoft ASP.NET AJAX Extensions 1.0 package installed on your computer. For download information, visit the ASP.NET AJAX 1.0 Web site.
• The ASP.NET Futures release (July 2007 or later). For download information visit the ASP.NET Futures (July 2007) download site. The .msi installer file includes a Visual Studio Content Installer (.vsi) for creating a blank ASP.NET Futures Web application in Visual Studio.
• A XAML file to reference in your application. You can use Microsoft Expression Blend to edit your XAML. However, this walkthrough does not assume that you are using Expression Blend to create a XAML file.

Creating an ASP.NET Futures (July 2007) Web Site

To begin, you will create an ASP.NET Futures (July 2007) Web application in Visual Studio. When you use the Visual Studio project template to create a new Web application, Visual Studio creates a normal Web site folder structure with the following additional items:

• A Bin folder that contains the assemblies for the Futures release.
• A Web.config file that is configured for the features in the ASP.NET Futures (July 2007) release.
• A Default.aspx page that contains a ScriptManager control.

To create a new ASP.NET Futures (July 2007) Web Site in Visual Studio

1. In the File menu, click New, and then click Web Site.
2. In the New Web Site dialog box, select the ASP.NET Futures (July 2007) Web Site template.
3. In the Location list, select File System.
4. 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 your Xaml control. Typically, you use a tool such as Microsoft Expression Blend to perform this operation. When you create XAML using Microsoft Expression Blend, you can share the Web Application Project from Microsoft Expression Blend with Visual Studio 2005, or you can simply add the XAML file to your Web Site. The following walkthrough describes the latter.

Adding the XAML to a Web Site in Visual Studio

After you have created or obtained a XAML file, you can add it to the Web Site.

To add a XAML file to a Web Site

1. In Solution Explorer, right-click the Web Site project name and then click Add Existing Item ....
2. Browse to the location of your XAML file and then click OK.

Adding a Xaml Control to an ASP.NET Web Page

Next, you will add and configure a Xaml control in the Web page and use it to reference the XAML file that you have on disk.

To add a Xaml control to your Web page

1. In Solution Explorer, double-click the Default.aspx file to open it in the designer.
2. Switch to Design view.
3. From the ASP.NET Futures tab of the toolbox, drag the a Xaml control onto the page. Drop the control below the ScriptManager control.
4. 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 320 x 320).
5. Make sure that the Xaml control in the Web page is selected.
6. Switch to Source view.
7. Set the XamlUrl property to the location of the XAML file. Notice that as soon as you type X, IntelliSense enables you to select the XamlUrl property.

If you run the Web page now, the control will load the XAML. You can also use JavaScript to manipulate the XAML. For example, you can start an animation based on a user gesture in the page.

Creating a JavaScript Library to Manage the Xaml Control

In this section, you will create a JavaScript library that contains a type that you can use with the Xaml control to manage it. In the Xaml control, you can reference the .js file that contains the type.

To create a JavaScript library to manage the Xaml control

1. In Solution Explorer, right-click the Web Site project name and then click Add New Item ....
2. Select JScript, name the file Custom.js, and then click OK.
3. Copy the following JavaScript code and paste it into the file, replacing any code already in the file. When you have finished, save and close the file.

		
Type.registerNamespace("Custom");

Custom.MyCustomType = function(element) {
  Custom.MyCustomType.initializeBase(this, [element]);
	
  // Define private fields
}

Custom.MyCustomType.prototype = {
  xamlInitialize: function() {
    Custom.MyCustomType.callBaseMethod(this, 'xamlInitialize');
		
    // Define hookups to XAML elements
  },
  ..
  // Add additional handling functions
}
Custom.MyCustomType.registerClass('Custom.MyCustomType', Sys.Preview.UI.Xaml.Control);

Referencing the JavaScript Library in the Xaml Control

You can now reference the JavaScript library in the Xaml control.

To reference the JavaScript library in the Xaml control

1. In the Default.aspx page, switch to Source view.
2. In the markup for the Xaml control, set the ClientType property to the fully qualified name (Custom.MyType) of the type you created previously. Notice that when you type C, IntelliSense enables you to select the ClientType property.
3. Between the opening and closing tags of the Xaml control, type < and select the Scripts entry from the statement completion window.
4. Inside the Scripts element, add <asp:scriptreference path=" and enter the URL of the .js file, and then complete the tag.

The following example shows the markup for the Xaml control.

		
<asp:xaml runat="server" id="Xaml1" 
        XamlUrl="Custom.Xaml" ClientType="Custom.MyCustomType">
  <Scripts>
    <asp:scriptreference path="Custom.js" />
  </Scripts>
</asp:xaml>  

Declarative & JavaScript



5. Run the page by pressing CTRL+F5.