Примеры GridView для ASP.NET 2.0: Отображение изображений в колонке GridView

Обычно для создания структуры данных онлайн-фотоальбома с описанием, название и т.д., используются следующие 4 поля:

- PictureID - первичный ключ, как правило это целое значение, изначально устанавливаемое как IDENTITY.
- Title - краткое название картинки.
- DateAdded - дата/время когда фотография была загружена.
- PictureUrl - путь к загруженному файлу изображения.

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

Так же есть дополнительная страница, отображающая список всех картинок в фотоальбоме при помощи DataGrid. Чтобы показывать изображения в колонке DataGrid в ASP.NET 1.x Вам необходимо использовать TemplateColumn с элементом управления Image Web внутри TemplateColumn. В ASP.NET 2.0 GridView включает в себя ImageField который собственно и позволяет отображать картинки в колонке GridView.

Теперь представьте, что Вам необходимо показать в все фотографии в GridView, включая поля PictureID, Title и DateAdded для каждого изображения и собственно само изображение дополнительной колонке. Для этого первым делом надо загрузить данные в источник данных, а затем добавить их, связав в GridView связав его с источником данных. Нужный нам GridView будет иметь четыре колонки, соответствующие полям, а вместо реально изображения будет использован его реальный путь при просмотре GridView в браузере. Чтобы отобразить картинку, необходимо отредактировать колонки GridView, удалив связанное поле PictureUrl и заменив его на ImageField. Для редактирования столбцов GridView просто нажмите на ссылку Edit Columns в смарт-тегах GridView. Появится диалоговое окошко, как показано на рисунке 25. Удалить поле PictureUrl и добавьте ImageField. Наконец присвойте ImageField DataImageUrlField имя источника данных содержащего путь изображения - PictureUrl.

Рисунок 25

Это приведет к тому, что объявление GridView будет сгенерировано следующим образом:

<asp:GridView ID="GridView1" Runat="server" 
  DataSource='<%# GetData() %>' AutoGenerateColumns="False" 
  BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None" 
  BorderColor="#CCCCCC" Font-Names="Arial">
    <FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
    <PagerStyle ForeColor="#000066" HorizontalAlign="Left" 
      BackColor="White"></PagerStyle>
    <HeaderStyle ForeColor="White" Font-Bold="True" 
      BackColor="#006699"></HeaderStyle>
    <Columns>
        <asp:BoundField HeaderText="Picutre ID" DataField="PictureID">
            <ItemStyle HorizontalAlign="Center" 
              VerticalAlign="Middle"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Title" DataField="Title"></asp:BoundField>
        <asp:BoundField HeaderText="Date Added" DataField="DateAdded" 
          DataFormatString="{0:d}">
            <ItemStyle HorizontalAlign="Center"></ItemStyle>
        </asp:BoundField>
        <asp:ImageField DataImageUrlField="PictureURL"></asp:ImageField>
    </Columns>
    <SelectedRowStyle ForeColor="White" Font-Bold="True" 
       BackColor="#669999"></SelectedRowStyle>
    <RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>
 

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

Создание DataTable программно в Visual Basic:

Function GetData() As DataTable
    ' This method creates a DataTable with four rows.  Each row has the
    ' following schema:
    '   PictureID      int
    '   PictureURL     string
    '   Title          string
    '   DateAdded      datetime
    Dim dt As New DataTable()
    ' define the table's schema
    dt.Columns.Add(New DataColumn("PictureID", GetType(Integer)))
    dt.Columns.Add(New DataColumn("PictureURL", GetType(String)))
    dt.Columns.Add(New DataColumn("Title", GetType(String)))
    dt.Columns.Add(New DataColumn("DateAdded", GetType(DateTime)))
    ' Create the four records
    Dim dr As DataRow = dt.NewRow()
    dr("PictureID") = 1
    dr("PictureURL") = ResolveUrl("~/DisplayingImages/Images/Blue hills.jpg")
    dr("Title") = "Blue Hills"
    dr("DateAdded") = New DateTime(2005, 1, 15)
    dt.Rows.Add(dr)
    dr = dt.NewRow()
    dr("PictureID") = 2
    dr("PictureURL") = ResolveUrl("~/DisplayingImages/Images/Sunset.jpg")
    dr("Title") = "Sunset"
    dr("DateAdded") = New DateTime(2005, 1, 21)
    dt.Rows.Add(dr)
    dr = dt.NewRow()
    dr("PictureID") = 3
    dr("PictureURL") = _
      ResolveUrl("~/DisplayingImages/Images/Water lilies.jpg")
    dr("Title") = "Water Lilies"
    dr("DateAdded") = New DateTime(2005, 2, 1)
    dt.Rows.Add(dr)
    dr = dt.NewRow()
    dr("PictureID") = 4
    dr("PictureURL") = ResolveUrl("~/DisplayingImages/Images/Winter.jpg")
    dr("Title") = "Winter"
    dr("DateAdded") = New DateTime(2005, 2, 18)
    dt.Rows.Add(dr)
    Return dt
End Function
 

Создание DataTable программно в C#:

DataTable GetData()
{
    // This method creates a DataTable with four rows.  Each row has the
    // following schema:
    //   PictureID      int
    //   PictureURL     string
    //   Title          string
    //   DateAdded      datetime
    DataTable dt = new DataTable();
    // define the table's schema
    dt.Columns.Add(new DataColumn("PictureID", typeof(int)));
    dt.Columns.Add(new DataColumn("PictureURL", typeof(string)));
    dt.Columns.Add(new DataColumn("Title", typeof(string)));
    dt.Columns.Add(new DataColumn("DateAdded", typeof(DateTime)));
    // Create the four records
    DataRow dr = dt.NewRow();
    dr["PictureID"] = 1;
    dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Blue hills.jpg");
    dr["Title"] = "Blue Hills";
    dr["DateAdded"] = new DateTime(2005, 1, 15);
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["PictureID"] = 2;
    dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Sunset.jpg");
    dr["Title"] = "Sunset";
    dr["DateAdded"] = new DateTime(2005, 1, 21);
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["PictureID"] = 3;
    dr["PictureURL"] = 
      ResolveUrl("~/DisplayingImages/Images/Water lilies.jpg");
    dr["Title"] = "Water Lilies";
    dr["DateAdded"] = new DateTime(2005, 2, 1);
    dt.Rows.Add(dr);
    dr = dt.NewRow();
    dr["PictureID"] = 4;
    dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Winter.jpg");
    dr["Title"] = "Winter";
    dr["DateAdded"] = new DateTime(2005, 2, 18);
    dt.Rows.Add(dr);
    return dt;
}
 

Чтобы связать эти данные с GridView, мы можем установить свойство DataSource в GridView при помощи метода GetData() следующим образом:

<asp:GridView Runat="server" DataSource='<%# GetData() %>' ...>
  ...
</asp:GridView>
 

В заключении, чтобы связать DataSource грида, необходимо вызвать Page.DataBind() в обработчике событий Page_Load.

Обработчик событий (Visual Basic):

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    Page.DataBind()
End Sub

Page_Load Event Handler (C#):

void Page_Load(object sender, EventArgs e)
{
    Page.DataBind();
}
 

В результате мы увидим GridView, который показывает изображения, ссылки на которые хранятся в PictureUrl (см. рисунок 26).

Рисунок 26

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