Фильтрация основных и подробных сведений с помощью раскрывающегося списка и списка данных (VB)

Статья
07/13/2023

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

Введение

Отчет master/detail, который мы впервые создали с помощью GridView в предыдущем руководстве по фильтрации главных и подробных сведений с помощью раскрывающегося списка, начинается с отображения некоторых наборов "главных" записей. Затем пользователь может детализировать одну из главных записей, тем самым просматривая "сведения" этой главной записи. Отчеты master/detail идеально подходят для визуализации связей "один ко многим" и для отображения подробных сведений из особенно "широких" таблиц (которые имеют много столбцов). Мы изучили, как реализовать основные и подробные отчеты с помощью элементов управления GridView и DetailsView в предыдущих руководствах. В этом руководстве и следующих двух мы повторно рассмотрим эти понятия, но сосредоточимся на использовании элементов управления DataList и Repeater.

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

Шаг 1. Добавление веб-страниц главного и подробного руководства

Прежде чем приступить к работе с этим руководством, давайте сначала добавим папку и страницы ASP.NET, которые потребуются для работы с этим руководством, а также для следующих двух дел с отчетами master/detail с помощью элементов управления DataList и Repeater. Начните с создания новой папки в проекте с именем DataListRepeaterFiltering. Затем добавьте в эту папку следующие пять ASP.NET страниц, настроив их для использования главной страницы Site.master:

Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx

Создание папки DataListRepeaterFiltering и добавление страниц руководства ASP.NET

Рис. 1. Создание DataListRepeaterFiltering папки и добавление страниц руководства ASP.NET

Затем откройте Default.aspx страницу и перетащите SectionLevelTutorialListing.ascx элемент управления пользователем из UserControls папки в область конструктора. Этот элемент управления пользователем, созданный в руководстве по эталонным страницам и навигации сайта, перечисляет карту сайта и отображает учебники из текущего раздела в маркированном списке.

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

Для отображения основных и подробных руководств, которые мы создадим, необходимо добавить их на карту сайта. Web.sitemap Откройте файл и добавьте следующую разметку после разметки узла карты сайта DataList и 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>

Обновление карты сайта, чтобы включить новые страницы ASP.NET

Рис. 3. Обновление карты сайта для включения новых страниц ASP.NET

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

Наш главный или подробный отчет будет перечислять категории в Раскрывающемся списке, с продуктами выбранного элемента списка, отображаемыми далее на странице в DataList. Первая задача перед нами, а затем — иметь категории, отображаемые в DropDownList. Начните с открытия FilterByDropDownList.aspx страницы в DataListRepeaterFiltering папке и перетащите DropDownList из панели элементов в конструктор страницы. Затем задайте для свойства DropDownList ID значение Categories. Щелкните ссылку "Выбрать источник данных" из смарт-тега DropDownList и создайте новый объект ObjectDataSource с именем CategoriesDataSource.

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

Настройте новый Объект ObjectDataSource таким образом, чтобы он вызвал CategoriesBLL метод класса GetCategories() . После настройки ObjectDataSource необходимо указать, какое поле источника данных должно отображаться в раскрывающемся списке, и которое должно быть связано в качестве значения для каждого элемента списка. CategoryName Укажите поле в качестве отображения и CategoryID в качестве значения для каждого элемента списка.

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

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

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

Шаг 2. Добавление списка данных "Продукты"

Последним шагом в нашем главном или подробном отчете является перечисление продуктов, связанных с выбранной категорией. Для этого добавьте DataList на страницу и создайте объект ObjectDataSource с именем ProductsByCategoryDataSource. ProductsByCategoryDataSource Получите данные элемента управления из ProductsBLL метода классаGetProductsByCategoryID(categoryID). Так как этот главный или подробный отчет доступен только для чтения, выберите параметр (Нет) на вкладках INSERT, UPDATE и DELETE.

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

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

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

После завершения работы мастера настройки источника данных Visual Studio автоматически создаст ItemTemplate для DataList имя и значение каждого поля данных. Давайте усовершенствоваем DataList, чтобы вместо этого использовать ItemTemplate только имя продукта, категорию, поставщик, количество за единицу и цену вместе с SeparatorTemplate элементом, который внедряет элемент между каждым элементом <hr> . Я буду использовать пример в руководстве по отображению данных с помощью dataList и repeater Controls, но вы можете использовать ItemTemplate любую разметку шаблона, которую вы найдете наиболее визуально привлекательно.

После внесения этих изменений разметка 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 необходимо выполнить обратную передачу. Для этого можно задать свойство true DropDownList AutoPostBack или добавить веб-элемент управления Button на страницу. В этом руководстве я решил задать для свойства DropDownList AutoPostBack значение true.

Рис. 9 и 10 иллюстрируют главный или подробный отчет в действии.

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

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

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

При первом посещении FilterByDropDownList.aspx страницы первый элемент списка (напитки) dropDownList выбирается по умолчанию, показывая продукты напитков в DataList. В руководстве по фильтру master/Detail Filtering With a DropDownList мы добавили параметр "-- Выбрать категорию --" в раскрывающийся список, выбранный по умолчанию, и при выборе отображался все продукты в базе данных. Такой подход был управляем при перечислении продуктов в GridView, так как каждая строка продукта заняла небольшое количество экранных недвижимости. Однако при использовании DataList данные каждого продукта используют гораздо больший фрагмент экрана. Давайте по-прежнему добавим параметр "-- Выберите категорию --" и выберите его по умолчанию, но вместо того, чтобы отобразить все продукты при выборе, давайте настроим его таким образом, чтобы он не отображал продукты.

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

Добавление

Рис. 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 true DropDownList значение, так как если оно задано false (по умолчанию), когда категории привязаны к DropDownList из ObjectDataSource, они перезаписывают все элементы списка, добавленные вручную.

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

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

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

Рис. 13. При выборе элемента списка "--" элемент списка не отображается (щелкните, чтобы просмотреть изображение полного размера)

Если вы предпочитаете отображать все продукты при выборе параметра "-- Выбрать категорию-", используйте вместо этого значение -1 . Средство чтения будет вспомнить, что еще в руководстве по фильтру master/Detail With a DropDownList мы обновили ProductsBLL метод класса GetProductsByCategoryID(categoryID) , чтобы, если categoryID значение -1 было передано, возвращаются все записи продукта.

Итоги

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

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

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

Об авторе

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

Особое спасибо...

Эта серия учебников была проверена многими полезными рецензентами. Ведущий рецензент для этого руководства был Ранди Шмидт. Хотите просмотреть мои предстоящие статьи MSDN? Если да, упадите меня линию в mitchell@4GuysFromRolla.com.

Назад Далее

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