Click here to Skip to main content
Click here to Skip to main content

Flex Communication with ASP.NET WebService

, 26 Jun 2009
Rate this:
Please Sign up or sign in to vote.
This article explains how to use an ASP.NET WebService from Adobe Flex

Introduction

In this article, I tried to explain how to use an ordinary ASP.NET WebService to use with Adobe Flex. I used the flex tag <mx:WebService> to make this work. Basic knowledge in Flex is important to understand this article.

Remember that WebService is just an option. There are many other options like HTTPService, Flex Remoting, etc.

Background

I would like to point you to my earlier CodeProject article Flex HTTPService with ASP.NET where I demonstrated the use of flex tag <mx:HTTPService> to interact with an ordinary ASP.NET application.

Development Tools I Used

  • C# on Visual Studio 2008 with .NET Framework 3.5
  • Adobe Flex Builder 3.0
  • SQL Server 2008 sample database

What Attached Source Code Does

  • ASP.NET WebService has two methods:
    • GetEmployees() - To get records from webservice
    • SaveEmployee() - To save records to database via webservice
  • Flex MXML file:
    • A DataGrid - To show records from WebService
    • A data entry box - To save records to database via WebService

What I Expect You to Get from this Article

  • How to do database operations with Flex and ASP.NET
  • How to interact with an ASP.NET WebService from Flex
    • How to get data from a WebService
    • How to send data to a WebService
    • How to send parameters when calling a webservice method

What to Remember When you Create an ASP.NET Webservice to Use with Flex?

  • Nothing. You just create an ordinary ASP.NET WebService just like you did in the past.

Using the Code

SQL

For demonstration purposes, I created a sample database test and a sample table tblEmployee with the below schema. You will need this if you try to execute the attached sample.

CREATE TABLE [dbo].[tblEmployee](

[EmpId] [nchar](50) NULL,

[EmpName] [nchar](50) NULL,

[EmpEmail] [nchar](50) NULL

) ON [PRIMARY]       

ASP.NET WebService

As I said, the WebService is just an ordinary ASP.NET WebService project with just two Web methods, one for getting records from database and the other one to save a new record.

Warning: Note that I created these files just for demonstration purposes and did not follow any standards either in ASP.NET WebService or Flex MXML file.

public class Service : WebService
{
    SqlConnection con = new SqlConnection
	("Data Source=localhost;Initial Catalog=test;User id=;Password=");

 
    // Method to get all records from database
    [WebMethod]
    public List<Employee> GetEmployees()
    {
        // Method does not follow any coding standards. This is just for demo purposes.
        var emplist = new List<Employee>();
        Employee emp;
        var da = new SqlDataAdapter("SELECT EmpId, 
		EmpName, EmpEmail from tblEmployee", con);
        var dt = new DataTable();
        da.Fill(dt);
        foreach (DataRow dr in dt.Rows)
        {
            emp = new Employee
                      {
                          EmpId = dr["EmpId"].ToString(),
                          EmpName = dr["EmpName"].ToString(),
                          EmpEmail = dr["EmpEmail"].ToString()
                      };
            emplist.Add(emp);
        }       
        
        return emplist;
    }
    
    // Method to save a record
    [WebMethod]
    public void SaveEmployee(string empId, string empName, string empEmail)
    {
        // Method does not follow any coding standards. This is just for demo purposes.
        var cmd = new SqlCommand("INSERT INTO tblEmployee 
	(EmpId, EmpName, EmpEmail) VALUES(@empid, @empname, @empemail)",con);
        cmd.Parameters.Add(new SqlParameter("@empid", empId));
        cmd.Parameters.Add(new SqlParameter("@empname", empName));
        cmd.Parameters.Add(new SqlParameter("@empemail", empEmail));
        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();
    }    
}

// Employee Class
public class Employee
{
    public string EmpId = string.Empty;
    public string EmpName = string.Empty;
    public string EmpEmail = string.Empty;
}

Flex MXML

First, you need to add <mx:WebService> tag to your Flex application mxml file. Here is what I have now:

<mx:WebService id="ws" wsdl="http://localhost/TestWebService/Service.asmx?WSDL" 
    fault="fault(event)">
<mx:operation 
name="GetEmployees" 
resultFormat="object"
result="GetEmployees(event)"
/>
<mx:operation 
name="SaveEmployee" 
resultFormat="object"
result="SaveEmployee(event)"
/>
</mx:WebService>

Note the call of webservice with URL: http://localhost/TestWebService/Service.asmx?WSDL.

You can see that I defined two operations:

  1. GetEmployees and 
  2. SaveEmployee

which are defined in our ASP.NET WebService as well. When you invoke the required webservice call, the corresponding result event handler works and you will get the data sent by WebService in that attached event method. Here the attached event handler methods are GetEmployees(event) and SaveEmployee(event).

Remember that you can call a webservice dynamically also without using these tags. Also there are asynchronous token methods which I believe are out of scope of this article.

Next I added a DataGrid to show the records we get from WebService. Also I used a Form to do data entry for adding new records.

<mx:Panel>, <mx:HBox> etc. are used to get a good appearance for the application. These have nothing to do with our webservice calls.

How Stuff Works

In the <mx:Applicaiton> tag, I used creationComplete="init()" so that init()method will be called when the Flex application is loaded. Inside the init(), I called our webservice method ws.GetEmployees().

Once the ws.GetEmployees() method is called, the attached result handler gets invoked if the call is a success. Keep in mind, there is a common fault handler attached which will get triggered when there is an error associated with webservice.

The attached result handler of ws.GetEmployees() is:

private function GetEmployees(event:ResultEvent):void {
// Databind data from webservice to datagrid
datagrid.dataProvider = event.result; 
}

In this method, we bind the incoming data to our datagrid to show records.

Next is how we save records. I used three <mx:TextInput> boxes and one <mx:Button> for the data entry of a new record. An event handler AddRecord(event) is attached which triggers the click event.

<mx:Form x="608" y="74" width="100%" height="100%" borderStyle="solid">
<mx:FormItem label="EmpId">
<mx:TextInput width="106" id="txtEmpId"/>
</mx:FormItem>
<mx:FormItem label="EmpName">
<mx:TextInput width="106" id="txtEmpName"/>
</mx:FormItem>
<mx:FormItem label="EmpEmail">
<mx:TextInput width="106" id="txtEmpEmail"/>
</mx:FormItem>

<mx:FormItem width="156" horizontalAlign="right">
<mx:Button label="Add" id="btnAdd" click="AddRecord(event)"/>
</mx:FormItem>
</mx:Form>

When the user clicks this button, the corresponding method will be triggered.

private function AddRecord(event:MouseEvent):void {
// Save a record using a WebService method
ws.SaveEmployee(txtEmpId.text, txtEmpName.text, txtEmpEmail.text); // 
}

This method calls the WebService method ws.SaveEmployee() with the parameters which we get from the data entry form. As we know, again the result handler of this WebService method will be triggered which is:

private function SaveEmployee(event:ResultEvent):void {
// To Refresh DataGrid;
ws.GetEmployees(); 
Alert.show("Saved Successfully");
}

In this event, we call the WebService ws.GetEmployees() again to refresh the DataGrid so that it displays new record also. Since there is an Alert.show() call, you will be notified instantly "Saved Successfully" once the data is saved.

History

  • 26th June, 2009: Initial post

License

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

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

 
GeneralMy vote of 5 Pinmembershanawazway23-May-12 1:20 
GeneralMy vote of 5 PinmemberWebgur13-Sep-11 1:50 
GeneralHai Friends!!!! beginners just try this link Pinmembervijay_vignesh11-Jan-11 2:15 
GeneralReturning a single instance of Employee PinmemberNeCroFire2-Jul-10 3:23 
Generali can run your code but not inserting the data. Pinmemberkakadiya20-May-10 22:32 
GeneralRe: i can run your code but not inserting the data. PinmemberNinethSense20-May-10 23:14 
GeneralRe: i can run your code but not inserting the data. Pinmemberkakadiya20-May-10 23:24 
GeneralRe: i can run your code but not inserting the data. Pinmemberkakadiya21-May-10 0:17 
GeneralRe: i can run your code but not inserting the data. PinmemberNinethSense21-May-10 1:15 
Generalawesome !!!!!!!!!! Pinmemberlxjhonson19-Feb-10 1:32 
GeneralFLEX WILL ALSO WORK WELL WITH XML RETURNED FROM A .NET WEBSERVICE PinmemberSafetyManNew22-Jan-10 18:48 
GeneralVery nice (Exactly what I needed to get me started in Flex): how to ADD PARAMENTERS AND ARGUMENTS WITH THE WEB SERVICE use mx:request and xml encode each parameter [modified] PinmemberSafetyManNew20-Jan-10 9:09 
GeneralMy vote of 2 Pinmembercppwizard4-Jan-10 18:36 
GeneralRe: My vote of 2 PinmemberNinethSense20-Jan-10 17:37 
QuestionUnable to load WSDL [modified] PinmemberAlex Dove12-Nov-09 10:36 
AnswerRe: Unable to load WSDL Pinmemberklangued9-Dec-09 8:49 
GeneralSecurity error accessing url when running the flex app Pinmembercorefour3-Nov-09 11:06 
GeneralRe: Security error accessing url when running the flex app Pinmemberklangued9-Dec-09 8:47 
GeneralRe: Security error accessing url when running the flex app Pinmembercorefour11-Dec-09 10:36 
Generalnice article PinmemberMember 7358898-Jul-09 3:29 
GeneralRe: nice article PinmemberNinethSense8-Jul-09 3:41 
GeneralDid u get any reply from suthor? Pinmemberkakadiya20-May-10 22:59 
GeneralNice one ! PinmvpAbhijit Jana6-Jul-09 9:11 
GeneralRe: Nice one ! PinmemberNinethSense6-Jul-09 19:02 

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.140721.1 | Last Updated 26 Jun 2009
Article Copyright 2009 by Praveen Nair (NinethSense)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid