Интерфейсные элементы ADO.NET

К развитым интерфейсным элементам пользователя, служащих для управления данными и их представлением, относятся GridView, DetailsView и FormView. Мы уже применяли ранее некоторые из них, но в этом разделе познакомимся с ними более подробно.

Табличный элемент управления данными GridView

Этот элемент включает в себя широкий диапазон встроенных средств, таких как выделение, разбиение на страницы, редактирование, сортировка, фильтрация. Он может быть расширен применением шаблонов. Гибкие настройки на этапе проектирования позволяют добиться решения многих задач без необходимости написания кода в обработчиках событий. GridView - это новый элемент для ASP.NET 2.0, который заменил собой элемент DataGrid из предыдущей версии.

Для обратной совместимости DataGrid оставлен в ASP.NET 2.0, хотя и убран по умолчанию из панели Toolbox. Сделать доступным элемент DataGrid можно, если выполнить для любой вкладки панели Toolbox команду контекстного меню Choose Items (добавить элементы)

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

Свойство AutoGenerateColumns элемента GridView установлено по умолчанию в состояние True. Чтобы его отключить, нужно явно указать в декларативных настройках GridView атрибут AutoGenerateColumns="False". При включенном свойстве AutoGenerateColumns элемент GridView автоматически выбирает из связанного источника данных все столбцы в том порядке, в котором их обнаруживает, и выстраивает их в таблицу с заголовками колонок, равными именам полей.

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

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

Для визуальной настройки столбцов GridView предназначено диалоговое окно Fields, которое можно вызвать командой Edit Columns (Add New Column) через встроенную панель, щелкнув на кнопке с пиктограммой треугольника в правом верхнем углу отображаемого на Web-форме элемента GridView

Диалоговое окно Fields можно вызвать и по другому - щелкнуть на свойстве Columns в панели Properties.

Все действия в диалоговом окне Fields запоминаются в дескрипторном описании элемента GridView в разделе <Columns>, например

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField />
        <asp:CheckBoxField />
        <asp:HyperLinkField />
        <asp:ImageField>
        </asp:ImageField>
        <asp:ButtonField Text="Button" />
        <asp:CommandField />
        <asp:TemplateField></asp:TemplateField>
    </Columns>
</asp:GridView>

Коллекцией столбцов можно управлять и программно, например,

GridView1.Columns[2].Visible=true

скрывает третий столбец (нумерация с нуля). Скрытый столбец не генерирует HTML.

Если мы хотим сделать скролирующий GridView внутри Web-страницы, то должны поместить его внутрь элемента Panel и установить соответствующий размер панели и свойство Panel.ScrollBars.

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

Ниже мы рассмотрим следующие разделы GridView:

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

Элемент GridView имеет встроенные свойства управления представлением генерируемой им экранной таблицы в целом. К ним, в том числе, относятся

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

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

Для иллюстрации материала нам понадобится тестовая страница.

Создайте новое приложение командой File/New/Web Site с именем

Скопируйте в каталог нового проекта файл Web.Config из WebSite9 командой Website/Add Existing Item

Создайте новую страницу с объединенным кодом и именем GridViewFormated.aspx, которую заполните так

(рис ) Тестовая страница GridViewFormated.aspx<%@ Page Language="C#" %>
    
<script runat="server">
    
    string sql1 = "SELECT TOP 3 * FROM Employees WHERE City<>''";
    string sql2 = "SELECT TOP 3 EmployeeID, FirstName, LastName, Title, "
            + "BirthDate, City, HomePhone, "
            + "Extension, Notes FROM Employees WHERE City<>''";
    string sql3 = "SELECT TOP 3 EmployeeID, FirstName, BirthDate, Extension "
                + "FROM Employees WHERE City != ''";
        
    protected void Page_Load(object sender, EventArgs e)
    {
        Page.DataBind();
    }
</script>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            SelectCommand= "<%# sql3 %>"
            ProviderName="System.Data.SqlClient"
            ConnectionString="<%$ ConnectionStrings:Northwind %>">
        </asp:SqlDataSource>
    </div>
        <asp:GridView ID="GridView1" runat="server"
            DataSourceID="SqlDataSource1">
        </asp:GridView>
    </form>
</body>
</html>

Исполните страницу GridViewFormated.aspx, чтобы получить такой начальный результат

В следующей таблице приведены спецификаторы формата, применяемые для представления чисел и дат

Теперь нужно настроить GridView1 на предмет форматирования полей и проверять приведенные спецификаторы. Учитывая, что в таблице Employees поля BirthDate и Extension датное и числовое соответственно, один из вариантов настройки GridView1 мог-бы быть таким

<%@ Page Language="C#" %>
    
<script runat="server">
    
    string sql1 = "SELECT TOP 3 * FROM Employees WHERE City<>''";
    string sql2 = "SELECT TOP 3 EmployeeID, FirstName, LastName, Title, "
            + "BirthDate, City, HomePhone, "
            + "Extension, Notes FROM Employees WHERE City<>''";
    string sql3 = "SELECT TOP 3 EmployeeID, FirstName, BirthDate, Extension "
                + "FROM Employees WHERE City != ''";
        
    protected void Page_Load(object sender, EventArgs e)
    {
        Page.DataBind();
    }
</script>
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:Northwind %>"
                ProviderName="System.Data.SqlClient" 
                SelectCommand="<%# sql3 %>">
            </asp:SqlDataSource>
        </div>
        <asp:GridView ID="GridView1" runat="server" 
            DataSourceID="SqlDataSource1" 
            AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="BirthDate" 
                    DataFormatString="{0:dd/MM/yyyy}" 
                    HeaderText="Родился"
                    ReadOnly="True" />
                <asp:BoundField DataField="Extension" 
                    DataFormatString="{0:## ###.##} р." 
                    HeaderText="Оклад"
                    ReadOnly="True" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

Запустите страницу GridViewFormated.aspx и убедитесь, что описанное форматирование не работает!!!

Идем дальше...

Стили в GridView

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

Настройку стилей для таблицы в целом можно выполнить тремя способами:

<asp:GridView ID="GridView1" runat="server" 
            DataSourceID="SqlDataSource1" 
            AutoGenerateColumns="False" >
            <RowStyle BackColor="Red" ForeColor="Yellow" HorizontalAlign="Center" />
        </asp:GridView>

<asp:GridView ID="GridView1" runat="server" 
            DataSourceID="SqlDataSource1" 
            AutoGenerateColumns="False" 
            RowStyle-BackColor="red"
            RowStyle-ForeColor="yellow"
            RowStyle-HorizontalAlign="Center" >
        </asp:GridView>

Аналогичным образом настраиваются индивидуальные стили столбцов для случая, когда в GridView явно определены столбцы.