Элемент управления GridView

ASP.NET --- Основы ASP.NET --- Элемент управления GridView

GridView — исключительно гибкий табличный элемент управления, предназначенный для демонстрации данных в виде двумерной сетки (grid), или экранной таблицы, состоящей из строк и столбцов. Он включает в себя широкий диапазон встроенных средств, включая выделение, разбиение на страницы и редактирование. К тому же он может быть расширен с помощью шаблонов. Огромным преимуществом GridView перед DataGrid (ASP.NET 1.x) является его поддержка сценариев без кода. Используя GridView, можно без написания кода решать множество распространенных задач, таких как перемещение по страницам и выделение. В DataGrid для получения тех же средств нужно было кодировать обработку событий.

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

Определение столбцов

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

Эта автоматическая генерация столбцов хороша для быстрого создания тестовых страниц, но не предоставляет необходимой гибкости, которая обычно требуется. Например, что если нужно скрыть столбцы, изменить порядок их следования или настроить некоторые аспекты их отображения, такие как форматирование и текст заголовков? Во всех подобных случаях понадобится установить AutoGenerateColumns в false и определить столбцы самостоятельно в разделе <Columns> дескриптора элемента управления GridView.

Каждый столбец может относиться к одному из нескольких разных типов, описанных в таблице ниже. Порядок следования дескрипторов столбцов задает порядок столбцов в GridView:

Наиболее базовым типом столбца является BoundField, который привязывается к одному полю в объекте данных. Например, вот определение столбца с одиночной привязкой, отображающей поле EmployeelD:

<asp:BoundField DataField="EmployeeID" HeaderText="Id" />

Это предоставляет одно усовершенствование по сравнению со столбцом, сгенерированным автоматически, а именно — текст заголовка, который в данном случае изменен с "EmployeeID" на "Id".

Когда вы впервые создаете GridView, свойство AutoGenerateColumns не установлено (и потому используется значение по умолчанию true). После привязки его к элементу управления данными ничего не меняется. Однако если щелкнуть на ссылке Refresh Schema (Обновить схему) смарт-тега элемента управления источником данных, свойство AutoGenerateColumns переключается на false, и Visual Studio добавляет дескриптор <BoundField> к каждому полю, которое находит в источнике данных. Этот подход обладает рядом преимуществ:

• Очень легко настраивать порядок столбцов, их заголовки и прочие детали, меняя свойства объекта столбца.

• Можно скрывать столбцы, которые не должны отображаться, удаляя их дескрипторы (однако не злоупотребляйте этим приемом, поскольку лучше просто уменьшить объем извлекаемых данных, исключив столбцы, которые отображать не требуется).

  Столбец можно скрыть программно. Чтобы это сделать, воспользуйтесь коллекцией Columns для GridView. Например, установка GridView1.Columns[2].Visible в false скрывает третий столбец. Скрытые столбцы полностью удаляются из сгенерированной HTML-разметки.

• Явно определенные столбцы работают быстрее, чем сгенерированные автоматически. Это объясняется тем, что автоматически генерированные столбцы заставляют GridView выполнять рефлексию источника данных во время выполнения.

• Можно добавлять дополнительные столбцы для извлечения, редактирования и т.п.

Если источник данных изменен так, что он возвращает другой набор столбцов, можно повторно сгенерировать столбцы GridView. Просто выберите GridView и щелкните на ссылке Refresh Schema в смарт-теге. Это приведет к очистке всех пользовательских столбцов, которые были добавлены (такие как элементы управления редактированием).

Полное объявление GridView с явными столбцами и источником данных выглядит следующим образом:

<asp:SqlDataSource ID="getEmployeesSDS" runat="server"
             ConnectionString="<%$ ConnectionStrings:Northwind %>"
             SelectCommand="SELECT EmployeeID, FirstName, LastName, BirthDate, Title, City, Notes
                FROM Employees" />

<asp:GridView ID="GridView1" runat="server"
            DataSourceID="getEmployeesSDS" AutoGenerateColumns="False" DataKeyNames="EmployeeID">
            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="Id" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" />
                <asp:BoundField DataField="Title" HeaderText="Title" />
                <asp:BoundField DataField="City" HeaderText="City" />
            </Columns>
</asp:GridView>

При явном объявлении привязанного поля имеется возможность установить другие свойства, которые перечислены в таблице ниже:

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

• Форматирование. Как форматировать строки и значения данных. (Рассматривается в этой статье.)

• Выделение. Как дать возможность пользователю выбирать строку в GridView и реагировать на это.

• Сортировка. Как динамически изменять порядок строк GridView в ответ на щелчки на заголовках столбцов.

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

• Шаблоны. Как получить полный контроль над компоновкой, форматированием и редактированием посредством определения шаблонов.

Форматирование в GridView

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

Сам по себе GridView также предлагает несколько свойств форматирования, которые самоочевидны и потому здесь не раскрываются. К ним относятся GridLines (для добавления и сокрытия рамок сетки), CellPadding и CellSpacing (для управления общими промежутками между ячейками), а также Caption и CaptionAlign (для добавления заголовка в верхней части сетки).

Хотите создать прокручиваемый GridView внутри веб-страницы? Это сделать легко. Просто поместите GridView внутрь элемента управления Panel, установите соответствующий размер панели, а свойство Panel.Scrollbars — в Auto, Vertical или Both.

Форматирование полей

Каждый столбец BoundField предоставляет свойство DataFormatString, которое можно использовать для настройки внешнего вида чисел и дат, используя форматную строку. Форматные строки обычно состоят из заполнителя и индикатора формата, которые заключены в фигурные скобки. Типичная форматная строка выглядит примерно так:

{0:C}

Здесь 0 представляет собой значение, которое будет отформатировано, а буква — предопределенный стиль формата. Буква C означает денежный формат, основанный на установках культуры, касающихся текущего потока. По умолчанию компьютер, настроенный для региона English (United States) работает с локалью en-US и отображает денежные значения с символом доллара (поэтому 3400.34 превращается в $3,400.34). Компьютер, сконфигурированный с локалью ru-RU (Россия) отобразит 3,400.34 руб.

Все сведения о форматах, которые можно использовать, вы найдете в статье «Форматирующие строки». Ниже показан столбец, использующий форматную строку для даты:

<asp:BoundField DataField="BirthDate" HeaderText="BirthDate" DataFormatString="{0:d}" />

Стили

GridView предлагает широкий набор моделей форматирования, которые основаны на стилях. Всего можно установить восемь стилей GridView, описанных в таблице ниже:

Стили — это не простые однозначные свойства. Каждый стиль предоставляет объект Style, включающий свойства для выбора цветов (ForeColor и BackColor), добавления рамок (BorderColor, BorderStyle и BorderWidth), установки размеров строки (Height и Width), указания выравнивания строки (HorizontalAlign и Vertical Align), а также конфигурирования внешнего вида текста (Font и Wrap). Эти свойства стиля дают возможность уточнить почти каждый аспект внешнего вида элемента. И если вы не хотите жестко кодировать все настройки внешнего вида веб-страницы, то можете просто установить свойство CssClass объекта стиля в класс связанной таблицы стилей CSS.

При установке свойств стиля можно использовать два похожих синтаксиса. Первый из них — синтаксис обхода объекта для указания расширенных свойств стиля как атрибутов дескриптора. Вот пример:

<asp:GridView ID="GridView1" runat="server" HeaderStyle-ForeColor="Blue"
            ...>
	...
</asp:GridView>

В качестве альтернативы можно добавить вложенные дескрипторы, как показано ниже:

<asp:GridView ID="GridView1" runat="server" ...>
	<HeaderStyle ForeColor="Blue" ... />
    ...
</asp:GridView>

Оба подхода эквивалентны. Однако при установке свойств стиля принимается еще одно решение. Можно указать глобальные свойства стиля, которые касаются каждого столбца в сетке (как в предыдущих примерах), или же определить стили, специфичные для отдельных столбцов. Чтобы создать специфичный для столбца стиль, необходимо добавить атрибуты стиля или вложенные дескрипторы внутри соответствующего дескриптора столбца.

Этот прием часто используется для определения специальной ширины столбца. Если для столбца не указана специальная ширина, ASP.NET устанавливает такую ширину каждого столбца, чтобы поместились содержащиеся в нем данные (или, если разрешен перенос строк, то чтобы уместить текст без разрыва слов между строками). Если значения отличаются друг от друга размерами, ширина определяется по самому большому значению либо по длине заголовка столбца — в зависимости от того, что окажется больше. Однако если сетка достаточно широка, столбец можно расширить так, чтобы он не был прижат к соседним столбцам. В этом случае понадобится явно задать большую ширину.

Вот как выглядит полностью форматированный дескриптор GridView:

<html>
<head runat="server">
    <title>Основы ASP.NET</title>
    <style>
        .Header th, .Row td {
            padding: 10px;
        }
    </style>
</head>
<body>    
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="getEmployeesSDS" runat="server"
             ConnectionString="<%$ ConnectionStrings:Northwind %>"
             SelectCommand="SELECT EmployeeID, FirstName, LastName, BirthDate, Title, City, Notes
                FROM Employees" />

        <asp:GridView ID="GridView1" runat="server"
            DataSourceID="getEmployeesSDS" DataKeyNames="EmployeeID" AutoGenerateColumns="False"
            Font-Names="Trebuchet MS" Font-Size="Small" ForeColor="#333333" GridLines="None"
            RowStyle-CssClass="Row">

            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <HeaderStyle BackColor="#28a4fb" Font-Bold="True" ForeColor="White" CssClass="Header" />
            <AlternatingRowStyle BackColor="White" />

            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="ID" InsertVisible="False"
                    ReadOnly="True">
                    <ItemStyle Font-Bold="True" BorderWidth="1" />
                </asp:BoundField>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" DataFormatString="{0:MM/dd/yyyy}">
                    <ItemStyle BackColor="LightSteelBlue" />
                </asp:BoundField>
                <asp:BoundField DataField="Title" HeaderText="Title" />
                <asp:BoundField DataField="Notes" HeaderText="Notes">
                    <ItemStyle Wrap="True" Width="400" />
                </asp:BoundField>
            </Columns>

        </asp:GridView>
    </form>
</body>
</html>

В примере применяются свойства GridView для установки шрифта и выравнивания расстояния между столбцами и линиями сетки. Используются стили для выделения заголовков полужирным и настраивается фон основных и дополнительных столбцов. Вдобавок специфичные для столбца настройки стиля выделяют другим цветом фона информацию о дате рождения, выделяют полужирным значения идентификаторов, используют CSS-стили и явно устанавливают размер столбца Notes. Строка DataFormatString используется для форматирования всех значений дат в поле BirthDate. Ниже показан конечный результат:

Настройка стилей в Visual Studio

Кодировать свойства стиля вручную в дескрипторе элемента управления GridView не обязательно, поскольку этот элемент предоставляет развитую поддержку во время проектирования. Чтобы установить свойства стиля, можно перейти в окно Properties (Свойства) и модифицировать в нем эти свойства. Например, для установки шрифта заголовка раскройте свойство HeaderStyle, чтобы отобразить вложенное свойство Font, и установите его.

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

Можно даже установить комбинацию стилей с использованием предопределенной темы, щелкнув на ссылке AutoFormat (Автоформат) в смарт-теге GridView. На рисунке ниже показано диалоговое окно AutoFormat (Автоформат) с предустановленными стилями, доступными для выбора. Чтобы очистить все установки стиля, выберите элемент Remove Formatting (Удалить форматирование):

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

Значения, специфичные для форматирования

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

Решение состоит в реагировании на событие GridView.RowDataBound. Это событие генерируется, когда создается часть сетки (заголовок, нижний колонтитул, номер страницы либо нормальный, дополнительный или выделенный элемент). К текущей строке при этом можно получить доступ как к элементу управления GridViewRow. Свойство GridViewRow.DataItem представляет объект данных заданной строки, а коллекция GridViewRow.Cells позволяет извлечь содержимое строки. GridViewRow можно использовать для изменения цветов и выравнивания, добавления и удаления дочерних элементов управления и т.п.

В следующем примере обрабатывается событие RowDataBound и устанавливаются цвета в соответствии с определенными правилами:

• Цвет фона элемента устанавливается розовым, а цвет текста — красно-коричневым, для сотрудников, родившихся раньше 1956 года.

• Цвет фона элемента устанавливается светло-голубым, а цвет текста — темно-синим, если сотрудник родился в промежутке от 1956 - 1960 г.

• Для всех остальных сотрудников отображается зеленый фон и белый цвет текста.

Ниже приведен полный код обработчика события RowDataBound, реализующего упомянутые правила:

protected void gridEmployees_RowDataBound(object sender, GridViewRowEventArgs e)
{
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // Получить дату рождения
            DateTime birthDate = (DateTime)DataBinder.Eval(e.Row.DataItem, "BirthDate");

            // Форматирование строк на основе даты рождения сотрудника
            if (birthDate.Year <= 1955)
            {
                e.Row.BackColor = System.Drawing.Color.LightPink;
                e.Row.ForeColor = System.Drawing.Color.Maroon;
            }
            else if (birthDate.Year > 1955 && birthDate.Year <= 1960)
            {
                e.Row.BackColor = System.Drawing.Color.LightCyan;
                e.Row.ForeColor = System.Drawing.Color.DarkBlue;
            }
            else
            {
                e.Row.BackColor = System.Drawing.Color.LimeGreen;
                e.Row.ForeColor = System.Drawing.Color.White;
            }
        }
}

Сначала производится проверка, что создаваемый элемент является строкой данных (а не каким-то другим интерфейсным элементом вроде номера страницы, нижнего колонтитула или заголовка). Если элемент имеет правильный тип, из элемента привязанных данных извлекается значение поля BirthDate, которое сравнивается с датами. На рисунке ниже показана результирующая страница:

В этом примере используется метод DataBinder.Eval() для извлечения части информации из элемента данных с помощью рефлексии. В качестве альтернативы можно было бы привести e.Row.DataItem к корректному типу (такому как EmployeeDetails для ObjectDataSource), DataRowView (для SqlDataSource в режиме DataSet) или DbDataRecord (для SqlDataSource в режиме DataReader). Тем не менее, подход DataBinder.Eval() работает во всех этих сценариях (ценой некоторого замедления).

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