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

2025-04-30

В этом руководстве мы реализуем этот шаблон с помощью GridView для перечисления поставщиков в базе данных. Каждая строка поставщика в GridView будет содержать ссылку view Products, которая при щелчке приведет пользователя к отдельной странице, которая перечисляет эти продукты для выбранного поставщика.

Введение

В предыдущих двух руководствах мы узнали, как отображать основные и подробные отчеты на одной веб-странице с помощью DropDownLists для отображения главных записей и элемента управления GridView или DetailsView для отображения "подробностей". Другой распространенный шаблон, используемый для отчетов master/details, заключается в наличии главных записей на одной веб-странице и сведений, отображаемых на другой. Веб-сайт форума, например форумы ASP.NET, является отличным примером этого шаблона на практике. Форумы ASP.NET состоят из различных направлений: Начало работы, веб-формы, элементы управления презентацией данных и т. д. Каждый форум состоит из множества потоков, и каждый поток состоит из нескольких записей. На домашней странице форума ASP.NET перечислены форумы. Щелкнув по форуму, вы переходите на страницу ShowForum.aspx, где перечислены темы этого форума. Аналогично, нажав на тему, вы перейдете к ShowPost.aspx, где отображаются посты для нажатой темы.

В этом руководстве мы реализуем этот шаблон с помощью GridView для перечисления поставщиков в базе данных. Каждая строка поставщика в GridView будет содержать ссылку view Products, которая при щелчке приведет пользователя к отдельной странице, которая перечисляет эти продукты для выбранного поставщика.

Шаг 1. Добавление`SupplierListMaster.aspx`и`ProductsForSupplierDetails.aspx`страницы в папку`Filtering`

При определении макета страницы в третьем руководстве мы добавили ряд начальных страниц в BasicReportingпапку , Filteringа также CustomFormatting папки. Тем не менее, мы не добавили начальную страницу для этого руководства в то время, поэтому потребуется некоторое время, чтобы добавить две новые страницы в Filtering папку: SupplierListMaster.aspx и ProductsForSupplierDetails.aspx. SupplierListMaster.aspx выводит список записей master (поставщиков) в то время как ProductsForSupplierDetails.aspx будет отображать продукты для выбранного поставщика.

При создании этих двух новых страниц обязательно свяжите их с главной страницей Site.master .

Добавление страниц SupplierListMaster.aspx и ProductsForSupplierDetails.aspx в папку фильтрации

Рис. 1. Добавьте страницы SupplierListMaster.aspx и ProductsForSupplierDetails.aspx в папку Filtering

Кроме того, при добавлении новых страниц в проект обязательно обновите файл карты сайта, Web.sitemapсоответственно. В данной инструкции просто добавьте страницу на SupplierListMaster.aspx карту сайта с помощью следующего XML-содержимого в качестве дочернего элемента Фильтрация отчетов <siteMapNode> :

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another."
/>

Замечание

Вы можете помочь автоматизировать процесс обновления файла карты сайта при добавлении новых страниц ASP.NET, используя бесплатный макрос Visual Studio Site Map Macro К. Скотта Аллена.

Шаг 2. Отображение списка поставщиков в`SupplierListMaster.aspx`

Создав страницы SupplierListMaster.aspx и ProductsForSupplierDetails.aspx, следующим шагом будет создание GridView поставщиков в SupplierListMaster.aspx. Добавьте GridView на страницу и привяжите его к новому ObjectDataSource. Этот объект ObjectDataSource должен использовать SuppliersBLL метод класса GetSuppliers() для возврата всех поставщиков.

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

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

Нам нужно включить ссылку с названием "Просмотр продуктов" в каждой строке GridView, которая при щелчке будет направлять пользователя на ProductsForSupplierDetails.aspx, передавая значение SupplierID выбранной строки через параметры запроса. Например, если пользователь щелкает на ссылку "Просмотр товаров" для поставщика Токио Трейдерс (который имеет SupplierID значение 4), он должен быть отправлен ProductsForSupplierDetails.aspx?SupplierID=4.

Для этого добавьте HyperLinkField в GridView, который добавляет гиперссылку к каждой строке GridView. Начните, щелкнув ссылку "Изменить столбцы" из смарт-тега GridView. Затем выберите HyperLinkField из списка в левом верхнем углу и нажмите кнопку "Добавить", чтобы включить HyperLinkField в список полей GridView.

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

HyperLinkField можно настроить для использования одинаковых текстовых или URL-значений ссылки в каждой строке GridView или базировать эти значения на значениях данных, привязанных к каждой строке. Чтобы указать статическое значение для всех строк, используйте свойства HyperLinkField Text или NavigateUrl. Так как мы хотим, чтобы текст ссылки был одинаковым для всех строк, задайте для свойства HyperLinkField Text значение View Products.

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

Чтобы задать значения текста или URL-адреса, основанные на базовых данных, привязанных к строке GridView, укажите поля данных, из которые должны быть извлечены значения текста или URL-адреса.DataTextFieldDataNavigateUrlFields DataTextField можно задать только одно поле данных; DataNavigateUrlFieldsОднако можно задать список полей данных с разделителями-запятыми. Часто нам необходимо создать текст или URL-адрес, основываясь на значении поля данных текущей строки в сочетании с некоторой статической разметкой. В этом руководстве, например, мы хотим, чтобы URL-адрес ссылок в HyperLinkField был ProductsForSupplierDetails.aspx?SupplierID=supplierID, где supplierID — это значение SupplierID каждой строки GridView. Обратите внимание, что здесь требуются как статические, так и управляемые данными значения: ProductsForSupplierDetails.aspx?SupplierID= часть URL-адреса ссылки является статичной, тогда как supplierID часть определяется на основе данных и её значение соответствует значению SupplierID каждой строки.

Чтобы указать сочетание статических и управляемых данными значений, используйте DataTextFormatString свойства и DataNavigateUrlFormatString свойства. В этих свойствах введите статическую разметку по мере необходимости, а затем используйте маркер {0}, в котором вы хотите, чтобы отображалось значение поля, указанного в свойствах DataTextField или DataNavigateUrlFields. Если для свойства указано несколько полей, используйте DataNavigateUrlFields для вставки первого значения, {0} для второго значения и так далее.

Применяя это к нашему руководству, необходимо установить свойству DataNavigateUrlFields значение SupplierID, так как это поле данных, значение которого необходимо настроить для каждой строки, а свойству DataNavigateUrlFormatString - значение ProductsForSupplierDetails.aspx?SupplierID={0}.

Рисунок 6: Настройте HyperLinkField для включения правильного URL-адреса ссылки на основе элемента SupplierID (щелкните, чтобы просмотреть изображение полного размера)

После добавления HyperLinkField можно настроить и изменить порядок полей GridView. Следующая разметка отображает GridView после внесения некоторых небольших настроек на уровне полей.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="SupplierID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
            DataNavigateUrlFormatString=
            "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
          HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
          SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country"
          SortExpression="Country" />
    </Columns>
</asp:GridView>

Просмотрите страницу SupplierListMaster.aspx через браузер. Как показано на рисунке 7, на странице перечислены все поставщики, включая ссылку "Просмотр продуктов". Щелкнув ссылку "Просмотреть продукты", вы перейдете на ProductsForSupplierDetails.aspx, передавая информацию поставщика SupplierID в строке запроса.

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

Шаг 3. Перечисление продуктов поставщика в`ProductsForSupplierDetails.aspx`

На этом этапе SupplierListMaster.aspx страница перенаправляет пользователей на ProductsForSupplierDetails.aspx, передавая выбранного поставщика SupplierID в строке запросов. Последний шаг руководства — отображение продуктов в GridView, ProductsForSupplierDetails.aspx в котором SupplierID равно SupplierID передано через строку запроса. Для этого сначала добавьте GridView на ProductsForSupplierDetails.aspx страницу, используя новый элемент управления ObjectDataSource с именем ProductsBySupplierDataSource , который вызывает GetProductsBySupplierID(supplierID) метод из ProductsBLL класса.

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

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

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

Последний шаг мастера настройки источника данных запрашивает у нас источник GetProductsBySupplierID(supplierID) параметра метода supplierID . Чтобы использовать значение запроса, задайте источнику параметров значение QueryString и введите имя значения запроса, используемого в текстовом поле QueryStringField (SupplierID).

Рис. 11. Заполнение supplierID значения параметра из SupplierID значения запроса (щелкните, чтобы просмотреть изображение полного размера)

Вот и всё! На Рисунке 12 показана страница ProductsForSupplierDetails.aspx при переходе по ссылке "Токио Traders" из SupplierListMaster.aspx.

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

Отображение сведений о поставщике в`ProductsForSupplierDetails.aspx`

Как показано на рисунке 12, на ProductsForSupplierDetails.aspx странице просто перечислены продукты, поставляемые SupplierID, указанным в строке запроса. Кто-то, кто был отправлен напрямую на эту страницу, не знал бы, что на рис. 12 показаны товары компании Tokyo Traders. Чтобы устранить эту проблему, мы также можем отобразить сведения о поставщике на этой странице.

Начните с добавления FormView над таблицей продуктов GridView. Создайте новый элемент управления ObjectDataSource с именем SuppliersDataSource , который вызывает SuppliersBLL метод класса GetSupplierBySupplierID(supplierID) .

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

Рис. 14. Вызов GetSupplierBySupplierID(supplierID) метода ObjectDataSource (щелкните, чтобы просмотреть изображение полного размера)

Как и в случае с ProductsBySupplierDataSource, параметру supplierID присваивают значение параметра строки запроса SupplierID.

Рис. 15. Заполнение supplierID значения параметра из SupplierID значения запроса (щелкните, чтобы просмотреть изображение полного размера)

При привязке FormView к ObjectDataSource в представлении конструктора, Visual Studio автоматически создаст управляющие элементы FormView ItemTemplate, InsertItemTemplate, и EditItemTemplate с элементами управления Label и TextBox для каждого из полей данных, возвращаемых ObjectDataSource. Поскольку мы просто хотим отобразить сведения о поставщике, можете смело удалить InsertItemTemplate и EditItemTemplate. Затем измените элемент ItemTemplate, чтобы он отображал имя компании поставщика в <h3> элементе и адресе, городе, стране или регионе и номере телефона под именем компании. Кроме того, можно вручную задать formView DataSourceID и создать разметку ItemTemplate , как мы сделали в руководстве по отображению данных с помощью ObjectDataSource.

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

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

На рисунке 16 показан снимок страницы ProductsForSupplierDetails.aspx экрана после включения вышеупомянутых сведений о поставщике.

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

Нанесение финальных штрихов на пользовательский`ProductsForSupplierDetails.aspx`интерфейс

Чтобы улучшить пользовательский опыт, необходимо внести пару дополнений на страницу ProductsForSupplierDetails.aspx этого отчета. В настоящее время единственный способ, который пользователь может перейти с ProductsForSupplierDetails.aspx страницы обратно в список поставщиков, — нажать кнопку "Назад" браузера. Давайте добавим элемент управления HyperLink на страницу ProductsForSupplierDetails.aspx, которая будет ссылаться обратно на страницу SupplierListMaster.aspx, предоставляя пользователю другой способ вернуться к главному списку.

Рис. 17. Добавьте элемент управления HyperLink для возврата пользователя на SupplierListMaster.aspx (нажмите, чтобы просмотреть изображение в полном размере)

Если пользователь щелкает ссылку "Просмотр продуктов" для поставщика, у которого нет продуктов, ProductsBySupplierDataSource объект ObjectDataSource в ProductsForSupplierDetails.aspx не вернет никаких результатов. GridView, привязанный к ObjectDataSource, не будет рендерить никакую разметку, в результате чего на странице в браузере пользователя останется пустое место. Чтобы более четко сообщить пользователю, что нет продуктов, связанных с выбранным поставщиком, мы можем задать свойство GridView EmptyDataText в сообщение, которое мы хотим отобразить, когда возникает такая ситуация. Для этого свойства задано значение "Нет продуктов, предоставляемых этим поставщиком"

По умолчанию все поставщики в базе данных Northwinds предоставляют по крайней мере один продукт. Однако в этом руководстве я вручную изменил таблицу Products, чтобы поставщик Escargots Nouveaux больше не был связан ни с одним продуктом. На рисунке 18 показана страница сведений для Escargots Nouveaux после внесения этого изменения.

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

Сводка

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

На странице сведений получение этих продуктов для указанного поставщика выполнялось путем вызова метода ProductsBLL класса GetProductsBySupplierID(supplierID). supplierID Значение параметра было указано декларативно с помощью запроса в качестве источника параметров. Мы также рассмотрели, как отобразить сведения о поставщике на странице сведений с помощью FormView.

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

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

Сведения о авторе

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

Особое спасибо кому

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

Предыдущая следующая

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

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

Введение

Шаг 1. ДобавлениеSupplierListMaster.aspxиProductsForSupplierDetails.aspxстраницы в папкуFiltering

Шаг 2. Отображение списка поставщиков вSupplierListMaster.aspx

Шаг 3. Перечисление продуктов поставщика вProductsForSupplierDetails.aspx

Отображение сведений о поставщике вProductsForSupplierDetails.aspx

Нанесение финальных штрихов на пользовательскийProductsForSupplierDetails.aspxинтерфейс