Walkthrough: Using an ASP.NET AJAX Template

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

This topic is the first in a series of walkthroughs and how-to topics that show how to use Microsoft ASP.NET AJAX client templates and data-binding features. The first part of this walkthrough shows how to create a WCF Web service. This Web service is used for the other topics in this series as a data source for the ASP.NET AJAX DataView client control.

Other topics in this series include the following:

Tasks illustrated in this walkthrough include the following:

Creating a WCF Web service
Instantiating the ASP.NET AJAX DataView client control in an AJAX Web form or in an HTML page.
Creating an ASP.NET AJAX template to render data in a browser.

Prerequisites

In order to complete this walkthrough, you will need:

Visual Studio 2010 or Visual Web Developer 2010 Express.

Creating the WCF Web Service

To provide a data source that you can use to work with the ASP.NET AJAX template, you will create a read-only WCF Web service that contains fictitious company data.

To create a WCF Web service

Open Visual Studio or Visual Web Developer Express.
In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Visual Studio installed templates, click ASP.NET Web Site.
Enter a name for the Web site and then click OK.
In Solution Explorer, right-click the project name and then click Add New Item.

The Add New Item dialog box is displayed.
Under Visual Studio installed templates, click AJAX-enabled WCF Service.
In the Name box, enter "CompanyService.svc" and then click Add.
In Solution Explorer, open the App_Code folder and double-click the CompanyService.cs file.

Replace the contents of the file by using the following code:

Imports System
Imports System.Linq
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.ServiceModel.Activation
Imports System.ServiceModel.Web
Imports System.Collections.Generic

<ServiceContract([Namespace]:="")> _
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _
Public Class CompanyService
    Shared companies As New List(Of CompanyInfo)()
    Shared isInitialized As Boolean = False

    Private Sub New()
        If isInitialized = False Then
            Dim c1 As New CompanyInfo()
            c1.CompanyName = "Alpine Ski House"
            c1.Contact = "Gustavo Achong"
            c1.Url = "https://www.alpineskihouse.com"
            c1.Income = 1255011
            c1.Expenses = 495222
            companies.Add(c1)

            Dim c2 As New CompanyInfo()
            c2.CompanyName = "Coho Vineyard"
            c2.Contact = "Mingda Pan"
            c2.Url = "https://www.cohovineyard.com"
            c2.Income = 542910
            c2.Expenses = 349200
            companies.Add(c2)

            Dim c3 As New CompanyInfo()
            c3.CompanyName = "Humongous Insurance"
            c3.Contact = "Mark Harrington"
            c3.Url = "https://www.humongousinsurance.com"
            c3.Income = 5776001
            c3.Expenses = 2650040
            companies.Add(c3)

            Dim c4 As New CompanyInfo()
            c4.CompanyName = "Lucerne Publishing"
            c4.Contact = "Stanislav Pesotsky"
            c4.Url = "https://www.lucernepublishing.com"
            c4.Income = 682450
            c4.Expenses = 699045
            companies.Add(c4)

            Dim c5 As New CompanyInfo()
            c5.CompanyName = "Northwind Traders"
            c5.Contact = "Alicia Thornber"
            c5.Url = "https://www.northwindtraders.com"
            c5.Income = 51003500
            c5.Expenses = 19560021
            companies.Add(c5)

            isInitialized = True
        End If
    End Sub

    <OperationContract()> _
    Public Function GetCompanies() As CompanyInfo()
        Return DirectCast(companies.ToArray(), CompanyInfo())
    End Function

End Class
<DataContract()> _
Public Class CompanyInfo
    <DataMember()> _
    Public CompanyName As String
    <DataMember()> _
    Public Contact As String
    <DataMember()> _
    Public Url As String
    <DataMember()> _
    Public Income As Double
    <DataMember()> _
    Public Expenses As Double
End Class

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Collections.Generic;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode =
    AspNetCompatibilityRequirementsMode.Allowed)]
public class CompanyService
{
    static List<CompanyInfo> companies =
        new List<CompanyInfo>();
    static bool isInitialized = false;

    private CompanyService()
    {
        if (isInitialized == false)
        {
            CompanyInfo c1 = new CompanyInfo();
            c1.CompanyName = "Alpine Ski House";
            c1.Contact = "Gustavo Achong";
            c1.Url = "https://www.alpineskihouse.com";
            c1.Income = 1255011;
            c1.Expenses = 495222;
            companies.Add(c1);

            CompanyInfo c2 = new CompanyInfo();
            c2.CompanyName = "Coho Vineyard";
            c2.Contact = "Mingda Pan";
            c2.Url = "https://www.cohovineyard.com";
            c2.Income = 542910;
            c2.Expenses = 349200;
            companies.Add(c2);

            CompanyInfo c3 = new CompanyInfo();
            c3.CompanyName = "Humongous Insurance";
            c3.Contact = "Mark Harrington";
            c3.Url = "https://www.humongousinsurance.com";
            c3.Income = 5776001;
            c3.Expenses = 2650040;
            companies.Add(c3);

            CompanyInfo c4 = new CompanyInfo();
            c4.CompanyName = "Lucerne Publishing";
            c4.Contact = "Stanislav Pesotsky";
            c4.Url = "https://www.lucernepublishing.com";
            c4.Income = 682450;
            c4.Expenses = 699045;
            companies.Add(c4);

            CompanyInfo c5 = new CompanyInfo();
            c5.CompanyName = "Northwind Traders";
            c5.Contact = "Alicia Thornber";
            c5.Url = "https://www.northwindtraders.com";
            c5.Income = 51003500;
            c5.Expenses = 19560021;
            companies.Add(c5);

            isInitialized = true;
        }
    }

    [OperationContract]
    public CompanyInfo[] GetCompanies()
    {
        return (CompanyInfo[])companies.ToArray();
    }

}
[DataContract]
public class CompanyInfo
{
    [DataMember]
    public string CompanyName;
    [DataMember]
    public string Contact;
    [DataMember]
    public string Url;
    [DataMember]
    public double Income;
    [DataMember]
    public double Expenses;
}

Save and close the file, and then save the project.

Instantiating the DataView Client Control in JavaScript

You can use the ASP.NET AJAX DataView client control and an associated item template to create UI templates in markup that can be bound to data. The data that you display by using the DataView control can be from a WCF Web service or an ADO.NET data service.

To display data from the WCF Web service that you created in the last section, you must create an instance of the ASP.NET AJAX DataView client control and create an associated template. You can instantiate the control in the following ways:

By using JavaScript in a script block.
By using markup.

This walkthrough shows how to instantiate the control by using JavaScript. For information about how to instantiate the control in markup, see How to: Instantiate an AJAX DataView Control Declaratively.

To add an AJAX Web form and instantiate the DataView control by using JavaScript

In Solution Explorer, right-click the project name and then click Add New Item.

The Add New Item dialog box is displayed.
Under Visual Studio installed templates, click AJAX Web form.

Note

Be certain to target version 4 of the .NET Framework to use the appropriate ASP.NET AJAX functionality.

Type a name for the page and then click Add.

Add a style element inside the head element and then add the following content:

<style type="text/css">
  .sys-template { display:none; visibility:hidden; }
</style>

Add a ScriptReference control under the ScriptManager control by using the following code:

<asp:ScriptManager ID="sm" runat="server">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
    </Scripts>
</asp:ScriptManager>

Add a script element inside the head element that has the type attribute set to text/javascript.

Copy the following code into the script element:

<script type="text/javascript">
    function pageLoad() {
        $create(
            Sys.UI.DataView,
            {
                 autoFetch: "true",
                 dataProvider: "CompanyService.svc",
                 fetchOperation: "GetCompanies"
            },
            {},
            {},
            $get("companyListView")
        );
    }
</script>

This code instantiates a DataView control that provides data to the template.

As an alternative, you can instantiate the DataView client control in an HTML page. If you chose to create an HTML Page, you will need to add references to the static script files for the ASP.NET AJAX Library. For more information, see the ASP.NET AJAX Client Script Libraries section of ASP.NET AJAX Overview. For information about how to download the ASP.NET AJAX script files, such as the latest ASP.NET AJAX Preview release, see the ASP.NET AJAX Web site.

Creating an ASP.NET AJAX Template

To create a template that displays data for the DataView control, you attach the DataView control to a container element in the markup. You can then add elements and expressions inside the template to render data.

The syntax for expressions is JavaScript. For example, the following code could be used to format a date:

To create an ASP.NET AJAX template

Inside the body element, add a div element to the page.
Inside the div element, add an unordered list element (ul) and set the ID of the ul element to companyListView.

This is the ID that is used by the code that you created previously in order to attach the DataView control to this ul element. The ul element is the container, and the DataView control renders dynamic content inside it. The ul element is also the container element for the ASP.NET AJAX template that is used by the DataView control.
Set the class attribute of the ul element to sys-template.

The class that you assign to the item template (sys-template) is hidden so that the blank template itself is not displayed on the page along with the data.
Inside the ul element, add the following li element and expression:
```
<li>{{ CompanyName }}</li>
```
This specifies that the list will contain individual items that display the company name.

The following example shows the complete div element for the template.
```
<div>
  <ul id="companyListView" class="sys-template">
    <li>{{ CompanyName }}</li>
  </ul>
</div>
```
Save the project.
Press CTRL+F5 to run the page.

The data from the WCF Web service is displayed on the page as an unordered list, as specified in your template.

Code

The following example shows the code for a complete ASP.NET page that includes a DataView control and a template.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Company List</title>
  <style type="text/css">
    .sys-template { display:none; }
  </style>
  <script type="text/javascript">
      function pageLoad() {
          $create(
              Sys.UI.DataView,
              {

               autoFetch: "true",

                  dataProvider: "CompanyService.svc",
                  fetchOperation: "GetCompanies"
              },
              {},
              {},
              $get("companyListView")
          );
      }
  </script>
</head>
<body>
  <h1>Company List</h1>
    <form id="Form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
            </Scripts>
        </asp:ScriptManager>
    </form>
    <ul id="companyListView" class="sys-template">
      <li>{{ CompanyName }}</li>
    </ul>
</body>
</html>