Пошаговое руководство. Привязка элементов управления WPF к службе данных WCF

 

Опубликовано: Апрель 2016

В этом пошаговом руководстве вы создадите приложение WPF, содержащее элементы управления с привязкой к данным. Эти элементы управления привязаны к записям клиентов, инкапсулированным в Служба данных WCF. Вы также добавите кнопки, позволяющие клиентам просматривать и обновлять записи.

В данном пошаговом руководстве рассмотрены следующие задачи:

• Создание модели данных с использованием сущностей (EDM), сформированной из данных в учебной базе данных AdventureWorksLT.

• Создание Служба данных WCF, предоставляющего данные из модели EDM приложению WPF.

• Создание набора элементов управления с привязкой к данным путем перетаскивания элементов из окна Источники данных в конструктор WPF.

• Создание кнопок для перехода вперед и назад по записям клиентов.

• Создание кнопки для сохранения изменений, вносимых в данные в элементах управления, в Служба данных WCF и базовый источник данных.

  Примечание

  Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация среды IDE.

Обязательные компоненты

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.

• Visual Studio

• Доступ к запущенному экземпляру SQL Server или SQL Server Express с подключенной учебной базой данных AdventureWorksLT. Вы можете загрузить базу данных AdventureWorksLT с веб-сайта CodePlex.

Перед изучением приведенных ниже концепций будет полезно, хотя и не обязательно, ознакомиться со следующим пошаговым руководством.

• Службы данных WCF. Для получения дополнительной информации см. Общие сведения.

• Модели данных в Службы данных WCF.

• Модели EDM и ADO.NET Entity Framework. Для получения дополнительной информации см. Общие сведения о платформе Entity Framework.

• Работа с Конструктором WPF. Для получения дополнительной информации см. Общие сведения о конструкторах WPF и Silverlight.

• Привязка данных WPF. Для получения дополнительной информации см. Общие сведения о связывании данных.

Создание проекта службы

Начните работу с данным пошаговым руководством с создания проекта для Служба данных WCF.

Порядок создания проекта службы

1. Запустите Visual Studio.

2. В меню Файл выберите пункт Создать, а затем команду Проект.

3. Разверните Visual C# или Visual Basic и выберите Веб-сайт.

4. Выберите шаблон проекта Веб-приложение ASP.NET.

5. В поле Имя введите AdventureWorksService и нажмите кнопку ОК.

   Visual Studio создает проект AdventureWorksService.

6. В Обозревателе решений щелкните правой кнопкой мыши Default.aspx и выберите пункт Удалить. Этот файл для прохождения данного руководства не требуется.

Создание модели EDM для службы

Чтобы предоставить данные приложению с помощью Служба данных WCF, следует определить модель данных для этой службы. Служба данных WCF поддерживает два типа моделей данных: модель EDM и настраиваемые модели данных, определяемые с помощью объектов среды CLR, которые реализуют интерфейс IQueryable<T>. В данном пошаговом руководстве вы создадите модель EDM для использования в качестве модели данных.

Создание модели EDM

1. В меню Проект выберите пункт Добавить новый элемент.

2. В списке "Установленные шаблоны" щелкните Данные и выберите элемент проекта Модель ADO.NET EDM.

3. Измените имя на AdventureWorksModel.edmx и нажмите кнопку Добавить.

   Открывается Мастер моделей EDM.

4. На странице Выбор содержимого модели щелкните Создать из базы данных и нажмите кнопку Далее.

5. На странице Выбор подключения к базе данных выберите один из следующих параметров.

   • Если подключение к учебной базе данных AdventureWorksLT доступно в раскрывающемся списке, то выберите его.

     -или-

   • Щелкните Создать подключение и создайте подключение к базе данных AdventureWorksLT.

6. На странице Выбор подключения базы данных убедитесь, что выбран параметр Сохранить параметры соединения сущности в App.Config как, а затем нажмите кнопку Далее.

7. На странице Выбор объектов базы данных разверните узел Таблицы и выберите таблицу SalesOrderHeader.

8. Нажмите кнопку Готово.

Создание службы

Создайте Служба данных WCF для предоставления данных из модели EDM приложению WPF.

Создание службы

1. В меню Проект выберите пункт Добавить новый элемент.

2. В списке "Установленные шаблоны" щелкните Веб-сайт и выберите элемент проекта Служба данных WCF.

3. В поле Имя введите AdventureWorksService.svc и нажмите кнопку Добавить.

   Visual Studio добавляет файл AdventureWorksService.svc в проект.

Настройка службы

Вам необходимо настроить службу на использование созданной модели EDM.

Порядок настройки службы

1. В файле кода AdventureWorks.svc замените объявление класса AdventureWorksService следующим кодом.

       public class AdventureWorksService : DataService<AdventureWorksLTEntities>
       {
           // This method is called only once to initialize service-wide policies.
           public static void InitializeService(IDataServiceConfiguration config)
           {
               config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
           }
       }
   

   Public Class AdventureWorksService
       Inherits DataService(Of AdventureWorksLTEntities)
   
       ' This method is called only once to initialize service-wide policies.
       Public Shared Sub InitializeService(ByVal config As IDataServiceConfiguration)
           config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All)
           config.UseVerboseErrors = True
       End Sub
   End Class
   

   Этот код обновляет класс AdventureWorksService, делая его производным от DataService<T>, работающего с классом контекста объекта AdventureWorksLTEntities в вашей модели EDM. Он также обновляет метод InitializeService, чтобы предоставить клиентам службы полный доступ на чтение/запись к сущности SalesOrderHeader.

2. Соберите проект и убедитесь в отсутствии ошибок.

Создание клиентского приложения WPF

Чтобы отобразить данные из Служба данных WCF, создайте новое приложение WPF с источником данных, основанным на этой службе. Позднее в этом пошаговом руководстве вы добавите в приложение элементы управления с привязкой к данным.

Порядок создания клиентского приложения WPF

1. В Обозревателе решений щелкните правой кнопкой мыши узел решения, выберите команду Добавить и пункт Новый проект.

2. В диалоговом окне Новый проект разверните узел Visual C# или Visual Basic, а затем выберите Windows.

3. Выберите шаблон проекта Приложение WPF.

4. В поле Имя введите AdventureWorksSalesEditor и нажмите кнопку ОК.

   Visual Studio добавляет проект AdventureWorksSalesEditor в решение.

5. В меню Данные выберите команду Показать источники данных.

   Открывается окно Источники данных.

6. В окне Источники данных выберите Добавить новый источник данных.

   Появится мастер настройки источника данных.

7. На странице Выбор типа источника данных мастера выберите Служба и нажмите кнопку Далее.

8. В диалоговом окне Добавление ссылки на службу щелкните элемент Найти.

   Visual Studio выполняет поиск доступных служб в текущем решении и добавляет AdventureWorksService.svc в список доступных служб в поле Службы.

9. Введите AdventureWorksService в поле Пространство имен.

10. В поле Службы щелкните AdventureWorksService.svc и нажмите кнопку ОК.

    Visual Studio загружает сведения о службе и возвращается в Мастер настройки источника данных.

11. На странице Добавление ссылки на службу нажмите кнопку Готово.

    Visual Studio добавляет узлы, которые представляют данные, возвращаемые службой в окно Источники данных.

Определение пользовательского интерфейса окна

Добавьте несколько кнопок в окно, изменив в XAML в конструкторе WPF. Позднее в рамках данного пошагового руководства вы добавите код, позволяющий пользователям просматривать и обновлять торговые записи с помощью этих кнопок.

Создание макета окна

1. В Обозревателе решений дважды щелкните файл MainWindow.xaml.

   Открывается окно в Конструкторе WPF.

2. В представлении XAML конструктора добавьте следующий код между тегами <Grid>:

   <Grid.RowDefinitions>  
       <RowDefinition Height="75" />  
       <RowDefinition Height="525" />  
   </Grid.RowDefinitions>  
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button>  
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button>  
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>  
   

3. Выполните построение проекта.

Создание элементов управления с привязкой к данным

Создайте элементы управления, отображающие записи клиентов, перетащив узел SalesOrderHeaders из окна Источники данных в конструктор.

Порядок создания элементов управления с привязкой к данным

1. В окне Источники данных щелкните раскрывающееся меню для узла SalesOrderHeaders и выберите команду Сведения.

2. Разверните узел SalesOrderHeaders.

3. Для данного примера некоторые поля не отображаются, поэтому щелкните раскрывающееся меню рядом со следующими узлами и выберите Нет.

   • CreditCardApprovalCode

   • ModifiedDate

   • OnlineOrderFlag

   • RevisionNumber

   • rowguid

   Это действие не позволяет Visual Studio создать элементы управления с привязкой к данным для этих узлов на следующем шаге. В данном пошаговом руководстве подразумевается, что конечному пользователю не требуется просматривать эти данные.

4. Из окна Источники данных перетащите узел SalesOrderHeaders на строку сетки под строкой с кнопками.

   Visual Studio формирует XAML и код, который создает набор элементов управления, привязанных к данным в таблице Продукт. Дополнительные сведения о созданном XAML и коде см. в разделе Привязка элементов управления WPF к данным в Visual Studio.

5. Щелкните в конструкторе текстовое поле рядом с меткой Идентификатор клиента.

6. В окне Свойства установите флажок рядом со свойством IsReadOnly.

7. Установите свойство IsReadOnly для каждого из следующих текстовых полей.

   • Номер заказа на поставку

   • Код заказа на продажу

   • Номер заказа на продажу

Загрузка данных из службы

Используйте прокси-объект службы для загрузки торговых данных из службы, а затем назначьте возвращенные данные источнику данных для CollectionViewSource в окне WPF.

Порядок загрузки данных из службы

1. В конструкторе дважды щелкните текст MainWindow, чтобы создать обработчик событий Window_Loaded.

2. Замените этот обработчик событий следующим кодом. Убедитесь, что вы заменили адрес localhost в этом коде на локальный адрес вашего компьютера разработчика.

           private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
           private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
           private CollectionViewSource ordersViewSource;
   
           private void Window_Loaded(object sender, RoutedEventArgs e)
           {
               // TODO: Modify the port number in the following URI as required.
               dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
                   new Uri("https://localhost:45899/AdventureWorksService.svc"));
               salesQuery = dataServiceClient.SalesOrderHeaders;
   
               ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
               ordersViewSource.Source = salesQuery.Execute();
               ordersViewSource.View.MoveCurrentToFirst();
           }
   

       Private DataServiceClient As AdventureWorksService.AdventureWorksLTEntities
       Private SalesQuery As System.Data.Services.Client.DataServiceQuery(Of AdventureWorksService.SalesOrderHeader)
       Private OrdersViewSource As CollectionViewSource
   
       Private Sub Window_Loaded(ByVal Sender As Object, ByVal e As RoutedEventArgs) Handles MyBase.Loaded
   
           ' TODO: Modify the port number in the following URI as required.
           DataServiceClient = New AdventureWorksService.AdventureWorksLTEntities( _
           New Uri("https://localhost:32415/AdventureWorksService.svc"))
           SalesQuery = DataServiceClient.SalesOrderHeaders
   
           OrdersViewSource = CType(Me.FindResource("SalesOrderHeadersViewSource"), CollectionViewSource)
           OrdersViewSource.Source = SalesQuery.Execute()
           OrdersViewSource.View.MoveCurrentToFirst()
       End Sub
   

Навигация по торговым записям

Добавьте код, позволяющий пользователям выполнять прокрутку торговых записей с помощью кнопок < и >.

Предоставление пользователям возможности навигации по торговым записям

1. В конструкторе дважды щелкните кнопку < на поверхности окна.

   Visual Studio открывает файл кода программной части и создает новый обработчик событий backButton_Click для события Click.

2. Добавьте следующий код в созданный обработчик событий backButton_Click:

               if (ordersViewSource.View.CurrentPosition > 0)
                   ordersViewSource.View.MoveCurrentToPrevious();
   

           If OrdersViewSource.View.CurrentPosition > 0 Then
               OrdersViewSource.View.MoveCurrentToPrevious()
           End If
   

3. Вернитесь в конструктор и дважды щелкните кнопку >.

   Visual Studio открывает файл кода программной части и создает новый обработчик событий nextButton_Click для события Click.

4. Добавьте следующий код в созданный обработчик событий nextButton_Click:

               if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
               {
                   ordersViewSource.View.MoveCurrentToNext();
               }
   

           If OrdersViewSource.View.CurrentPosition < CType(OrdersViewSource.View, CollectionView).Count - 1 Then
               OrdersViewSource.View.MoveCurrentToNext()
           End If
   

Сохранение изменений в торговых записях

Добавьте код, позволяющий пользователям просматривать и сохранять изменения в торговых записях с помощью кнопки Сохранить изменения.

Добавление возможности сохранения изменений в торговых записях

1. В конструкторе дважды щелкните кнопку Сохранить изменения.

   Visual Studio открывает файл кода программной части и создает новый обработчик событий saveButton_Click для события Click.

2. Добавьте следующий код в обработчик событий saveButton_Click.

               AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
               dataServiceClient.UpdateObject(currentOrder);
               dataServiceClient.SaveChanges();
   

           Dim CurrentOrder As AdventureWorksService.SalesOrderHeader = CType(OrdersViewSource.View.CurrentItem, AdventureWorksService.SalesOrderHeader)
   
           DataServiceClient.UpdateObject(CurrentOrder)
           DataServiceClient.SaveChanges()
   

Тестирование приложения

Выполните сборку и запуск приложения, чтобы убедиться, что вы можете просмотреть и обновить записи клиентов.

Тестирование приложения

1. В меню Сборка выберите Собрать решение. Убедитесь, что сборка решения выполняется без ошибок.

2. Нажмите сочетание клавиш CTRL + F5.

   Visual Studio запускает проект AdventureWorksService без его отладки.

3. В Обозревателе решений щелкните правой кнопкой мыши проект AdventureWorksSalesEditor.

4. В области Отладка контекстного меню выберите команду Запустить новый экземпляр.

   Выполняется запуск приложения. Проверьте следующее.

   • Текстовые поля отображают разные поля данных из первой торговой записи, имеющей код заказа на продажу 71774.

   • Вы можете нажать кнопку > или < для перехода по другим торговым записям.

5. Введите текст в поле Комментарий для одной из торговых записей, а затем нажмите кнопку Сохранить изменения.

6. Закройте приложение и снова запустите его из Visual Studio.

7. Перейдите к измененной торговой записи и убедитесь, что изменения сохранились после перезапуска приложения.

8. Закройте приложение.

Следующие действия

После прохождения пошагового руководства вы можете выполнить следующие задачи.

• Узнайте, как использовать окно Источники данных в Visual Studio для привязки элементов управления WPF к другим типам источников данных. Для получения дополнительной информации см. Пошаговое руководство. Привязка элементов управления WPF к набору данных.

• Узнайте, как использовать окно Источники данных в Visual Studio для отображения связанных данных (то есть данных в отношении "родитель — потомок") в элементах управления WPF. Для получения дополнительной информации см. Пошаговое руководство. Отображение связанных данных в приложении WPF.

См. также

Привязка элементов управления WPF к данным в Visual Studio
Практическое руководство. Привязка элементов управления WPF к данным в Visual Studio
Пошаговое руководство. Привязка элементов управления WPF к набору данных
Общие сведения
Общие сведения о платформе Entity Framework
Общие сведения о конструкторах WPF и Silverlight
Общие сведения о связывании данных