Unveil the Data Binding Architecture inside Microsoft ASP.NET Ajax 1.0 - Part 1
page 5 of 7
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 49502/ 176

Start to use data bindinga simple sample

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 assembliesMicrosoft.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 controlListView. As stated before, ListView has provided serveral useful templateslayoutTemplate, itemTemplate, separatorTemplate, emptyTemplate, and a necessary propertyitemTemplateParentElementId (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 WebMethodGetTitles. 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 WebServiceDataService, 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 argumentsthe 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 attributeDataObjectField. 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!


View Entire Article

User Comments

No comments posted yet.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-05-22 11:11:02 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search