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

К примеру, имеется локальная база данных по имени Database:

В ней находится всего одна таблица по имени Users, которая состоит из трех столбцов: id(первичный ключ), Name и BirthDay.

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

Итак. Поместите в дизайнере на страницу внутрь блока

<form id="myForm" runat="server"> 

контрол SqlDataSource (лично я предпочитаю помещать элементы на страницу в дизайнере, а настраивать и изменять в коде). Далее не обходимо настроить соответствующие параметры:

<asp:SqlDataSource runat="server" id="mySqlDataSource"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT * FROM Users"
    UpdateCommand="Update Users SET 
        Name=@Name,BirthDay=@BirthDay WHERE id=@id"
    DeleteCommand="DELETE FROM Users WHERE id=@id">
</asp:SqlDataSource>

Первый параметр runat="server" – обязательное условие для серверного элемента управления. Следующий id="mySqlDataSource" – имя данного контрола. Обязательный параметр ConnectionString="<%$ сonnectionStrings:ConnectionString %>", определяет строку соединения с целевой БД. В данном случае знак $ указывает на работу с файлом web.config. В данном файле нам необходимо настроить строку соединения:

<configuration>
    <configSections>
	    …… 
    </configSections>
    <appSettings/>
    <connectionStrings>
	    <add name="ConnectionString" connectionString=
	        "Data Source=.\SQLEXPRESS;
	        AttachDbFilename=|DataDirectory|\Database.mdf;
	        Integrated Security=True;User Instance=True" 
	        providerName="System.Data.SqlClient"/>
    </connectionStrings>
    <system.web>

Следующий параметр устанавливает команду выборки даннях из БД SelectCommand="SELECT * FROM Users". Если мы имеем намерение иметь возможность вносить изменения в таблицу Users, то следует определить еще и команду обновления данных UpdateCommand="Update Users SET Name=@Name,BirthDay=@BirthDay WHERE id=@id". А для удаления записи следует определить команду DeleteCommand="DELETE FROM Users WHERE id=@id".

Теперь осталось добавить на форму элемент GridView:

<asp:GridView ID="myGridView" runat="server" 
     DataSourceID="mySqlDataSource">
</asp:GridView>

Как видим, для этого элемента мы указали источник получения данных DataSourceID="mySqlDataSource".

Теперь, если открыть в браузере наш сайт, то мы на странице получим все записи из таблицы Users:

Однако, для того, что б иметь возможность редактировать записи, следует еще немного настроить наш GridView:

<asp:GridView ID="myGridView" runat="server" 
          DataSourceID="mySqlDataSource">
          <Columns>
              <asp:CommandField ShowDeleteButton="True" 
                  ShowEditButton="True" 
                  ShowSelectButton="True" />
          </Columns>
      </asp:GridView>

Мы добавили дополнительную колонку для размещения кнопок-ссылок выборки записи, редактирования и удаления. Теперь открыв страницу в браузере мы получим возможность выполнять все эти действия:

Естественно, если в SqlDataSource не определены команды UpdateCommand и DeleteCommand, то при попытке изменения данных мы получили бы ошибку.

Кроме того, мы можем настроить пейджинг для GridView. Для этого следует указать: для SqlDataSource параметр DataSourceMode="DataSet", для GridView - AllowPaging="True" PageSize="2". Так как у нас всего 3 записи, то значение для параметра PageSize я задал 2. Обычно задают 5-20 строк на страницу.

Вроде бы все чудно работает, но есть один нюанс. Поле id уникально и вносить в него изменения нельзя. Однако в нашем примере оно доступно для редактирования.

Исправляется ситуация следующим образом.

<asp:GridView ID="myGridView" runat="server" 
AutoGenerateColumns="False"
  DataSourceID="mySqlDataSource" AllowPaging="True" PageSize="2"
  DataKeyNames="id">
  <Columns>
      <asp:CommandField ShowDeleteButton="True" 
          ShowEditButton="True" 
          ShowSelectButton="True" />
          <asp:BoundField ReadOnly="true" HeaderText="User ID" 
          DataField="id" />
          <asp:BoundField HeaderText="Name" 
          DataField="Name" />
          <asp:BoundField HeaderText="BirthDay" 
          DataField="BirthDay" />
  </Columns>
</asp:GridView>

Мы убрали автогенерацию колонок и вручную задали требуемые столбцы. Обратите внимание, что для столбца id мы установили свойство ReadOnly="true", не дающее возможности редактировать ячейки в данном столбце. И главное, объявили свойство DataKeyNames="id", необходимое для правильного внесения изменений контролом SqlDataSource обратно в БД.

Вообще то поле id нам совсем и не надо для отображения, поэтому запись <asp:BoundField ReadOnly="true" HeaderText="User ID" DataField="id" /> можно и вовсе убрать.

Вот окончательный вариант нашей страницы:

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head id="myHead" runat="server">
    <title>SqlDataSource - пример привязки к GridView</title>
</head>
<body>
    <form id="myForm" runat="server">


        <asp:SqlDataSource runat="server" id="mySqlDataSource"
          ConnectionString=
            "<%$ ConnectionStrings:ConnectionString %>"
          SelectCommand="SELECT * FROM Users" 
          DataSourceMode="DataSet"
          UpdateCommand="Update Users SET 
             Name=@Name,BirthDay=@BirthDay WHERE id=@id"
          DeleteCommand="DELETE FROM Users WHERE id=@id">
        </asp:SqlDataSource>


        <asp:GridView ID="myGridView" runat="server" 
          AutoGenerateColumns="False"
          DataSourceID="mySqlDataSource" AllowPaging="True" 
          PageSize="2" DataKeyNames="id">
          <Columns>
            <asp:CommandField ShowDeleteButton="True" 
               ShowEditButton="True" ShowSelectButton="True" />
            <asp:BoundField HeaderText="Name" 
            DataField="Name" />
            <asp:BoundField HeaderText="BirthDay"
            DataField="BirthDay" />
          </Columns>
        </asp:GridView>

    </form>
  </body>
</html>

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

В следующих статьях мы поговорим о более профессиональном подходе к привязке данных с использованием контрола ObjectDataSource.