Разработка на ASP.NET. MasterPage, динамические компоненты, AJAX, ASP.NET MVC

7.4. Использование компонент для отображения данных

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

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

Обычная таблица такие возможности не предоставляет.

Для этих целей ASP.NET представляет сразу несколько визуальных компонент, среди которых выделим GridView и DataList.

7.4.1. Компонент GridView

Элемент управления GridView можно использовать для выполнения следующих задач [8]:

1. автоматическая привязка и отображение данных из элемента управления источника данных;
2. выбирать, сортировать, пролистывать, изменять и удалять данные из элемента управления источника данных.

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

• определять настраиваемые столбцы и стили;
• использовать шаблоны для создания настраиваемых элементов интерфейса пользователя ( UI );
• вводить пользовательский код в функциональность элемента управления GridView с помощью обработчиков событий.

7.4.1.1. Привязка данных

Элемент управления GridView допускает два способа привязки к данным:

• Привязка данных с использованием свойства DataSourceID, позволяющего привязать элемент управления GridView к элементу управления источника данных. Этот подход является предпочтительным, поскольку он позволяет элементу управления GridView использовать возможности элемента управления источника данных и предоставить встроенную функциональность для сортировки, разбиения по страницам и обновления данных.
• Привязка данных с использованием свойства DataSource, позволяющего выполнять привязку к различным объектам, включая наборы данных и модули чтения данных ADO.NET. При использовании этого подхода код реализации дополнительной функциональности наподобие сортировки, разбиения по страницам и обновления данных требуется писать самостоятельно.

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

7.4.1.2. Форматирование отображаемых данных

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

7.4.1.3. Изменение и удаление данных

По умолчанию элемент управления GridView отображает данные в режиме "только для чтения". Тем не менее, элемент управления также поддерживает режим редактирования, в котором строка отображается с помощью таких элементов управления, допускающих редактирование, как TextBox или CheckBox. Элемент управления GridView также можно настроить на отображение кнопки Delete, которая позволяет удалить соответствующую запись из источника данных.

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

Элементы управления ввода данных, используемые при отображении строки в режиме редактирования, можно настроить с помощью шаблона.

7.4.1.4. Шаблоны столбцов

Элемент управления GridView может автоматически создавать столбцы из полей, предоставляемых источником данных [9]. Кроме того, вместо автоматического создания столбцов можно самостоятельно создавать коллекцию столбцов для отображения. Однако может встретиться ситуация, в которой будет необходимо настроить отображение отдельного столбца. В таком случае можно создать TemplateField для задания структуры пользовательского столбца.

Объект TemplateField разрешает задавать шаблоны, содержащие разметку и элементы управления для настройки структуры и поведения столбца в элементе управления GridView. С помощью шаблона ItemTemplate можно указать структуру, которая должна использоваться, когда GridView отображает данные в столбце. Чтобы задать настраиваемую структуру для редактирования данных в столбце пользователями, можно создать EditItemTemplate.

Шаблон может содержать разметку, серверные веб-элементы управления и кнопки команд.

В шаблоне можно привязать элементы управления к данным с помощью методов Eval и Bind. Метод Eval используется, когда элемент управления будет только отображать значения. Метод Bind используется, когда пользователи могут изменять значения данных, т. е. для сценариев обновления данных. Можно использовать метод Eval в любом из шаблонов для отображения данных. Метод Bind используется в шаблоне с элементами управления, в которых пользователи могут изменять значения, например в элементах управления TextBox и CheckBox, или в шаблоне, позволяющем удаление записи.

В следующем примере показана коллекция Columns. Эта коллекция содержит объект TemplateField, который в свою очередь содержит объект ItemTemplate. Для отображения даты в объект ItemTemplate включен элемент управления Label, использующий метод Eval. Для редактирования даты остальные шаблоны используют элемент управления Calendar, который в свою очередь использует метод Bind.

<Columns>                  
  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
  <asp:TemplateField HeaderText="Birth Date">
    <ItemTemplate> 
      <asp:Label ID="BirthDateLabel" Runat="Server" 
                 Text='<%# Eval("BirthDate", "{0:d}") %>' />
    </ItemTemplate>
    <EditItemTemplate>
      <asp:Calendar ID="EditBirthDateCalendar" Runat="Server"
                    VisibleDate='<%# Eval("BirthDate") %>'
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </EditItemTemplate>
  </asp:TemplateField> 
  <asp:HyperLinkField Text="Show Detail"
                      DataNavigateUrlFormatString="~/ShowEmployeeDetail.aspx?EmployeeID={0}"
                      DataNavigateUrlFields="EmployeeID" />                   
</Columns>

7.4.1.5. Сортировка

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

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

Если связанный элемент управления источником данных может использоваться для сортировки данных, то элемент управления GridView может взаимодействовать с элементом управления источником данных и запрашивать сортированные данные, передавая SortExpression источнику данных при выборе данных. Не все элементы управления источником данных поддерживают функцию сортировки (например, элемент управления XmlDataSource ее не поддерживает). Однако если элемент управления источником данных поддерживает сортировку, GridView может ее использовать.

7.4.1.5.1. Процесс сортировки GridView

Можно включить сортировку по умолчанию в элементе управления GridView, присвоив его свойству AllowSorting значение true. При присвоении этому свойству значения true элемент управления GridView отображает элемент управления LinkButton в заголовках столбца. Элемент управления также неявно присваивает свойству SortExpression каждого столбца имя поля данных, к которому он привязан. Например, если таблица содержит столбец, отображающий столбец City таблицы Employees, свойству SortExpression этого столбца присваивается значение City.

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

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

Элемент управления GridView не выполняет проверку того, поддерживает ли элемент управления источником данных сортировку. Он всегда передает выражение сортировки источнику данных. Если элемент управления источником данных не поддерживает сортировку и операция сортировки выполняется в элементе управления GridView, элемент управления GridView создает исключение NotSupportedException. Можно перехватить это исключение в обработчике для события Sorting и определить, поддерживает ли источник данных сортировку или для нее надо использовать собственную логику сортировки.

Если сортировка по умолчанию не соответствует требованиям, можно настроить процедуру пользовательской сортировки. Для выполнения пользовательской сортировки обычно обрабатывают событие Sorting. В обработчике можно выполнить следующую процедуру:

• Настройка выражения сортировки, передаваемое элементу управления источником данных. По умолчанию выражение сортировки – это имя отдельного столбца. Можно изменить выражение сортировки в обработчике событий. Например, чтобы выполнить сортировку по двум столбцам, можно создать выражение сортировки, содержащее оба столбца. Затем можно передать измененное выражение сортировки элементу управления источником данных.
• Создание собственной логики сортировки. Например, при работе с источником данных, не поддерживающим сортировку, можно выполнить сортировку и помощью собственного кода, а затем привязать к компоненту отсортированные данные.

7.4.1.6. Разбиение по страницам

Элемент управления GridView обладает базовой функциональностью разбиения по страницам. Функциональность разбиения по страницам элемента управления GridView можно расширить с помощью свойства PagerTemplate элемента управления GridView.

7.4.1.7. События GridView

Функциональность элемента управления GridView можно расширять с помощью обработчиков событий [10]. Элемент управления GridView предоставляет события, происходящие перед операциями перехода и изменения и после них.

Рассмотрим некоторые события элемента управления GridView.

• RowCommand – происходит при нажатии кнопки в элементе управления GridView. Данное событие часто используется для выполнения задачи при нажатии кнопки в элементе управления.
• PageIndexChanging – происходит при нажатии кнопки страничного навигатора, но перед тем, как элемент управления GridView выполнит операцию разбиения по страницам. Это событие часто используется для отмены операции разбиения по страницам.
• PageIndexChanged – происходит при нажатии кнопки страничного навигатора, но после того, как элемент управления GridView выполнит операцию разбиения по страницам. Данное событие обычно обрабатывается при необходимости выполнения задачи после перехода пользователя на другую страницу в элементе управления.
• SelectedIndexChanging – происходит при нажатии кнопки строки Select (кнопка, для которой свойство CommandName имеет значение "Select" ) в элементе управления GridView, но прежде, чем элемент управления GridView выполнит операцию выбора. Данное событие часто обрабатывается для отмены операции выбора.
• SelectedIndexChanged – происходит при нажатии кнопки строки Select в элементе управления GridView, но после того, как элемент управления GridView выполнит операцию выбора. Данное событие часто обрабатывается для выполнения задачи после выбора строки в элементе управления.
• RowDeleting – происходит при нажатии кнопки строки Delete (кнопка, для которой свойство CommandName имеет значение "Delete" ) в элементе управления GridView, но прежде, чем элемент управления GridView удалит запись из источника данных. Данное событие часто обрабатывается для отмены операции удаления.
• RowDeleted – происходит при нажатии кнопки строки Delete в элементе управления GridView, но после того, как элемент управления GridView удалит запись из источника данных. Это событие часто используется для проверки результатов операции удаления.
• RowEditing – происходит при нажатии кнопки строки Edit (кнопка, для которой свойство CommandName имеет значение "Edit" ) в элементе управления GridView, но прежде, чем элемент управления GridView выполнит переключение в режим редактирования. Данное событие часто обрабатывается для отмены операции редактирования.
• DataBound – это событие наследуется от элемента управления BaseDataBoundControl и происходит после завершения операции привязки к источнику данных, выполняемой элементом управления GridView.