65.9K
CodeProject 正在变化。 阅读更多。
Home

Flex 与 ASP.NET WebService 的通信

Praveen Nair (NinethSense)
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (16投票s)

2009年6月26日

CPOL

4分钟阅读

viewsIcon

106165

downloadIcon

3960

本文解释了如何从 Adobe Flex 使用 ASP.NET WebService

引言

在本文中，我试图解释如何使用普通的 ASP.NET WebService 与 Adobe Flex 一起使用。我使用了 flex 标签 <mx:WebService> 来使其工作。 了解 Flex 的基本知识对于理解本文非常重要。

请记住，WebService 只是一个选项。 还有许多其他选项，例如 HTTPService、Flex Remoting 等。

背景

我想向您介绍我早期的 CodeProject 文章 Flex HTTPService 与 ASP.NET，在那里我演示了使用 flex 标签 <mx:HTTPService> 与普通的 ASP.NET 应用程序交互。

我使用的开发工具

  • Visual Studio 2008 上的 C#，使用 .NET Framework 3.5
  • Adobe Flex Builder 3.0
  • SQL Server 2008 示例数据库

附加源代码的作用

  • ASP.NET WebService 有两种方法
    • GetEmployees() - 从 webservice 获取记录
    • SaveEmployee() - 通过 webservice 将记录保存到数据库
  • Flex MXML 文件
    • 一个 DataGrid - 显示来自 WebService 的记录
    • 一个数据输入框 - 通过 WebService 将记录保存到数据库

我希望您从本文中获得什么

  • 如何使用 Flex 和 ASP.NET 执行数据库操作
  • 如何从 Flex 与 ASP.NET WebService 交互
    • 如何从 WebService 获取数据
    • 如何向 WebService 发送数据
    • 如何在调用 webservice 方法时发送参数

创建用于 Flex 的 ASP.NET Webservice 时要记住什么？

  • 没什么。 您只需创建一个普通的 ASP.NET WebService，就像您过去做的那样。

Using the Code

SQL

为了演示目的，我创建了一个示例数据库 test 和一个示例表 tblEmployee，其架构如下。 如果您尝试执行附加的示例，则需要它。

CREATE TABLE [dbo].[tblEmployee](

[EmpId] [nchar](50) NULL,

[EmpName] [nchar](50) NULL,

[EmpEmail] [nchar](50) NULL

) ON [PRIMARY]

ASP.NET WebService

正如我所说，WebService 只是一个普通的 ASP.NET WebService 项目，只有两种 Web 方法，一种用于从数据库获取记录，另一种用于保存新记录。

警告：请注意，我创建这些文件仅用于演示目的，并且在 ASP.NET WebService 或 Flex MXML 文件中均未遵循任何标准。

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

首先，您需要在 Flex 应用程序的 mxml 文件中添加 <mx:WebService> 标签。 这是我现在拥有的

<mx:WebService id="ws" wsdl="https:///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>

注意调用 webservice 的 URL：https:///TestWebService/Service.asmx?WSDL。

您可以看到我定义了两个操作

  1. GetEmployees 和
  2. SaveEmployee

它们也在我们的 ASP.NET WebService 中定义。 当您调用所需的 webservice 时，相应的 result 事件处理程序会工作，并且您将获得 WebService 在该附加事件方法中发送的数据。 在这里，附加的事件处理程序方法是 GetEmployees(event) 和 SaveEmployee(event)。

请记住，您也可以在不使用这些标签的情况下动态地调用 webservice。 此外，还有异步令牌方法，我认为这超出了本文的范围。

接下来，我添加了一个 DataGrid 来显示我们从 WebService 获取的记录。 我还使用了一个 Form 来进行数据输入以添加新记录。

<mx:Panel>、<mx:HBox> 等用于使应用程序具有良好的外观。 这些与我们的 webservice 调用无关。

工作原理

在 <mx:Applicaiton> 标签中，我使用了 creationComplete="init()"，以便在 Flex 应用程序加载时调用 init() 方法。 在 init() 内部，我调用了我们的 webservice 方法 ws.GetEmployees()。

一旦调用 ws.GetEmployees() 方法，如果调用成功，则会调用附加的 result 处理程序。 请记住，有一个常见的 fault 处理程序，当出现与 webservice 相关的错误时，该处理程序将被触发。

ws.GetEmployees() 的附加结果处理程序是

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

在这种方法中，我们将传入的数据绑定到我们的数据网格以显示记录。

接下来是我们如何保存记录。 我使用了三个 <mx:TextInput> 框和一个 <mx:Button> 用于新记录的数据输入。 附加了一个事件处理程序 AddRecord(event)，它会触发 click 事件。

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

当用户单击此按钮时，将触发相应的方法。

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

此方法使用从数据输入表单获得的参数调用 WebService 方法 ws.SaveEmployee()。 正如我们所知，此 WebService 方法的结果处理程序将再次被触发，即

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

在此事件中，我们再次调用 WebService ws.GetEmployees() 以刷新 DataGrid，以便它也显示新记录。 由于存在 Alert.show() 调用，一旦数据保存，您将立即收到通知“已成功保存”。

历史

  • 2009 年 6 月 26 日：初始发布
© . All rights reserved.