1. Create an ASP.NET AJAX CTP-Enabled Web
Site
Launch Visual Studio 2005 and then select menu item "File | New Website…" to create a
new website using the template named "ASP.NET AJAX CTP-Enabled Web Site",
and name the project AJAXCTPDev311 (select Visual C# as
the built-in language). After that, the system should automatically added
references to the necessary assemblies—Microsoft.Web.Preview.dll and System.Web.Extensions.dll.
And also, you can see a ScriptManager server control automatically added to the
page. Simply put, this server control acts as the headquarters of whole ASP.NET
AJAX framework.
Next, with a little modification, page Default.aspx finally
looks like Figure 5:
Figure 5: The design-time sample web page
With nothing explained, let's first look at the source code
behind this aspx page:
Listing 4
<head runat="server">
<title>Client-Side Data Binding Test</title>
</head>
<body style="font-size: 12pt">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="BookDataService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview"
Name="PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<div style="text-align: left">
<span style="color: #0000cc"><span style="font-size: 24pt">
<span>
Client-Side Data Binding Test</span>
<br />
</span></span>
</div>
<br />
<div id="header">
<input type="button"
id="Button5" value="Get Book by Title" />
<br />
</div>
<div id="Book titles to be listed here">
</div>
<div id="Books"></div>
<div style="display:none;">
<div id="LayoutTemplate">
<div id="ItemTemplateParent">
<div id="ItemTemplate">
<span id="BookTitle"></span>
</div>
</div>
</div>
<div id="emptyTemplate">
empty...
</div>
</div>
<script type="text/xml-script">
<span lang=PT><page
xmlns="http://schemas.microsoft.com/xml-script/2005">
<span lang=PT> <components>
<dataSource id="BooksDataSource" serviceURL="BookDataService.asmx"
/>
<button id="Button5" >
<click>
<invokeMethodAction target="BooksDataSource"
method="load" />
</click>
</button>
<listView id="Books" itemTemplateParentElementId="ItemTemplateParent">
<bindings>
<binding dataContext="BooksDataSource" dataPath="data"
property="data" />
</bindings>
<layoutTemplate>
<template layoutElement="LayoutTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="ItemTemplate">
<label id="BookTitle">
<bindings>
<binding dataPath="Title" property="text" />
</bindings>
</label>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</listView>
</components>
</page>
</script>
</form>
</body>
Here, several points should be noticed:
1.
The necessary .asmx and .js files references should be added as the sub
sections under ScriptManager;
2.
We've defined several span and div HTML elements (in bold) which serve
as the placeholder of the MS AJAX client-side control—ListView. As stated before, ListView has provided serveral useful
templates—layoutTemplate,
itemTemplate, separatorTemplate,
emptyTemplate, and a necessary property—itemTemplateParentElementId
(specifying the parent element of temTemplate and separatorTemplate; this way, the itemTemplate
and separatorTemplate related elements can be rendered repeatedly
inside it);
3.
Next comes the declarative programming (we'll discuss it more thoroughly
in Part 2). To return data to be shown in the ListView control from web
services we must use the DataSource control to specify the service URL;
4.
We've defined the ListView architecture, with the necessary templates in
response to their former HTML counterparts;
5.
In step 4, we've also set up the bindings to the properties inside the
web service;
6.
Last but not least, careful readers should also notice that here we've
use declarative mode to invoke the button click event handler, which in turn invokes
the load method of DataSource control BooksDataSource.
2. Create a Web Service
Next, we'll write a web service to be consumed from the
browser side through declarative mode (and of course OK by manual JavaScript
programming). Here, we let the service returns an array of object Book.
Right click the project and choose "Add new item"
and create a new Web Service named BookDataService.asmx.
Next, in file BookDataService.cs, we are to create our WebMethod—GetTitles. Listing 5
shows the crucial code snippet:
Listing 5
using System.Collections.Generic;
using System.ComponentModel;
…………
using System.Data;
using System.Web.Script.Services;
using Microsoft.Web.Preview.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]</span>
public class BookDataService : <span class=Bold>DataService</span>
{
public BookDataService()
{
//InitializeComponent();
}
[DataObjectMethod(DataObjectMethodType.Select)]</span>
public Book[] GetTitles()</span>
{
List<Book _data = new> List<Book>();
_data.Add(new Book("Hello,this is Title 1"));
_data.Add(new Book("Hello,this is Title 2"));
_data.Add(new Book("Hello,this is Title 3"));
_data.Add(new Book("Hello,this is Title 4"));
return _data.ToArray();
}
public class Book
{
private string _title;
public Book(){}
[DataObjectField(true)]</span>
public string Title
{
get { return _title; }
set { _title = value; }
}
public Book(string title)
{
_title = title;
}
}
}Here, there are also some points to be emphasized:
1.
According to the official info, we must put the attribute ScriptService before the Web Service so as for the client
side to call it;
2.
We have our web service derived from a special WebService—DataService, which
holds some mystery to be discussed in Part 2;
3.
Next, please note that method GetTitles is
decorated with a peculiar attribute DataObjectMethod (defined
in namespace 'System.ComponentModel'), which with its two arguments—the first being a DataObjectMethodType
that allows you to indicate whether the method is used to Delete, Insert,
Select, Fill or Update an item; The second attribute (a Boolean value) is used
to indicate whether a certain method is the default for its type of operation. For
more details on this attribute, you can refer to this article.
4.
We have seen that attribute is a good way of decorating
business objects for data binding in point 3. Here appears another attribute—DataObjectField. This
attribute has three arguments to allow you to specify whether the property is a
primary key and an identity, its length in bytes, and whether or not it's nullable
respectively (please look up DataObjectFieldAttribute in MSDN for more details).
OK, we just know that WebMethod GetTitles
will return an array of object Book.
3. Consume the Web Service
In fact, this task has already been accomplished. Really it is.
According to the explanation of method load of control
DataSource, when you click the button Button5, the method
load of data source BooksDataSource is
invoked, and then WebMethod GetTitles is called with
the help of modifier '[DataObjectMethod(DataObjectMethodType.Select)]'.
It seems everything becomes so coincidental, and in the end the ListView Books is filled with the data returned by WebMethod GetTitles, with the only property Title
bond properly.
4. Running the sample
Without any trouble, press F5 and you will launch the
sample. Click the button and you will see the runtime screenshot like Figure 6.
Although the outcome is rather simple, we have indeed gone a long way!
Figure 6: The runtime screenshot
5. The last sentence to mention
To properly run this sample, you also have to add the
following necessary converters within web.config, or else you'll get nothing.
Listing 6
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization>
<converters>
<add name="DataSetConverter"
type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,
Microsoft.Web.Preview"/>
<add name="DataRowConverter"
type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,
Microsoft.Web.Preview"/>
<add name="DataTableConverter"
type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,
Microsoft.Web.Preview"/>
</converters>
</jsonSerialization>
</webServices>
</scripting>
</system.web.extensions>
For now, we've finished a simple sample in a hurry!
