Фильтрация основных и подробных данных с помощью раскрывающегося списка и списка данных (VB)
В этом руководстве показано, как отобразить master/подробные отчеты на одной веб-странице с помощью DropDownLists для отображения записей master и DataList для отображения сведений.
Введение
Отчет master/подробностей, который мы впервые создали с помощью GridView в предыдущем руководстве Фильтрация основных и подробных данных с помощью DropDownList, начинается с некоторого набора записей master. Затем пользователь может детализировать одну из записей master, просматривая таким образом сведения master записи. Отчеты с основными и подробными данными идеально подходят для визуализации связей "один ко многим" и для отображения подробных сведений из особенно "широких" таблиц (которые содержат большое количество столбцов). В предыдущих руководствах мы рассмотрели, как реализовать master/подробные отчеты с помощью элементов управления GridView и DetailsView. В этом и двух следующих руководствах мы пересмотрим эти понятия, но сосредоточимся на использовании элементов управления DataList и Repeater.
В этом руководстве мы рассмотрим использование DropDownList для хранения записей master с записями details, отображаемыми в DataList.
Шаг 1. Добавление веб-страниц учебника по основным и подробным сведениям
Прежде чем приступить к работе с этим руководством, давайте добавим папку и страницы ASP.NET, необходимые для работы с этим руководством, а также в следующих двух разделах, посвященных master/подробным отчетам с помощью элементов управления DataList и Repeater. Для начала создайте в проекте папку с именем DataListRepeaterFiltering. Затем добавьте следующие пять страниц ASP.NET в эту папку, чтобы все они были настроены для использования master страницы Site.master:
Default.aspxFilterByDropDownList.aspxCategoryListMaster.aspxProductsForCategoryDetails.aspxCategoriesAndProducts.aspx
Рис. 1. Создание DataListRepeaterFiltering папки и добавление страниц руководства ASP.NET
Затем откройте страницу Default.aspx и перетащите SectionLevelTutorialListing.ascx элемент управления "Пользовательский элемент управления" из UserControls папки в область Конструктор. В этом пользовательском элементе управления, созданном в руководстве по эталонным страницам и навигации сайта , перечисляется карта сайта и отображаются учебники из текущего раздела в маркированный список.
Рис. 2. Добавление пользовательского SectionLevelTutorialListing.ascx элемента управления в Default.aspx (щелкните для просмотра полноразмерного изображения)
Чтобы маркированный список отображал учебники по master/подробным сведениям, которые мы создадим, необходимо добавить их на карту сайта. Web.sitemap Откройте файл и добавьте следующую разметку после разметки узла карты сайта "Отображение данных с помощью DataList and Repeater":
<siteMapNode
title="Master/Detail Reports with the DataList and Repeater"
description="Samples of Reports that Use the DataList and Repeater Controls"
url="~/DataListRepeaterFiltering/Default.aspx">
<siteMapNode
title="Filter by Drop-Down List"
description="Filter results using a drop-down list."
url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
<siteMapNode
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
<siteMapNode
title="Maser/Detail on One Page"
description="Master records in the left column, details on the right,
both on the same page."
url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
</siteMapNode>
Рис. 3. Обновление карты сайта для включения новых страниц ASP.NET
Шаг 2. Отображение категорий в раскрывающемся списке
В нашем master/подробном отчете будут перечислены категории в Раскрывающемся списке, а продукты выбранного элемента списка отображаются далее вниз на странице в Списке данных. Поэтому перед нами стоит задача, чтобы категории отображались в Раскрывающемся списке. Начните с открытия FilterByDropDownList.aspx страницы в папке DataListRepeaterFiltering и перетащите DropDownList с панели элементов в конструктор страницы. Затем присвойте свойству DropDownList ID значение Categories. Щелкните ссылку Выбрать источник данных в смарт-теге DropDownList и создайте объект ObjectDataSource с именем CategoriesDataSource.
Рис. 4. Добавление нового объекта ObjectDataSource с именем CategoriesDataSource (щелкните для просмотра полноразмерного изображения)
Настройте новый объект ObjectDataSource таким образом, чтобы он вызвал CategoriesBLL метод класса GetCategories() . После настройки ObjectDataSource нам по-прежнему нужно указать, какое поле источника данных должно отображаться в DropDownList, а какое должно быть связано в качестве значения для каждого элемента списка. Укажите поле в CategoryName качестве отображаемого и CategoryID в качестве значения для каждого элемента списка.
Рис. 5. Отображение поля в раскрывающемся списке CategoryName и использование CategoryID в качестве значения (щелкните для просмотра полноразмерного изображения)
На этом этапе у нас есть элемент управления DropDownList, который заполняется записями из Categories таблицы (все это выполняется примерно за шесть секунд). На рисунке 6 показан прогресс, достигнутый на данный момент при просмотре через браузер.
Рис. 6. Drop-Down Списки текущих категорий (щелкните для просмотра полноразмерного изображения)
Шаг 2. Добавление списка данных products
Последним шагом в нашем отчете master/подробностей является перечисление продуктов, связанных с выбранной категорией. Для этого добавьте dataList на страницу и создайте объект ObjectDataSource с именем ProductsByCategoryDataSource. ProductsByCategoryDataSource Чтобы элемент управления извлекл свои данные из ProductsBLL метода классаGetProductsByCategoryID(categoryID). Так как этот master/подробный отчет доступен только для чтения, выберите параметр (Нет) на вкладках INSERT, UPDATE и DELETE.
Рис. 7. Выбор GetProductsByCategoryID(categoryID) метода (щелкните для просмотра полноразмерного изображения)
После нажатия кнопки Далее мастер ObjectDataSource запрашивает источник значения для GetProductsByCategoryID(categoryID) параметра метода categoryID . Чтобы использовать значение выбранного categories элемента DropDownList, задайте для параметра источник значение Control, а для ControlID — значение Categories.
Рис. 8. Задайте categoryID для параметра значение Categories раскрывающегося списка (щелкните для просмотра полноразмерного изображения)
После завершения работы мастера настройки источника данных Visual Studio автоматически создаст ItemTemplate для DataList объект , отображающий имя и значение каждого поля данных. Давайте улучшаем DataList, чтобы вместо него использовался , отображающий ItemTemplate только название продукта, категорию, поставщика, количество на единицу и цену, а также SeparatorTemplate элемент , который внедряет элемент между каждым элементом <hr> . Я собираюсь использовать ItemTemplate из примера в руководстве По отображению данных с помощью элементов управления DataList и Repeater , но вы можете использовать любую разметку шаблона, наиболее привлекательной для вас.
После внесения этих изменений ваш DataList и его разметка ObjectDataSource должны выглядеть примерно так:
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
<ItemTemplate>
<h4>
<asp:Label ID="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' />
</h4>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td><asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' /></td>
<td class="ProductPropertyLabel">Supplier:</td>
<td><asp:Label ID="SupplierNameLabel" runat="server"
Text='<%# Eval("SupplierName") %>' /></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Qty/Unit:</td>
<td><asp:Label ID="QuantityPerUnitLabel" runat="server"
Text='<%# Eval("QuantityPerUnit") %>' /></td>
<td class="ProductPropertyLabel">Price:</td>
<td><asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
</tr>
</table>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
<SelectParameters>
<asp:ControlParameter ControlID="Categories" Name="categoryID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
На минутку проверка ход выполнения в браузере. При первом посещении страницы отображаются продукты, относящиеся к выбранной категории (Напитки), (как показано на рис. 9), но изменение DropDownList не обновляет данные. Это связано с тем, что для обновления DataList необходимо выполнить обратную передачу. Для этого можно задать для свойства DropDownList AutoPostBack значение true или добавить веб-элемент управления Кнопка на страницу. В этом руководстве я решил задать для свойства DropDownList AutoPostBack значение true.
На рисунках 9 и 10 показан отчет master/подробностей в действии.
Рис. 9. При первом посещении страницы отображаются продукты для напитков (щелкните для просмотра полноразмерного изображения)
Рис. 10. Выбор нового продукта (производство) автоматически вызывает обратную передачу, обновление списка данных (щелкните для просмотра полноразмерного изображения)
Добавление элемента списка "-- Выбор категории"-"
При первом посещении FilterByDropDownList.aspx страницы первый элемент списка dropDownList (Напитки) выбирается по умолчанию, отображая продукты напитков в DataList. В учебнике Фильтрация основных и подробных данных с помощью DropDownList мы добавили параметр "-- Выберите категорию --" в раскрывающийся список, который был выбран по умолчанию и при выборе отображал все продукты в базе данных. Такой подход был управляемым при перечислении продуктов в GridView, так как каждая строка продукта занимала небольшое количество экранной недвижимости. Однако при использовании DataList сведения о каждом продукте используют гораздо больший кусок экрана. Давайте по-прежнему добавим параметр "-- Выбрать категорию" и выберем его по умолчанию, но вместо того, чтобы отображать все продукты, давайте настроим его так, чтобы в нем не отображались продукты.
Чтобы добавить новый элемент списка в DropDownList, перейдите к окно свойств и щелкните многоточие в свойстве Items . Добавьте новый элемент списка с Text "-- Выберите категорию --" и Value0.
Рис. 11. Добавление элемента списка "-- Выбор категории"
Кроме того, можно добавить элемент списка, добавив следующую разметку в DropDownList:
<asp:DropDownList ID="categories" runat="server" AutoPostBack="True"
DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
DataValueField="CategoryID" EnableViewState="False">
<asp:ListItem Value="0">-- Choose a Category --</asp:ListItem>
</asp:DropDownList>
Кроме того, необходимо задать для элемента управления AppendDataBoundItems DropDownList значение , true так как если он установлен в false значение (значение по умолчанию), при привязке категорий к DropDownList из ObjectDataSource они будут перезаписывать все элементы списка, добавленные вручную.
Рис. 12. Присвойте свойству AppendDataBoundItems значение True
Причина, по которой мы выбрали значение 0 для элемента списка "-- Выберите категорию --", заключается в том, что в системе нет категорий со значением 0, поэтому при выборе элемента списка "-- Выберите категорию --" записи о продуктах не будут возвращены. Чтобы подтвердить это, посетите страницу через браузер. Как показано на рисунке 13, при первоначальном просмотре страницы выбирается элемент списка "-- Выберите категорию --", и продукты не отображаются.
Рис. 13. При выборе элемента списка "-- Выберите категорию", "Продукты не отображаются" (щелкните для просмотра полноразмерного изображения)
Если вы хотите отобразить все продукты при выборе параметра "-- Выбрать категорию --", используйте вместо него значение -1 . Проницательный читатель вспомнит, что еще в учебнике Фильтрация основных и подробных-1 данных с помощью DropDownList мы обновили ProductsBLL метод классаGetProductsByCategoryID(categoryID), чтобы при categoryID передаче значения возвращались все записи продукта.
Сводка
При отображении иерархически связанных данных часто бывает полезно представить данные с помощью master/подробных отчетов, из которых пользователь может начать просматривать данные из верхней части иерархии и детализировать их. В этом руководстве мы рассмотрели создание простого master/подробного отчета с продуктами выбранной категории. Для этого используется DropDownList для списка категорий и DataList для продуктов, принадлежащих к выбранной категории.
В следующем руководстве мы рассмотрим разделение master и подробных записей на двух страницах. На первой странице отобразится список записей master со ссылкой для просмотра сведений. Щелкнув ссылку, пользователь перейдет на вторую страницу, на которой отобразятся сведения о выбранной master записи.
Счастливое программирование!
Об авторе
Скотт Митчелл (Scott Mitchell), автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с Веб-технологиями Майкрософт с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 2.0 в 24 часа. Его можно связать по адресу mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.
Отдельная благодарность...
Эта серия учебников была проверена многими полезными рецензентами. Ведущим рецензентом этого руководства был Рэнди Шмидт. Хотите ознакомиться с моими предстоящими статьями MSDN? Если да, опустите мне строку в mitchell@4GuysFromRolla.com.
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по