Пошаговое руководство. Ввод данных в бизнес-приложении Silverlight

В этом пошаговом руководстве описывается создание бизнес-приложения Silverlight, которое отображает данные из образца базы данных AdventureWorks на двух различных страницах Silverlight. Первая страница отображает данные из таблицы SalesOrderHeader и обеспечивает поддержку для страницы в записях базы данных. Вторая страница позволяет пользователям выполнить запрос на основе даты.

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

• Создание бизнес-приложения Silverlight, состоящего из двух проектов: клиента Silverlight и веб-приложения ASP.NET.

• Изменение имени приложения путем изменения строки ресурса.

• Создание модели EDM на основе файла базы данных.

• Создание службы домена, предоставляющей данные в модели EDM для клиента Silverlight. Дополнительные сведения см. в разделе Службы доменов.

• Изменение и добавление пользовательских запросов к службе домена.

• Создание дополнительных страниц Silverlight в целях представления данных для пользователей.

• Добавление кнопок на панели навигации по умолчанию для доступа к страницам Silverlight.

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

• Сортировка и разбиение данных по страницам.

• Настройка пользовательского интерфейса для принятия параметров запроса.

Предварительные требования

Для использования этого и других пошаговых руководств, представленных в документации Службы WCF RIA, необходимо установить и правильно настроить ряд обязательных программ, таких как среда выполнения Visual Studio 2010 и пакет SDK Silverlight, а также Службы WCF RIA и набор средств Службы WCF RIA. Для их использования также необходимо установить и настроить SQL Server 2008 R2, экспресс-выпуск с дополнительными службами, и установить базы данных AdventureWorks OLTP и LT.

Подробные инструкции по выполнению каждого из этих предварительных требований приведены в разделах узла Основные компоненты для службы WCF полнофункционального интернет-приложения. До начала использования этого пошагового руководства необходимо выполнить приведенные ниже инструкции, что позволит уменьшить количество проблем, которые могут возникнуть при выполнении шагов, описанных в руководствах Службы RIA .

В этом пошаговом руководстве предполагается возможность создания бизнес-приложения Silverlight. Процедура выполнения этой задачи описана в Пошаговое руководство. Использование шаблона бизнес-приложения Silverlight.

Создание бизнес-приложения Silverlight

Бизнес-приложения Silverlight являются решениями, состоящими из двух проектов: приложения Silverlight и веб-приложения ASP.NET, в котором размещается приложение Silverlight. Бизнес-приложения Silverlight имеют встроенные функции. По умолчанию в них предусмотрены домашняя страница, страница со сведениями о программе, панель навигации и функции регистрации веб-узла. Также предоставляется имя приложения по умолчанию в виде строки ресурса, которая заменяется на имя приложения.

Создание приложения

1. В Visual Studio 2010 создайте новый проект бизнес-приложения Silverlight на языке Visual Basic или C# с именем AdventureWorksApp. Процедура выполнения этой задачи описана в Пошаговое руководство. Использование шаблона бизнес-приложения Silverlight.

   Решение AdventureWorksApp состоит из двух проектов: проекта AdventureWorksApp Silverlight и проекта веб-приложения AdventureWorksApp.Web.

2. В обозревателе решений разверните проект AdventureWorksApp.

3. Разверните папку Assets, а затем разверните элемент Resources.

4. Дважды щелкните ApplicationStrings.resx, чтобы открыть конструктор ресурсов.

5. Измените Значение строки ресурса ApplicationName на Adventure Works Application.

6. Сохраните изменения и закройте файл ApplicationStrings.resx.

7. Запустите приложение.

   Откроется домашняя страница, на которой будет отображен проект по умолчанию с обновленным именем приложения.

Создание модели данных для приложения

Для управления данными в приложении используется модель EDM.

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

1. В обозревателе решений щелкните правой кнопкой мыши AdventureWorksApp.Web, затем Добавить и выберите пункт Создать элемент.

   Появится диалоговое окно Добавление нового элемента.

2. В категории Данные выберите шаблон Модель ADO.NET EDM.

   

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

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

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

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

   Появится диалоговое окно Свойства соединения.

6. Выберите файл базы данных Microsoft SQL Server в качестве источника данных и укажите местоположение файла базы данных AdventureWorksLT.

7. Нажмите кнопку ОК.

8. На странице Выбор подключения к данным нажмите кнопку Далее.

9. Если появится сообщение с запросом, нужно ли скопировать файл базы данных в проект и изменить соединение, нажмите кнопку Да.

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

11. Установите флажок рядом с таблицей SalesOrderHeader (Sales LT).

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

    В конструкторе сущностей отобразится таблица SalesOrderHeader.

13. Создайте решение.

    Решение необходимо создать до добавления службы домена.

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

Служба домена предоставляет клиенту доступ к сущностям данных и операциям в модели данных. В этой процедуре в серверный проект добавляется служба домена.

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

1. В обозревателе решений щелкните правой кнопкой мыши AdventureWorksApp.Web, затем Добавить и выберите пункт Создать элемент.

   Появится диалоговое окно Добавление нового элемента.

2. В категории Web выберите шаблон Класс DomainService.

3. Присвойте классу DomainService имя AdventureWorksService и нажмите кнопку Добавить.

   Откроется диалоговое окно Добавление нового класса DomainService.

4. Установите флажки SalesOrderHeader и Включить редактирование и щелкните ОК.

   

5. Создайте решение.

Изменение запроса службы домена

При добавлении класса службы домена он предварительно заполняется методами запроса. В некоторых случаях эти методы запросов можно использовать без каких-либо изменений. Однако во многих случаях изменения необходимы. В этой процедуре изменяется метод запроса GetSalesOrderHeaders.

Изменение запроса DomainService

1. В обозревателе решений дважды щелкните AdventureWorksService.vb или AdventureWorksService.cs, чтобы открыть этот файл.

2. Обновите метод GetSalesOrderHeaders, как показано в следующем примере кода.

   Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.OrderBy(Function(e) e.SalesOrderID)
   End Function
   

   public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
   {
       return this.ObjectContext.SalesOrderHeaders.OrderBy(e=>e.SalesOrderID);
   }
   

3. Создайте решение.

Создание страницы Silverlight для отображения данных

В этой процедуре добавляется страница OrderList, чтобы отобразить данные из таблицы SalesOrderHeader.

Создание страницы Silverlight

1. В обозревателе решений в проекте AdventureWorksApp щелкните правой кнопкой мыши папку Views и добавьте новый элемент.

2. В диалоговом окне Добавление нового элемента выберите категорию Silverlight, а затем шаблон Страница Silverlight.

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

   В конструкторе откроется OrderList.xaml.

4. В области элементов перетащите TextBlock в верхнюю часть конструктора.

5. В окне «Свойства» измените свойство Текст на Список заказов.

6. Сохраните страницу OrderList.xaml.

Добавление кнопки навигации к домашней странице

В этой процедуре к домашней странице приложения добавляется кнопка для перехода к странице OrderList.

Создание кнопки навигации

1. В обозревателе решений дважды щелкните MainPage.xaml, чтобы открыть этот файл в конструкторе.

2. В представлении XAML добавьте следующую разметку после строки <HyperlinkButton x:Name="Link2" ... />.

   <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
   <HyperlinkButton x:Name="Link3" Content="Order List" Style="{StaticResource LinkStyle}" NavigateUri="/OrderList" TargetName="ContentFrame"/>
   

3. Запустите приложение.

   На панели навигации должна появиться кнопка Список заказов.

4. Нажмите кнопку Список заказов.

   Отобразится страница OrderList.

Отображение данных заказов на странице OrderList

В этой процедуре создается и настраивается DataGrid для отображения данных заказов путем перетаскивания сущности заказа из окна Источники данных в конструктор.

Создание DataGrid с привязкой к данным

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

2. Щелкните меню Данные, а затем щелкните Показать источники данных.

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

3. Из окна Источники данных перетащите узел SalesOrderHeader в конструктор (ниже блока текста «Список заказов»).

   В области конструктора отображается DataGrid, заполненный заголовками столбцов из таблицы SalesOrderHeader.

   

4. Запустите приложение.

5. На панели навигации нажмите кнопку Список заказов.

   Данные заказов отображаются на странице «Список заказов».

   

Добавление пользовательских запросов к службе домена

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

Добавление пользовательских запросов к службе домена

1. В Обозревателе решений дважды щелкните AdventureWorksService.vb или AdventureWorksService.cs.

2. Добавьте к классу AdventureWorksService следующие методы:

   Public Function GetOrdersWithSmallSubtotals() As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.SubTotal <= 2000).OrderBy(Function(p) p.SubTotal)
   End Function
   
   Public Function GetShipDateBefore(ByVal shipDate As DateTime) As IQueryable(Of SalesOrderHeader)
       Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.ShipDate < shipDate).OrderBy(Function(p) p.SalesOrderID)
   End Function
   

   public IQueryable<SalesOrderHeader> GetOrdersWithSmallSubtotals()
   {
       return this.ObjectContext.SalesOrderHeaders.Where(e => e.SubTotal <= 2000).OrderBy(e => e.SubTotal);
   }
   
   public IQueryable<SalesOrderHeader> GetShipDateBefore(DateTime shipDate)
   {
       return this.ObjectContext.SalesOrderHeaders.Where(e => e.ShipDate < shipDate).OrderBy(e => e.SalesOrderID);
   }
   

3. При использовании Visual Basic в верхней части файла AdventureWorksService.vb задайте значение Option Strict, равное Off.

4. Создайте решение.

Отображение данных из пользовательского запроса

В этой процедуре данные нового запроса отображаются путем выбора запроса в окне Источники данных и перетаскивания его в DataGrid, который уже находится в конструкторе. Это действие перенастраивает привязку DataGrid для отображения данных из выбранного запроса.

Отображение данных из пользовательского запроса в существующем DataGrid

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

2. В окне Источники данных щелкните SalesOrderHeader, а затем щелкните раскрывающееся меню.

   

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

3. Выберите GetOrdersWithSmallSubtotalsQuery в списке запросов для задания в качестве запроса для этой сущности.

4. Перетащите узел SalesOrderHeader в существующий DataGrid в конструкторе.

5. Запустите приложение.

6. Нажмите кнопку Список заказов.

   Обратите внимание, что в DataGrid подытог заказа не превышает 2000.

   

Добавление сортировки

Кроме сортировки данных с помощью предложения OrderBy, в базовых запросах можно также настроить сортировку в коде XAML страницы. Сортировку можно настроить, добавив SortDescriptors к DomainDataSource. Можно добавить SortDescriptors в XAML непосредственно или с помощью окна Свойства, как показано в следующей процедуре.

Добавление SortDescriptors с помощью окна свойств

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

2. В представлении XAML поместите курсор в элемент riaControls:DomainDataSource, для атрибута Name которого задано salesOrderHeaderDomainDataSource1.

   Внимание!
   В файле имеется два элемента riaControls:DomainDataSource. Убедитесь, что курсор мыши помещен в элемент, для атрибута Name которого задано salesOrderHeaderDomainDataSource1.

3. В окне Свойства щелкните свойство SortDescriptors и нажмите кнопку с многоточием (…).

   

   Откроется редактор коллекции SortDescriptors.

4. Нажмите кнопку Добавить.

   Будет добавлен элемент SortDescriptors.

5. В окне Свойства разверните категорию Другие.

6. В столбце значений PropertyPath введите CustomerID.

7. Нажмите кнопку ОК.

   Обратите внимание на то, что к элементу riaControls:DomainDataSource был добавлен следующий код XAML.

   <riaControls:DomainDataSource.SortDescriptors>
       <riaControls:SortDescriptor PropertyPath="CustomerID" />
   </riaControls:DomainDataSource.SortDescriptors>
   

8. Запустите приложение.

9. Нажмите кнопку Список заказов.

   Следует учитывать, что данные сортируются по списку идентификаторов клиента.

   

   Внимание!

   Если разбиение на страницы реализуется одновременно с сортировкой, включите хотя бы один объект SortDescriptor, атрибут PropertyPath которого будет назначен свойству, содержащему уникальные значения, например первичному ключу. Также можно добавить предложение OrderBy, основанное на свойстве, которое содержит уникальные значения для запроса в DomainDataSource. Если выполняется только сортировка данных по свойству, не содержащему уникальных значений, то в возвращаемых значениях на разных страницах возможно рассогласование или потеря данных.

Добавление разбиения на страницы

В этой процедуре добавляется разбиение по страницам путем добавления DataPager к источнику данных. В качестве DataPager.Source задается DomainDataSource, управляющий данными, которые контролируются страничным навигатором.

Настройка постраничного просмотра данных

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

2. В области элементов найдите элемент управления DataPager.

3. Перетащите DataPager в область конструктора ниже DataGrid.

4. В окне Источники данных щелкните узел SalesOrderHeader, щелкните раскрывающееся меню и убедитесь, что выбран GetOrdersWithSmallSubtotalsQuery.

5. Перетащите узел SalesOrderHeader в DataPager.

   При этом для свойства Source DataPager будет задан правильный источник данных.

6. В конструкторе выберите DataPager.

7. В окне Свойства установите для свойства PageSize значение 5.

8. Запустите приложение.

9. Нажмите кнопку Список заказов.

10. Нажмите кнопки навигации на DataPager для одновременного перемещения 5 записей в DataGrid.

    

Создание страницы для поиска заказов по дате

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

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

1. В проекте AdventureWorksApp в папке Views добавьте новую страницу Silverlight с именем OrderSearchByShipDateBefore.xaml.

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

3. В представлении XAML добавьте следующий код после строки <HyperlinkButton x:Name="Link3" ... />.

   <Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
   <HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>
   

4. В обозревателе решений дважды щелкните OrderSearchByShipDateBefore.xaml.

5. В окне Источники данных щелкните узел SalesOrderHeader, а затем щелкните раскрывающееся меню.

6. Выберите GetShipDateBeforeQuery для задания в качестве запроса для этой сущности.

   

7. Перетащите узел SalesOrderHeader в конструктор.

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

   

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

В этой процедуре выполняется создание и запуск приложения для проверки соответствия режима работы приложения требованиям.

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

1. В меню Построение выберите команду Построить решение.

   Убедитесь, что построение решения было выполнено без ошибок.

2. Запустите приложение.

3. Нажмите кнопку Дата отгрузки, чтобы открыть страницу с помощью запроса даты отгрузки.

4. В поле Дата отгрузки введите дату, например 1/1/2006.

5. Щелкните Загрузка.

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

   

6. Попробуйте указать другие даты отгрузки.

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

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

• Ознакомиться с описанием способов изменения записей с сохранением изменений в базе данных. Дополнительные сведения см. в разделе Пошаговое руководство. Изменение данных в службе домена.

См. также

Основные понятия

Клиенты Silverlight