Фильтрация "Основной/подробности" с помощью элемента управления DropDownList (VB)

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

Скачивание примера приложения или Загрузка PDF-файла

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

Введение

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

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

Шаг 1. Отображение категорий в элементе DropDownList

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

указать источник данных DropDownList

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

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

добавить новый элемент управления ObjectDataSource с именем CategoriesDataSource

Рис. 2. Добавление нового элемента управления ObjectDataSource с именем CategoriesDataSource (щелкните, чтобы просмотреть изображение с полным размером)

выбрать использование класса CategoriesBLL

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

настроить ObjectDataSource для использования метода-Categories ()

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

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

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

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

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

раскрывающийся список с текущими категориями

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

Шаг 2. Добавление элемента управления GridView для продуктов

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

выбрать метод GetProductsByCategoryID (КодТипа)

Рис. 7. выбор метода GetProductsByCategoryID(categoryID) (щелкните, чтобы просмотреть изображение с полным размером)

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

задать для параметра categoryID значение элемента DropDownList категорий

Рис. 8. Установка для параметра categoryID значения Categories DropDownList (щелкните, чтобы просмотреть изображение с полным размером)

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

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

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

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

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

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

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

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

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

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

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

Рис. 11. Добавление a--Выбор категории--элемент списка (щелкните, чтобы просмотреть изображение с полным размером)

Кроме того, можно добавить элемент списка, добавив в 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.

Присвойте свойству Аппенддатабаундитемс значение 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) предполагает, что передано целочисленное значение, в то время как в учебнике по декларативным параметрам мы передали входной параметр String.

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

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

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

Сводка

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

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

Поздравляем с программированием!

Об авторе

Скотт Митчелл, автор семи книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями Майкрософт с 1998. Скотт работает как независимый консультант, преподаватель и модуль записи. Его последняя книга — Sams обучать себя ASP.NET 2,0 за 24 часа. Он доступен по адресу mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.