Взаимодействие Flex с веб-службой ASP.NET

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Статья объясняет, как использовать обычную веб-службу ASP.NET вместе с Adobe Flex. Используется тег flex <mx:WebService>, чтобы заставить это работать. Для понимания статьи нужны базовые знания Flex.

•    Скачать исходники - 3.45 Кб
•    Скачать тест - 1.08 Кб

Помните, что веб-служба – всего лишь средство. Есть много других средств вроде HTTPService, дистанционная связь Flex и т. д.

Справка

В статье Flex HTTPService с ASP.NET на CodeProject показано использование тега flex <mx:HTTPService> для взаимодействия с обычным приложением ASP.NET.

Используемые средства разработки
•    C# в Visual Studio 2008 с .NET Framework 3.5
•    Adobe Flex Builder 3.0
•    пробная база данных SQL Server 2008

Что делает прикрепленный исходный код
•    Веб-служба ASP.NET имеет два метода:
   o    GetEmployees() – чтобы получить записи из веб-службы
   o    SaveEmployee() – чтобы сохранить записи в базу данных через веб-службу
•    Файл Flex MXML:
   o    DataGrid(сетка данных) – чтобы показать записи из веб-службы
   o    Поле ввода данных - чтобы сохранить записи в базу данных через веб-службу

Что вы получите от этой статьи
•    Как производить операции над базой данных с помощью Flex и ASP.NET
•    Как взаимодействовать с веб-службой ASP.NET из Flex
   o    Как получить данные из веб-службы
   o    Как отправить данные в веб-службу
   o    Как отправить параметры при вызове метода веб-службы

Что надо помнить при создании веб-службы ASP.NET для использования с Flex?
•    Ничего. Создается типовая веб-служба ASP.NET как обычно.


Использование кода

SQL

С целью демонстрации была создана пробная база данных test и пробная таблица tblEmployee с помощью следующей схемы. Она нужна для выполнения прикрепленного примера.

CREATE TABLE [dbo].[tblEmployee](

[EmpId] [nchar](50) NULL,

[EmpName] [nchar](50) NULL,

[EmpEmail] [nchar](50) NULL

) ON [PRIMARY]      

Веб-служба ASP.NET

Веб-служба является обычным проектом веб-службы ASP.NET с двумя веб-методами: один  - для получения записей из базы данных, а второй  - для сохранения новой записи.
Предупреждение: Эти файлы были созданы только для демонстрации и не подчиняются никаким стандартам в веб-службе ASP.NET или файле Flex MXML.

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

 
    // метод для получения всех записей из базы данных
    [WebMethod]
    public List<Employee> GetEmployees()
    {
        // метод не подчиняется никаким стандартам программирования, служит только для //демонстрации.
        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;
    }
    
    // метод для сохранения записи
    [WebMethod]
    public void SaveEmployee(string empId, string empName, string empEmail)
    {
        // метод не подчиняется никаким стандартам программирования, служит только для //демонстрации
        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();
    }    
}

// класс работника
public class Employee
{
    public string EmpId = string.Empty;
    public string EmpName = string.Empty;
    public string EmpEmail = string.Empty;
}

Flex MXML

Сначала надо добавить тег <mx:WebService> в файл mxml приложения Flex следующим образом:

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

Обратите внимание на вызов веб-службы с URL: http://localhost/TestWebService/Service.asmx?WSDL.

Были определены две операции:
1.    GetEmployees
2.    SaveEmployee

Также определенные в веб-службе ASP.NET. Когда инициируется вызов требуемой веб-службы, отрабатывает соответствующий обработчик события result, и извлекаются данные, отправленные веб-службой в том прикрепленном методе события. Здесь прикрепленные методы обработчика события - GetEmployees(event) и SaveEmployee(event).
Можно вызвать веб-службу динамически, не используя эти теги. Также существуют асинхронные методы Токена, выходящие за рамки данной статьи.

Потом был добавлен DataGrid, чтобы показать записи, полученные из веб-службы. Также использовалась Form для осуществления ввода данных для добавления новых записей.

<mx:Panel>, <mx:HBox> и т. д. придают приятный вид приложению. Они никак не связаны с вызовами веб-службы.

Как это работает

В теге <mx:Applicaiton> использован creationComplete="init()", чтобы метод init() вызывался при загрузке приложения Flex. Внутри init() вызывается метод веб-службы ws.GetEmployees().

Как только вызван метод ws.GetEmployees(), прикрепленный обработчик result вызывается в случае успешности вызова. Помните, что прикрепленный общий обработчик fault срабатывает при наличии ошибки, связанной с веб-службой.

Прикрепленный обработчик результата ws.GetEmployees() следующий:

private function GetEmployees(event:ResultEvent):void {
// привязать данные из веб-службы к сетке данных
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 {
// сохранить запись с помощью метода веб-службы
ws.SaveEmployee(txtEmpId.text, txtEmpName.text, txtEmpEmail.text); // 
}

Этот метод вызывает метод WebService ws.SaveEmployee() с параметрами, получаемыми из формы ввода данных. Снова сработает обработчик результата этого метода веб-службы, то есть:

private function SaveEmployee(event:ResultEvent):void {
// для обновления сетки данных;
ws.GetEmployees(); 
Alert.show("Saved Successfully");
}

При этом событии снова вызывается ws.GetEmployees() веб-службы для обновления DataGrid, чтобы она отобразила новую запись. Благодаря наличию вызова Alert.show() мгновенно поступает уведомление "Сохранено успешно", как только данные сохранены.

форум c# asp net