Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

Flex Communication with ASP.NET WebService

Rate me:
Please Sign up or sign in to vote.
4.80/5 (19 votes)
26 Jun 2009CPOL4 min read 103.4K   3.9K   42   25
This article explains how to use an ASP.NET WebService from Adobe Flex
Image 1

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.

SQL
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.

C#
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:

XML
<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:

JavaScript
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.

XML
<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.

JavaScript
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:

JavaScript
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)


Written By
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/.

Comments and Discussions

 
QuestionI tried to pass an integer from asp.net to flex, but always got value of 0 Pin
ladyleaf5-Jan-15 18:57
ladyleaf5-Jan-15 18:57 
GeneralMy vote of 5 Pin
shanawazway23-May-12 1:20
shanawazway23-May-12 1:20 
GeneralMy vote of 5 Pin
Webgur13-Sep-11 1:50
Webgur13-Sep-11 1:50 
GeneralHai Friends!!!! beginners just try this link Pin
vijay_vignesh11-Jan-11 2:15
vijay_vignesh11-Jan-11 2:15 
GeneralReturning a single instance of Employee Pin
NeCroFire2-Jul-10 3:23
NeCroFire2-Jul-10 3:23 
Generali can run your code but not inserting the data. Pin
kakadiya20-May-10 22:32
kakadiya20-May-10 22:32 
GeneralRe: i can run your code but not inserting the data. Pin
Praveen Nair (NinethSense)20-May-10 23:14
Praveen Nair (NinethSense)20-May-10 23:14 
GeneralRe: i can run your code but not inserting the data. Pin
kakadiya20-May-10 23:24
kakadiya20-May-10 23:24 
GeneralRe: i can run your code but not inserting the data. Pin
kakadiya21-May-10 0:17
kakadiya21-May-10 0:17 
i find the solution and it runs successfully.
you guy have not passed the EmpId,EmpName,EmpEmail int he webservice request.
pl refer the code below.just put the webservice code in ur .mxml file.

<mx:webservice id="ws" wsdl="http://localhost:2777/TestWebService/Service.asmx?WSDL">
<mx:operation
="" name="GetEmployees" resultformat="object" result="GetEmployees(event)">

<mx:operation
name="SaveEmployee"
="" resultformat="object" result="SaveEmployee(event)">
<mx:request>
<username>{txtEmpId.text}

<username1>{txtEmpName.text}

<username2>{txtEmpEmail.text}



GeneralRe: i can run your code but not inserting the data. Pin
Praveen Nair (NinethSense)21-May-10 1:15
Praveen Nair (NinethSense)21-May-10 1:15 
Generalawesome !!!!!!!!!! Pin
lxjhonson19-Feb-10 1:32
lxjhonson19-Feb-10 1:32 
GeneralFLEX WILL ALSO WORK WELL WITH XML RETURNED FROM A .NET WEBSERVICE Pin
SafetyManNew22-Jan-10 18:48
SafetyManNew22-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] Pin
SafetyManNew20-Jan-10 9:09
SafetyManNew20-Jan-10 9:09 
GeneralMy vote of 2 Pin
cppwizard4-Jan-10 18:36
cppwizard4-Jan-10 18:36 
GeneralRe: My vote of 2 Pin
Praveen Nair (NinethSense)20-Jan-10 17:37
Praveen Nair (NinethSense)20-Jan-10 17:37 
QuestionUnable to load WSDL [modified] Pin
Alex Dove12-Nov-09 10:36
professionalAlex Dove12-Nov-09 10:36 
AnswerRe: Unable to load WSDL Pin
klangued9-Dec-09 8:49
klangued9-Dec-09 8:49 
GeneralSecurity error accessing url when running the flex app Pin
corefour3-Nov-09 11:06
corefour3-Nov-09 11:06 
GeneralRe: Security error accessing url when running the flex app Pin
klangued9-Dec-09 8:47
klangued9-Dec-09 8:47 
GeneralRe: Security error accessing url when running the flex app Pin
corefour11-Dec-09 10:36
corefour11-Dec-09 10:36 
Generalnice article Pin
Krish anghan8-Jul-09 3:29
Krish anghan8-Jul-09 3:29 
GeneralRe: nice article Pin
Praveen Nair (NinethSense)8-Jul-09 3:41
Praveen Nair (NinethSense)8-Jul-09 3:41 
GeneralDid u get any reply from suthor? Pin
kakadiya20-May-10 22:59
kakadiya20-May-10 22:59 
GeneralNice one ! Pin
Abhijit Jana6-Jul-09 9:11
professionalAbhijit Jana6-Jul-09 9:11 
GeneralRe: Nice one ! Pin
Praveen Nair (NinethSense)6-Jul-09 19:02
Praveen Nair (NinethSense)6-Jul-09 19:02 

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

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