Add a new class called Person to the project, and enter the following class definition:

public class Person
{
   public string Name { get; set; }
   public string Age { get; set; }
}

Add a new .asmx web service to the project called GetData.asmx.

Add the following using directive to GetData.asmx.cs:

using System.Web.Script.Services;

Uncomment the following attribute in the GetData class:

[System.Web.Script.Services.ScriptService]

Now create a new method to return a list of people. Note the call to System.Threading.Sleep();. This is to slow down the service so you can see the results appear (you might want to remove the sys-template style to see the effect that latency can have):

[WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public List<Person> GetPeople()
        {
            System.Threading.Thread.Sleep(2000);

            List<Person> People = new List<Person>();

            People.Add(new Person { Name = "Alex Mackey", Age = "28" });
            People.Add(new Person { Name = "Matt Lacey", Age = "31" });
            People.Add(new Person { Name = "Mark Clugston", Age = "28" });

People.Add(new Person { Name = "Craig Murphy", Age = "33" });
            People.Add(new Person { Name = "Chris Hay", Age = "32" });
            People.Add(new Person { Name = "Andy Gibson", Age = "21" });

            return People;
        }

Copy the file dataviewProgrammatic.htm, and rename the new copy to dataviewAsmx.htm.

Replace the existing <script> block with the following code:

<script type="text/javascript">

Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function () {

    Sys.create.dataView('#peopleView',
    {
        dataProvider: "GetData.asmx",
        fetchOperation: "GetPeople",
        autoFetch: "true"
    });

});
</script>

Right-click dataviewAsmx.htm, and select View in Browser. After about two seconds, you should see the results of the web service bound to the template.

Add a new Ajax-enabled WCF service (similar to a standard WCF service but with some additional attributes to enable JavaScript methods calls) to the project called GetDataFromWCF.svc.

Now add the following method to the new web service:

[OperationContract]
public Person GetPerson(string Name)
{
   //System.Threading.Thread.Sleep(2000);

   List<Person> People = new List<Person>();

   People.Add(new Person { Name = "Alex Mackey", Age = "28" });
   People.Add(new Person { Name = "Matt Lacey", Age = "31" });
   People.Add(new Person { Name = "Barry Dorrans", Age = "78" });
   People.Add(new Person { Name = "Craig Murphy", Age = "33" });
   People.Add(new Person { Name = "Chris Hay", Age = "32" });
   People.Add(new Person { Name = "Andy Gibson", Age = "21" });

   return People.FirstOrDefault(p => p.Name == Name);
}

Replace the current <script> block in webserviceWCF.htm with the following code:

<script type="text/javascript">

//We need Sys.scripts.WebServices in order to interact with the WCF service
Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function () {

    Sys.create.dataView('#peopleView',
    {
        dataProvider: "GetDataFromWCF.svc",
        fetchOperation: "GetPerson",
        fetchParameters: { Name: "Alex Mackey" },
        autoFetch: "true"
    });

});
</script>