Поделиться через

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

  • Статья

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

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

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

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

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

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

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

Примечание.

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

Необходимые компоненты

Для выполнения этого пошагового руководства требуются следующие компоненты:

  • Visual Studio

  • Доступ к запущенному экземпляру SQL Server или SQL Server Express с подключенной учебной базой данных AdventureWorksLT. Чтобы скачать базу данных, см . примеры баз данных AdventureWorks

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

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

  1. Запустите это пошаговое руководство, создав проект веб-приложения C# или Visual Basic ASP.NET. Назовите проект AdventureWorksService.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создайте службу данных WCF для предоставления данных в модели данных сущности приложению 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);
    }
}

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

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

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

Чтобы отобразить данные из службы данных WCF, создайте новое приложение 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. В конструкторе, чтобы создать Window_Loaded обработчик событий, дважды щелкните текст, который считывает: MainWindow.

  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("http://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

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

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

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

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

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

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

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

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

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

Сохранение изменений в записях продаж

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

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

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

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

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

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

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

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

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

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

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

  4. В меню правой кнопкой мыши (контекстное меню) в разделе Отладка нажмите кнопку "Пуск нового экземпляра".

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

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

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

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

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

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

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

Следующие шаги

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

Связанный контент