Интерфейсные элементы 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:

1. Форматирование - определение внешнего вида отображаемых данных
2. Сортировка - изменение порядка следования табличных значений на экране пользователя в ответ на щелчки по заголовкам столбцов
3. Раскладка по страницам - разбиение вывода больших наборов данных по отдельным страницам броузера
4. Шаблоны - тонкая настройка большинства возможностей GridView путем определения шаблонов

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

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

• HorizontalAlign - определяет выравнивание ячеек внутри сетки экранной таблицы
• GridLines - определяет видимость сетки генерируемой экранной таблицы
• CellPadding, CellSpacing - определяют промежутки между ячейками генерируемой сетки
• Caption, CaptionAlign - определяет заголовок и его выравнивание в верхней части экранной таблицы
• CssClass - устанавливает имя класса каскадной таблицы стилей
• Стили - рассмотрим далее...

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

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

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

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

  
  увеличить изображение
  
• Скопируйте в каталог нового проекта файл Web.Config из WebSite9 командой Website/Add Existing Item
• Создайте новую страницу с объединенным кодом и именем 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-сетки в целом.

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

1. В режиме Design через панель Properties, выделив элемент GridView. В этом случае создается стилевой дескриптор

   <asp:GridView ID="GridView1" runat="server" 
               DataSourceID="SqlDataSource1" 
               AutoGenerateColumns="False" >
               <RowStyle BackColor="Red" ForeColor="Yellow" HorizontalAlign="Center" />
           </asp:GridView>
2. В режиме Source через панель Properties, установив курсов в заголовок открывающего дескриптора GridView. В этом случае создаются стилевые атрибуты этого дескриптора

   <asp:GridView ID="GridView1" runat="server" 
               DataSourceID="SqlDataSource1" 
               AutoGenerateColumns="False" 
               RowStyle-BackColor="red"
               RowStyle-ForeColor="yellow"
               RowStyle-HorizontalAlign="Center" >
           </asp:GridView>
3. В режиме Source, набирая вручную либо стилевой дескриптор, либо уточняющие атрибуты. Подсказчик кода оболочки поможет правильно настроить стилевые параметры.

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