Click here to Skip to main content
Click here to Skip to main content
Go to top

Flex HTTPService with ASP.NET

, 11 Jun 2009
Rate this:
Please Sign up or sign in to vote.
A beginners tutorial on HTTPService of Flex and ASP.NET

Introduction

This tutorial is to demonstrate the use of HTTPService feature in Flex 2+ with ASP.NET. There are many ways in Adobe Flex to communicate with ASP.NET (or simply, server side languages). HttpService, WebService, WebORB, FluorineFx, etc. In this tutorial, I concentrate only on HTTPService.

<mx:HTTPService />

The attached sample demonstrates how to send and receive data to-and-from ASP.NET. Keep in mind that HTTPService is useful only for handling small amount of data. We will pass requests from flex application as parameters and send back the requested data in XML format.

Role of ASP.NET in HTTPService

HTTPService can handle XML, text, and some more types of data. We will make use of XML for the sample application. ASP.NET application will generate data based on the requests from Flex application. Here is a typical method I used to generate the data in XML format:

  private void GetAll()
    {
        SqlDataAdapter da = new SqlDataAdapter
				("SELECT id, name, email FROM test", con);
        // Bad code. Just for demo purpose
        DataSet ds = new DataSet();
        da.Fill(ds);
        ds.DataSetName = "parent";
        ds.Tables[0].TableName = "child";
        // Output data in XML format
        Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
        Response.Write(ds.GetXml());
    }

The output of this method looks like this:

<?xml version="1.0" encoding="utf-8"?>
<parent>
  <child>
    <id>2</id>
    <name>Praveen.V.Nair</name>
    <email>ninethsense@hotmail.com</email>
  </child>
</parent>

Since Flex can send any number of requests for different purposes, I use a switch checking like:

 switch (Request["call"]) {
                case "GetDataById":
                    GetDataById(int.Parse(Request["id"]));
                    break;
                case "GetAll":
                    GetAll();
                    break;
                case "SaveData":
                    SaveData(Request["name"], Request["email"]);
                    break;
                case "AnotherMethod":
                    // your method call
                    break;
            }

It is all about ASP.NET. Now comes the Flex part. You know Flex is more concentrated on UI.

Role of Flex

The core thing is HTTPService. This you need to use like:

<mx:HTTPService id="hsData" url="http://localhost/flextest/Default.aspx" 
  fault="httpFaultHandler(event)"
  result="httpResultHandler(event)"
  method="POST"
  /> 

Please check the documentation for different properties it supports. I used only what we need for the sample application. Well, now we can use its send method to request data from ASP.NET. httpservice.send() is how we will do this. If we need to send parameters, we will need to use a flex object for that. See the example:

   private function PopulateDataGridAll(event:MouseEvent):void {
    var params:Object = {};
    params["call"] = "GetAll";
    hsData.send(params);
   }

Note that params is the object I use to store parameters and send to server. After the send() method, data will be returned to the flex application which we will populate in flex DataGrid. DataGrid component code looks like this:

 <mx:DataGrid id="dg" dataProvider="{hsData.lastResult.parent.child}">
    <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="id"/>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="EMail" dataField="email"/>
        </mx:columns>
 </mx:DataGrid>

Well, the columns details are not necessary. It will show all columns if you do not use it. (Remember the AutoGenerateColumns feature of ASP.NET).

In the above code, dataProvider property uses hsData.lastResult.parent.child where, parent and child are nodes of the XML input. Check the sample XML output of ASP.NET provided on top of this article for more understanding.

If you run the application, you will see the application similar to the screenshot provided. To demonstrate the flex-ASP.NET communication, I added the below mentioned features:

  • Get all records (ASP.NET method: GetAll()) from server and show in DataGrid
  • Get a record (ASP.NET method: GetDataById()) from server and show in DataGrid
  • Put a record (ASP.NET method: SaveData()) to server and show in DataGrid

History

  • 11th June, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Praveen Nair (NinethSense)
Architect ORION INDIA SYSTEMS
India India
Praveen.V.Nair - aka NinethSense - PMP, Microsoft MVP - is working as a Head of Technology and Architecture at Orion India Systems, Kochi, India. He has been playing with electronics from the age of 10 and with computers from the age of 14. He usually blogs at http://blog.ninethsense.com/.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
Generalwhich one is better PinmemberSohelElite11-Dec-09 7:36 
Generalnice,but one problem Pinmemberwuxsh17-Jun-09 0:08 
Generallooks nice ... PinmemberR. M. Masudur11-Jun-09 1:55 
GeneralRe: looks nice ... PinmemberNinethSense11-Jun-09 2:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 11 Jun 2009
Article Copyright 2009 by Praveen Nair (NinethSense)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid