Отображение сводной информации в нижнем колонтитуле элемента управления GridView (VB)

Статья
07/13/2023

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

Введение

Помимо просмотра цен на каждую из продуктов, единиц на складе, единиц в заказе и уровней переупорядочения, пользователь также может быть заинтересован в агрегированной информации, такой как средняя цена, общее количество единиц на складе и т. д. Такие сводные сведения часто отображаются в нижней части отчета в строке сводки. Элемент управления GridView может включать строку нижнего колонтитула, в ячейки которой можно программно внедрять агрегированные данные.

Эта задача ставит перед нами три задачи:

Настройка GridView для отображения строки нижнего колонтитула
Определение суммарных данных; то есть, как мы вычислим среднюю цену или общее количество единиц на складе?
Внедрение сводных данных в соответствующие ячейки строки нижнего колонтитула

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

Рис. 1. Сводная информация отображается в строке нижнего колонтитула GridView (щелкните для просмотра полноразмерного изображения)

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

Шаг 1. Добавление раскрывающегося списка категорий и элемента Products GridView

Прежде чем приступить к добавлению сводной информации в нижний колонтитул GridView, давайте сначала создадим отчет master/подробностей. Завершив этот первый шаг, мы рассмотрим, как включить сводные данные.

Начните с открытия страницы SummaryDataInFooter.aspx в папке CustomFormatting . Добавьте элемент управления DropDownList и задайте для его ID значение Categories. Затем щелкните ссылку Выбрать источник данных в смарт-теге DropDownList и добавьте новый объект ObjectDataSource с именем CategoriesDataSource , который вызывает CategoriesBLL метод класса GetCategories() .

Рис. 2. Добавление нового объекта ObjectDataSource с именем CategoriesDataSource (щелкните для просмотра полноразмерного изображения)

Рис. 3. Вызов CategoriesBLL метода класса GetCategories() с помощью ObjectDataSource (щелкните для просмотра полноразмерного изображения)

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

Рис. 4. Используйте CategoryName поля и CategoryID в Text качестве и Value для ListItem соответственно (щелкните для просмотра полноразмерного изображения)

На этом этапе у нас есть Раскрывающийся список (Categories), который перечисляет категории в системе. Теперь нам нужно добавить Элемент GridView со списком продуктов, относящихся к выбранной категории. Прежде чем это сделать, уделите некоторое время, чтобы проверка флажок Включить AutoPostBack в смарт-теге DropDownList. Как описано в учебнике Фильтрация основных и подробных данных с помощью DropDownList, при установке свойства True DropDownList AutoPostBack на страницу будет отправляться обратно при каждом изменении значения DropDownList. Это приведет к обновлению GridView, отображая эти продукты для только что выбранной категории. Если свойству AutoPostBack присвоено значение False (по умолчанию), изменение категории не приведет к обратной отправке и, следовательно, не обновит перечисленные продукты.

Рис. 5. Установите флажок Включить AutoPostBack в смарт-теге Раскрывающегося списка (щелкните для просмотра полноразмерного изображения)

Добавьте элемент управления GridView на страницу, чтобы отобразить продукты для выбранной категории. Задайте для GridView ID значение ProductsInCategory и привяжите его к новому объекту ObjectDataSource с именем ProductsInCategoryDataSource.

Рис. 6. Добавление нового объекта ObjectDataSource с именем ProductsInCategoryDataSource (щелкните для просмотра полноразмерного изображения)

Настройте ObjectDataSource таким образом, чтобы он вызвал ProductsBLL метод класса GetProductsByCategoryID(categoryID) .

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

GetProductsByCategoryID(categoryID) Так как метод принимает входной параметр, на последнем шаге мастера можно указать источник значения параметра. Чтобы отобразить эти продукты из выбранной категории, извлеките параметр из Раскрывающегося Categories списка.

Рис. 8. Получение значения параметра из раскрывающегося categoryID списка "Выбранные категории" (щелкните для просмотра полноразмерного изображения)

После завершения работы мастера GridView будет иметь BoundField для каждого свойства продукта. Давайте очистим эти Поля BoundField, чтобы отображались только ProductNameполя , UnitPrice, UnitsInStockи UnitsOnOrder BoundFields. Вы можете добавлять любые параметры уровня поля в оставшиеся поля BoundFields (например, форматирование UnitPrice в виде валюты). После внесения этих изменений декларативная разметка GridView должна выглядеть примерно так:

<asp:GridView ID="ProductsInCategory" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ProductsInCategoryDataSource"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="Units In Stock" SortExpression="UnitsInStock">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="Units On Order" SortExpression="UnitsOnOrder">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

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

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

Элемент управления GridView может отображать строку верхнего и нижнего колонтитулов. Эти строки отображаются в зависимости от значений ShowHeader свойств и ShowFooter соответственно, при ShowHeader этом по умолчанию используется значение True и ShowFooterFalse. Чтобы включить нижний колонтитул в GridView, просто задайте для его ShowFooter свойства значение True.

Рис. 10. Задайте свойству GridView ShowFooter значение True (щелкните для просмотра полноразмерного изображения)

Строка нижнего колонтитула содержит ячейку для каждого поля, определенного в GridView; однако эти ячейки по умолчанию пусты. Уделите немного времени, чтобы просмотреть наш прогресс в браузере. Если теперь свойству ShowFooter присвоено значение True, GridView включает пустую строку нижнего колонтитула.

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

Строка нижнего колонтитула на рис. 11 не выделяется, так как она имеет белый фон. Давайте создадим FooterStyle класс CSS в Styles.css , который задает темно-красный фон, а затем настроим GridView.skin файл Обложки в DataWebControls Theme, чтобы назначить этот класс CSS свойству GridView CssClassFooterStyle. Если вам нужно освежить скины и темы, вернитесь к учебнику Отображение данных с помощью ObjectDataSource .

Начните с добавления следующего класса CSS в Styles.css:

.FooterStyle
{
    background-color: #a33;
    color: White;
    text-align: right;
}

Класс FooterStyle CSS по стилю похож на HeaderStyle класс , хотя HeaderStyleцвет фона немного темнее, а его текст отображается полужирным шрифтом. Кроме того, текст в нижнем колонтитуле выравнивается по правому краю, а текст верхнего колонтитула по центру.

Затем, чтобы связать этот класс CSS с каждым нижним колонтитулов GridView, откройте GridView.skin файл в DataWebControls theme и задайте FooterStyleсвойство .CssClass После этого добавления разметка файла должна выглядеть следующим образом:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

Как показано на снимке экрана ниже, это изменение делает нижний колонтитул более четкой.

Рис. 12. Строка нижнего колонтитула GridView теперь имеет красный цвет фона (щелкните для просмотра полноразмерного изображения)

Шаг 3. Вычисление сводных данных

После отображения нижнего колонтитула GridView следующей задачей является вычисление сводных данных. Существует два способа вычисления этих статистических сведений:

С помощью SQL-запроса мы можем отправить дополнительный запрос к базе данных для вычисления сводных данных для определенной категории. SQL включает ряд агрегатных функций вместе с предложением GROUP BY для указания данных, по которым следует суммировать данные. Следующий SQL-запрос вернет необходимые сведения:
```
SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID
```
Конечно, вы не хотите выполнять этот запрос непосредственно со SummaryDataInFooter.aspx страницы, а создав метод в ProductsTableAdapter и ProductsBLL.
Вычислить эти сведения при их добавлении в GridView, как описано в руководстве по настраиваемого форматированию на основе данных , обработчик событий GridView RowDataBound срабатывает один раз для каждой строки, добавляемой в GridView после получения данных. Создав обработчик событий для этого события, мы можем сохранить текущее общее количество значений, которые требуется агрегировать. После привязки последней строки данных к GridView мы получили итоги и сведения, необходимые для вычисления среднего значения.

Я обычно использую второй подход, так как он экономит поездку в базу данных и усилия, необходимые для реализации функции сводки в уровне доступа к данным и уровне бизнес-логики, но этого было бы достаточно. В этом руководстве давайте воспользуемся вторым вариантом и отслеживаем итоговый объем выполнения с помощью обработчика RowDataBound событий.

Создайте RowDataBound обработчик событий для GridView, выбрав GridView в Designer, щелкнув значок молнии в окно свойств и дважды щелкнув RowDataBound событие. Кроме того, можно выбрать GridView и его событие RowDataBound из раскрывающихся списков в верхней части файла класса ASP.NET кода программной части. При этом будет создан обработчик событий с именем ProductsInCategory_RowDataBound в SummaryDataInFooter.aspx классе кода программной части страницы.

Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
End Sub

Чтобы сохранить итоговый объем, необходимо определить переменные за пределами область обработчика событий. Создайте следующие четыре переменные на уровне страницы:

_totalUnitPrice, с типом Decimal
_totalNonNullUnitPriceCount, с типом Integer
_totalUnitsInStock, с типом Integer
_totalUnitsOnOrder, с типом Integer

Затем напишите код для увеличения этих трех переменных для каждой строки данных, обнаруженной в обработчике RowDataBound событий.

Dim _totalUnitPrice As Decimal = 0
Dim _totalNonNullUnitPriceCount As Integer = 0
Dim _totalUnitsInStock As Integer = 0
Dim _totalUnitsOnOrder As Integer = 0
Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() Then
            _totalUnitPrice += product.UnitPrice
            _totalNonNullUnitPriceCount += 1
        End If
        If Not product.IsUnitsInStockNull() Then
            _totalUnitsInStock += product.UnitsInStock
        End If
        If Not product.IsUnitsOnOrderNull() Then
            _totalUnitsOnOrder += product.UnitsOnOrder
        End If
    ElseIf e.Row.RowType = DataControlRowType.Footer Then
        Dim avgUnitPrice As Decimal = _
            _totalUnitPrice / CType(_totalNonNullUnitPriceCount, Decimal)
        e.Row.Cells(1).Text = "Avg.: " & avgUnitPrice.ToString("c")
        e.Row.Cells(2).Text = "Total: " & _totalUnitsInStock.ToString()
        e.Row.Cells(3).Text = "Total: " & _totalUnitsOnOrder.ToString()
    End If
End Sub

Обработчик RowDataBound событий начинается с того, что мы имеем дело с DataRow. После установки экземпляр, Northwind.ProductsRow который был только что привязан к объекту GridViewRow в , e.Row сохраняется в переменной product. Затем общее количество переменных увеличивается на соответствующие значения текущего продукта (при условии, что они не содержат значения базы данных NULL ). Мы отслеживаем как общее количество операций UnitPrice , так и количество записейNULLUnitPrice , не являющихся записями, так как средняя цена является коэффициентом этих двух чисел.

Шаг 4. Отображение сводных данных в нижнем колонтитуле

После суммарных данных последний шаг — отобразить их в строке нижнего колонтитула GridView. Эту задачу также можно выполнить программным способом с помощью обработчика RowDataBound событий. Помните, что RowDataBound обработчик событий срабатывает для каждой строки, привязанной к GridView, включая строку нижнего колонтитула. Таким образом, мы можем дополнить обработчик событий для отображения данных в строке нижнего колонтитула с помощью следующего кода:

Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
      ... Increment the running totals ...
    ElseIf e.Row.RowType = DataControlRowType.Footer
      ... Display the summary data in the footer ...
    End If
End Sub

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

Чтобы отобразить текст в определенной ячейке нижнего колонтитула, используйте e.Row.Cells(index).Text = value, где Cells индексирование начинается с 0. Следующий код вычисляет среднюю цену (общую цену, делимую на количество продуктов) и отображает ее вместе с общим количеством единиц на складе и единиц по заказу в соответствующих ячейках нижнего колонтитула GridView.

Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
      ... <i>Increment the running totals</i> ...
    ElseIf e.Row.RowType = DataControlRowType.Footer
      Dim avgUnitPrice As Decimal = _
        _totalUnitPrice / CType(_totalNonNullUnitPriceCount, Decimal)
      e.Row.Cells(1).Text = "Avg.: " & avgUnitPrice.ToString("c")
      e.Row.Cells(2).Text = "Total: " & _totalUnitsInStock.ToString()
      e.Row.Cells(3).Text = "Total: " & _totalUnitsOnOrder.ToString()
    End If
End Sub

На рисунке 13 показан отчет после добавления этого кода. Обратите внимание, ToString("c") что приводит к тому, что суммарные сведения о средней цене форматируются в виде валюты.

Рис. 13. Строка нижнего колонтитула GridView теперь имеет красный цвет фона (щелкните для просмотра полноразмерного изображения)

Сводка

Отображение сводных данных является распространенным требованием отчета, и элемент управления GridView позволяет легко включать такие сведения в строку нижнего колонтитула. Строка нижнего колонтитула отображается, когда свойству GridView ShowFooter присвоено значение True и может программно задавать текст в ячейках с помощью обработчика RowDataBound событий. Вычисление сводных данных можно выполнить путем повторного запроса к базе данных или с помощью кода в классе кода программной части страницы ASP.NET для программного вычисления сводных данных.

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

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

Об авторе

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