Фильтрация основных и подробных данных с помощью элемента управления DropDownList и GridView (VB)

Скотт Митчелл

Загрузить PDF-файл

В этом руководстве показано, как отобразить записи master в элементе управления DropDownList и сведения о выбранном элементе списка в GridView.

Введение

Распространенным типом отчета является отчет master/подробный отчет, в котором отчет начинается с отображения некоторого набора записей "master". Затем пользователь может детализировать одну из записей master, просматривая таким образом сведения master записи. Отчеты с основными и подробными данными — это идеальный вариант для визуализации связей "один ко многим", например отчет со всеми категориями, а затем позволяет пользователю выбрать определенную категорию и отобразить связанные с ней продукты. Кроме того, master/подробные отчеты полезны для отображения подробных сведений из особенно "широких" таблиц (которые содержат много столбцов). Например, уровень "master" отчета master/детализации может отображать только название продукта и цену за единицу продуктов в базе данных, а детализация на конкретный продукт — дополнительные поля продукта (категория, поставщик, количество на единицу и т. д.).

Существует множество способов реализации master/подробных отчетов. В рамках этого и трех следующих учебников мы рассмотрим различные master/подробные отчеты. В этом руководстве показано, как отобразить записи master в элементе управления DropDownList и сведения о выбранном элементе списка в GridView. В частности, в отчете master/подробном руководстве будут перечислены сведения о категории и продукте.

Шаг 1. Отображение категорий в раскрывающемся списке

В нашем master/подробном отчете будут перечислены категории в Раскрывающемся списке, а продукты выбранного элемента списка отображаются далее вниз на странице в GridView. Поэтому перед нами стоит задача, чтобы категории отображались в Раскрывающемся списке. Откройте страницу FilterByDropDownList.aspx в папке Filtering , перетащите DropDownList с панели элементов в конструктор страницы и задайте для его ID свойства значение Categories. Затем щелкните ссылку Выбрать источник данных в смарт-теге DropDownList. Откроется мастер настройки источника данных.

Указание источника данных DropDownList

Рис. 1. Указание источника данных Раскрывающегося списка (щелкните, чтобы просмотреть полноразмерное изображение)

Выберите добавление нового объекта ObjectDataSource с именем CategoriesDataSource , который вызывает CategoriesBLL метод класса GetCategories() .

Добавление нового объекта ObjectDataSource с именем CategoriesDataSource

Рис. 2. Добавление нового объекта ObjectDataSource с именем CategoriesDataSource (щелкните для просмотра полноразмерного изображения)

Выбор использования класса CategoriesBLL

Рис. 3. Выбор использования CategoriesBLL класса (щелкните для просмотра полноразмерного изображения)

Настройка ObjectDataSource для использования метода GetCategories()

Рис. 4. Настройка ObjectDataSource для использования GetCategories() метода (щелкните для просмотра полноразмерного изображения)

После настройки ObjectDataSource по-прежнему необходимо указать, какое поле источника данных должно отображаться в DropDownList, а какое должно быть связано в качестве значения для элемента списка. Укажите поле в CategoryName качестве отображаемого и CategoryID в качестве значения для каждого элемента списка.

Отображение поля CategoryName в раскрывающемся списке и использование CategoryID в качестве значения

Рис. 5. Отображение поля в раскрывающемся списке CategoryName и использование CategoryID в качестве значения (щелкните для просмотра полноразмерного изображения)

На этом этапе у нас есть элемент управления DropDownList, который заполняется записями из Categories таблицы (все это выполняется примерно за шесть секунд). На рисунке 6 показан прогресс, достигнутый на данный момент при просмотре через браузер.

Drop-Down Списки текущих категорий

Рис. 6. Drop-Down Списки текущих категорий (щелкните для просмотра полноразмерного изображения)

Шаг 2. Добавление элемента Products GridView

Последний шаг в нашем master/подробном отчете — перечисление продуктов, связанных с выбранной категорией. Для этого добавьте GridView на страницу и создайте объект ObjectDataSource с именем productsDataSource. productsDataSource Чтобы элемент управления выверял свои данные из ProductsBLL метода классаGetProductsByCategoryID(categoryID).

Выберите метод GetProductsByCategoryID(categoryID)

Рис. 7. Выбор GetProductsByCategoryID(categoryID) метода (щелкните для просмотра полноразмерного изображения)

После выбора этого метода мастер ObjectDataSource запрашивает значение параметра метода categoryID . Чтобы использовать значение выбранного categories элемента DropDownList, задайте для параметра источник значение Control, а для ControlID — значение Categories.

Задайте для параметра categoryID значение параметра Categories DropDownList.

Рис. 8. Задайте categoryID для параметра значение Categories раскрывающегося списка (щелкните для просмотра полноразмерного изображения)

На минутку проверка ход выполнения в браузере. При первом посещении страницы эти продукты относятся к выбранной категории (Напитки) отображаются (как показано на рис. 9), но изменение DropDownList не обновляет данные. Это связано с тем, что для обновления GridView необходимо выполнить обратную передачу. Для этого у нас есть два варианта (ни один из которых не требует написания кода):

  • Задайте для свойства AutoPostBackdropDownList категории значение True. (Это можно сделать, установив флажок Включить AutoPostBack в смарт-теге DropDownList.) Это активирует обратную передачу при каждом изменении пользователем выбранного элемента DropDownList. Таким образом, когда пользователь выбирает новую категорию из Раскрывающегося списка, будет выполнена обратная связь, и GridView будет обновлен с продуктами для только что выбранной категории. (Это подход, который я использовал в этом руководстве.)
  • Добавьте веб-элемент управления Кнопка рядом с Раскрывающимся списком. Задайте для его Text свойства значение Refresh или что-то подобное. При таком подходе пользователю потребуется выбрать новую категорию и нажать кнопку . Нажатие кнопки приведет к обратной отправке и обновлению GridView, чтобы получить список продуктов выбранной категории.

На рисунках 9 и 10 показан отчет master/подробностей в действии.

При первом посещении страницы отображаются продукты напитков

Рис. 9. При первом посещении страницы отображаются продукты для напитков (щелкните для просмотра полноразмерного изображения)

Выбор нового продукта (производство) автоматически приводит к обратной отправке, обновлению GridView

Рис. 10. Выбор нового продукта (производство) автоматически вызывает обратную передачу, обновление GridView (щелкните, чтобы просмотреть полноразмерное изображение)

Добавление элемента списка "-- Выбор категории"-"

При первом посещении FilterByDropDownList.aspx страницы первый элемент списка DropDownList (Напитки) выбирается по умолчанию, отображая продукты напитков в GridView. Вместо того, чтобы отображать продукты первой категории, мы, возможно, захотите выбрать элемент DropDownList, который содержит примерно следующее: "-- Выберите категорию --".

Чтобы добавить новый элемент списка в DropDownList, перейдите к окно свойств и щелкните многоточие в свойстве Items . Добавьте новый элемент списка с Text "-- Выберите категорию --" и Value-1.

Добавление — выбор категории — элемент списка

Рис. 11. Добавление - Выбор категории - Элемент списка (щелкните для просмотра полноразмерного изображения)

Кроме того, можно добавить элемент списка, добавив следующую разметку в DropDownList:

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Кроме того, необходимо задать для элемента управления AppendDataBoundItems DropDownList значение True, так как если категории привязаны к DropDownList из ObjectDataSource, они будут перезаписывать все элементы списка, добавленные вручную, если AppendDataBoundItems значение не равно True.

Задайте для свойства AppendDataBoundItems значение True.

Рис. 12. Присвойте свойству AppendDataBoundItems значение True

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

На начальной странице Загрузка продуктов не отображается

Рис. 13. На начальной странице загрузки продукты не отображаются (щелкните для просмотра полноразмерного изображения)

Причина, по которой продукты не отображаются, если выбран элемент списка "-- Выбрать категорию --", заключается в том, что его значение равно -1 , а в базе данных нет продуктов с CategoryID .-1 Если это нужное поведение, то на этом этапе все готово! Если же вы хотите отобразить все категории при выборе элемента списка "-- Выбрать категорию --", вернитесь к классу ProductsBLL и настройте GetProductsByCategoryID(categoryID) метод таким образом, чтобы он вызвал GetProducts() метод , если переданный categoryID параметр меньше нуля:

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

Метод, используемый здесь, аналогичен подходу, который мы использовали для отображения всех поставщиков в руководстве по декларативным параметрам , хотя в этом примере мы используем значение -1 , чтобы указать, что все записи должны быть извлечены, а не Nothing. Это связано с тем, что categoryID параметр GetProductsByCategoryID(categoryID) метода ожидает передачи целочисленного значения, в то время как в учебнике По декларативным параметрам мы передавали строковый входной параметр.

На рисунке 14 показан снимок FilterByDropDownList.aspx экрана с выбранным параметром "-- Выбрать категорию --". Здесь все продукты отображаются по умолчанию, и пользователь может сузить дисплей, выбрав определенную категорию.

Все продукты теперь перечислены по умолчанию

Рис. 14. Все продукты теперь перечислены по умолчанию (щелкните для просмотра полноразмерного изображения)

Сводка

При отображении иерархически связанных данных часто бывает полезно представить данные с помощью master/подробных отчетов, из которых пользователь может начать просматривать данные из верхней части иерархии и детализировать их. В этом руководстве мы рассмотрели создание простого master/подробного отчета с продуктами выбранной категории. Для этого используется DropDownList для списка категорий и GridView для продуктов, принадлежащих к выбранной категории.

В следующем руководстве мы рассмотрим интерфейс DropDownList на один шаг вперед, используя два DropDownList.

Счастливое программирование!

Об авторе

Скотт Митчелл (Scott Mitchell), автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с Веб-технологиями Майкрософт с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 2.0 в 24 часа. Его можно связать по адресу mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.