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

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

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

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

Введение

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

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

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

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

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

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

Кроме того, при добавлении новых страниц в проект обязательно обновите файл Web.sitemapкарты сайта соответствующим образом. Для работы с этим руководством просто добавьте страницу SupplierListMaster.aspx на карту сайта, используя следующее XML-содержимое в качестве дочернего элемента элемента Filtering Reports <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 К. Скотта Аллена.

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

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

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

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

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

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

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

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

Рис. 5. Задайте для свойства HyperLinkField Text значение View Products (Щелкните для просмотра полноразмерного изображения)

Чтобы задать значения текста или URL-адреса, основанные на базовых данных, привязанных к строке GridView, укажите поля данных, из которые следует извлечь значения текста или URL-адреса в DataTextField свойствах или DataNavigateUrlFields . 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} то место, где нужно вставить первое значение поля, {1} для второго значения поля и т. д.

Применив это к нашему учебнику, необходимо задать 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, присвойте источнику параметров значение QueryString и введите имя значения querystring, которое будет использоваться в текстовом поле QueryStringField (SupplierID).

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

Вот и все! На рисунке 12 показана ProductsForSupplierDetails.aspx страница при посещении, щелкнув ссылку Tokyo Traders из SupplierListMaster.aspx.

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

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

Как показано на рисунке 12, на ProductsForSupplierDetails.aspx странице просто перечислены продукты, предоставляемые SupplierID указанным в поле querystring. Однако кто-то, отправленный непосредственно на эту страницу, не будет знать, что на рисунке 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 автоматически создаст , и EditItemTemplate FormView ItemTemplateInsertItemTemplateс веб-элементами управления 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на , предоставляя пользователю еще один способ вернуться к списку master.

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

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

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

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

Сводка

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

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

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

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

Об авторе

Скотт Митчелл (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.

НазадВперед