Raheel Hussain : Web Services

Page Load with AJAX & XML

Raheel Hussain — Mon, 03 Dec 2007 09:01:00 GMT

With the arrival of AJAX, lots of things have improved as well as it also adds interactivity and fanciness in your applications.

Here it is about no rocket science but an interesting scenario, that is to display the data received from the web service in the XML format the AJAX way during the page loading of a website.

Scenario : -

I've a web service, which returns a XML data. The requirement is to display that XML in tabular format during the page_load of your web site as well as with the AJAX style of fanciness with some update progress animations etc.

There were two reasons for which I had to go with the client side script rather than returning a dataset and binding it with a GridView.

First was that a I was unable to find way to control or manipulate a DataSet through javascript, and second was that it is something about incremental page load which involve AJAX style loading of the page involving update progress animation, and hence requires a client side script to come into action.

Lets start with a simple web service which returns XML records, Here's the code which I did

Imports System.Data
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class WebService
    Inherits System.Web.Services.WebService
    <WebMethod()> _
    Public Function getIndianTeam() As String
        Dim ds As New DataSet
        System.Threading.Thread.Sleep(2000)
        ds.ReadXml(Server.MapPath("App_Data/IND.xml"))
        Return ds.GetXml()
    End Function

    <WebMethod()> _
    Public Function getPakistanTeam() As String
        Dim ds As New DataSet
        System.Threading.Thread.Sleep(4000)
        ds.ReadXml(Server.MapPath("App_Data/PK.xml"))
        Return ds.GetXml()
    End Function
End Class

Note: In my application, I'm retreiving the records (into the DataSet) from the database though, but here I'm reading an XML file rather (for example purpose).
Another thing to notice is that you need to add

"Imports System.Web.Script.Services"

statement on the top of your code file in the webservice. as well as the following code

"<System.Web.Script.Services.ScriptService()> _"

which can be seen in the code given above. These two statements are not by-default part of the code, when you add a new webservice page into your project.
We are going to consume the web service in the default.aspx page.

The image above describes you what you need to do in your default.aspx page. I've placed an HTML Table with four rows. Row1 and Row3 has labels with headings "Pakistan Team" and "Indian Team" respectively. Row2 and Row4 has Label controls as well as an animated GIF (can be of your choice) which will act as what the name suggests the Update Progress animation.

Also note that the cell at Row2 and that of Row4 has been named as "tdPak" and "tdInd" respectively.

For this example, I've placed two XML files PK.xml and IND.xml inside the App_Data folder of the project. following image shows the solution explorer with the complete file and directory structure of this project.

Next thing we need to do is to write client side code which will interact with the webservice. Before doing that select the Script Manager in the design mode of your default.aspx file and click on properties (or press F4) and click on the Service Collection, which will open up the following window.

Click the Add button to add a new service reference to your Script Manager, this will enable you to use the web service in your code. Also since the webservice.asmx file is a part of your project, hense there's no need to write the whole path i.e. http://www.xyz.com/services/myservice.asmx etc. but you may only specify the name of the webservice file that is webservice.asmx.

Now you are able to use the webservice in your client script. Here's what we need to do now.

<head runat="server">
    <title>AJAX With XML</title>
    <LINK rel="stylesheet" type="text/css" href="StyleSheet.css" />
    <script language="javascript">
        function pageLoad() {
        vResult = WebService.getPakistanTeam(onRetreivePK,onError);
        vResult = WebService.getIndianTeam(onRetreiveIN,onError);        
        }
        
        function onRetreivePK(vResult){
            loadXML(vResult,1);
            }
            
        function onRetreiveIN(vResult){
            loadXML(vResult,2);
            }
            
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        function loadXML(xmlString,obj) { 
          xmlDoc.async="false";
          xmlDoc.onreadystatechange=verify;
          xmlDoc.loadXML(xmlString);
          displayXMLGrid(xmlDoc,obj);
        }
        
        function displayXMLGrid(xmlDoc,obj) {
            var root = xmlDoc.firstChild;
            var i=0;
            var strResult="<table border='0' style='width:100%'>";
            var tClass = "tdA";
            
            if (root.hasChildNodes) {
                var v = root.childNodes[0];
                while (v != null) {
                    v = root.childNodes[ i ];
                    if      (v==null) break;
                    if (tClass=="tdA") tClass = "tdB";
                    else tClass = "tdA";
                    
                    strResult +="<tr>";
                    strResult +="<td class='" + tClass + "'>" + v.attributes[0].text + "</td>";
                    strResult +="<td class='" + tClass + "'>" + v.attributes[1].text + "</td>";
                    strResult +="</tr>";
                    i++;
                    }                    
                }
                strResult += "</table>";
                
                if      (obj==1)    document.getElementById("tdPak").innerHTML=strResult;
                else if (obj==2)    document.getElementById("tdInd").innerHTML=strResult;
            }
            
        
        function verify() {
          // 0 Object is not initialized // 1 Loading object is loading data // 2 Loaded object has loaded data
          // 3 Data from object can be worked with // 4 Object completely initialized
          if (xmlDoc.readyState != 4) {
            return false;
          }
        }        
        function onError(vResult){  alert(vResult);  }
    </script>
</head>

In the above code, as you can see that I'm calling the Webservice methods to retreive the data in the form of XML. while the function calls have two arguments one is OnRetreivePK and second is OnError. These are basically sub routines ( or events ) rather than arguments, telling the method call that to call the OnRetreivePK method upon successfully receiving data and go to the OnError event if some error occurs.

I've used Microsoft.XMLDOM class with couple of methods of it to iterate through the nodes of the XML data retreived which very easy to understand, and then populating the cells of the table depending on the argument received.

Your application is ready to perform now.
You can now run the application and it will show up with some nice and fancy style loading that is light weight as well as faster.

You can download the source code by clicking on the Following link. AJAXWeb2.zip

Happy Coding & Regards - raheel

Microsoft's Project codename Astoria - online service

Raheel Hussain — Sun, 09 Sep 2007 05:28:00 GMT

My experience to use ASTORIA online service was good !

For using the online service, it requires Microsoft .NET Passport login. After logging in .. I created my entity model, a simple one by creating four tables.

Books
Borrowers
Librarians
Transactions

You also need to specify the User ID, Password and the Service name through which the URI for your service will be decided.

With the simple interface for creating the Entities, and Properties (Data Base Fields) of the Entities and the Associations (Relationships)
Following Images will show you the steps

In the above image, you can see the Button for Creating a new Entity as well as for Creating Properties and Associations.

You can find all of the instructions for creating the EDM on the same page. You can click on the "Finish" button at the bottom of the page to proceed further.

After finishing, you'll be shown the conceptual model (CSDL) file for your EDM, as you can see below the one which I created.

The above image shows the URI to test the above service. this is

https://astoria.sandbox.live.com/users/MYTESTDBSERVICE/MYTESTDBSERVICE.rse

Note that the service can only be access through the secure HTTP channel, and your UserID/Password is required to access it.
That is, in my case I've to enter my User ID and Password, while others cannot access my EDM through their login credentials.

For the demonstration, you can have a look at NWind Data Service, Adventure Works Data service etc. which can be accessed through
Project Astoria Website http://astoria.mslivelabs.com/OnlineService.aspx

Also the service which I created, can be accessed through a simple tool which allows to interact with the service is as follows:

https://astoria.sandbox.live.com/Tools/raw.htm

The tool allows for the following Http-Verbs ( or Actions)
GET = Retreive
PUT = Update
POST = Insert
DELETE = Insert

While in the above image, you can see in the Request Data Section, that I did put a test XML with the HTTP Verb as Post to insert data.
Currently in the Image you can see HTTP Verb = Get, but the Request data is not subject to use with GET, but only PUT & POST.

You can see in the Output section that the data is displayed as the result of HTTP-GET operation along with the URI value which I have specified as
https://astoria.sandbox.live.com/users/MYTESTDBSERVICE/MYTESTDBSERVICE.rse/Books

The "Books" refers to the Entity which was created earlier.

I hope this gave enough insight to you about the Project "Microsoft codename Astoria" and lets stay tuned for more updates to come as the project is under
active development and we expect major security features and certain more features to be added to it.

Best Of Luck

raheel Hussain

Microsoft Codename Astoria !

Raheel Hussain — Wed, 05 Sep 2007 09:18:00 GMT

Hello folks !

A recommended read about Microsoft codename "Astoria", an experimental project by Microsoft.

I'm listing down some of the highlights, I was able to understand from the mannual I downloaded.

This is a very interesting read, as well as the you can make your own data store upto 100 MB and use the Astoria
service to build the data service and access it from any where on the internet, while the toolkit can also be
downloaded to be used on your system with VS & AJAX enabled.

Here are the few extracts/highlights for your ease!

Project Astoria consists of a combination of patterns, libraries and an online service that explores the concept of data services for the web.

The goal of Astoria is to facilitate the creation of flexible data services that are naturally integrated with the web.
Astoria uses URIs to point to pieces of data and simple, well-known formats to represent that data, such as JSON (Javascript Simple Object Notation) and plain XML, while the default representation is XML.

JSON format is naturally and simply integrated with Javascript environments such as AJAX, can be retreived by simply setting a Acceptheader to application/json.

Codename Astoria is released in two forms, A downloadable toolkit and an online service. Both are focused on creation and operation of data services, but are aimed at difference scenarios.

The Astoria toolkit is a downloadable package that contains the Astoria runtime, documentation and examples that show how to use the toolkit. The toolkit is designed to allow ASP.NET developers to create data services directly in their ASP.NET applications, accessing their own database.
The Astoria online service is an experimental service that aims at exploring programming models for data on the web, offered in the form of a service.

Using the Astoria online service, web developers can create custom structured data stores on the web and access them from anywhere that they have internet access, This experimental release also includes a set of sample data-sets that are preloaded and readily accessible as data services.

Please you can visit http://astoria.mslivelabs.com for further information about the project.
Also, visit the Astoria Blog at Microsft MSDN.Regards !
raheel Hussain