Обзор DetailsView

Автор: Асмик Гаряка (hgaryaka@freenet.am)
Опубликовано: 02 August 2006
Уровень: Учебник

Версия для печати

Элемент управления DetailsView – одна из новинок ASP.NET 2.0. Он позволяет просматривать по одной записи из источника данных, тогда как GridView показывает их все сразу. Это можно сравнить с разными типами форм в Access: табличная форма соответствует GridView, а Columnar – DetailsView. Точно так же, как и GridView, DetailsView позволяет разбивку на страницы, редактирование, вставку и удаление с автоматическим связыванием с источником данных. Он также является наследником CompositeDataBoundControl.

Visual Studio 2005 предоставляет, как обычно, Smart Tag, с помощью которого можно задать источник данных, автоформатировать элемент управления, отредактировать поля и шаблоны полей.

Пример DetailsView, где данные берутся из базы данных Northwind, таблица Employees.

       <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" 
              Height="50px" Width="561px" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" GridLines="Vertical" ForeColor="Black" AllowPaging="True"> 
              <Fields> 
                  <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> 
                  <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> 
                  <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> 
                  <asp:BoundField DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" SortExpression="TitleOfCourtesy" /> 
                  <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" SortExpression="BirthDate" /> 
                  <asp:BoundField DataField="HireDate" HeaderText="HireDate" SortExpression="HireDate" /> 
                  <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" /> 
                  <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> 
                  <asp:BoundField DataField="Notes" HeaderText="Notes" SortExpression="Notes" /> 
                  <asp:BoundField DataField="HomePhone" HeaderText="HomePhone" SortExpression="HomePhone" /> 
                  <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" /> 
                  <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" /> 
                  <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" /> 
              </Fields> 
              <FooterStyle BackColor="#CCCC99" /> 
              <EditRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" /> 
              <RowStyle BackColor="#F7F7DE" /> 
              <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" /> 
              <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" /> 
              <AlternatingRowStyle BackColor="White" /> 
          </asp:DetailsView> 
  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>" 
              SelectCommand="SELECT [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Extension], [ReportsTo], [Photo], [Notes], [HomePhone], [Country], [PostalCode], [Region] FROM [Employees]" ProviderName="<%$ ConnectionStrings:NorthwindConnectionString3.ProviderName %>"></asp:SqlDataSource>
  

А так это выглядит на форме:

Применялось автоформатирование Mocha.

  <PagerSettings FirstPageImageUrl="~/RW_btn.gif" LastPageImageUrl="~/FF_btn.gif" Mode=" NumericFirstLast "
                  NextPageImageUrl="~/fwd_btn.gif" PreviousPageImageUrl="~/back_btn.gif" />
  

Так гораздо красивее. Картинки взяты из поставки CorelDraw 11. Странно, что такой возможности не ввели в календаре, надеюсь в следующей версии появится.

Элементы коллекции полей BoundField описываются так же, как и в GridView, но текст заголовка появляется слева, а не сверху.

Совместное использование с GridView

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

Чтобы это реализовать, нужны два SqlDataSource, которые подсоединяются к одной базе через тот же ConnectionString. Первый – обычный, читает все записи:

  <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
      SelectCommand="SELECT * FROM [Employees]"  
      ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>">
  

Строка соединения определяется в Web.config:

    <add name="NorthwindConnectionString" connectionString="Data Source=.\SQLExpress;Initial Catalog=Northwind;Integrated Security=True;Pooling=False"
 
     providerName="System.Data.SqlClient" />
  

SqlDataSource1 связан с GridView, который поддерживает возможность выбора записи.

  <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" AllowSorting="True" PageSize="3" DataKeyNames="EmployeeID" SelectedIndex="0"> 
      <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
      <RowStyle BackColor="#EFF3FB" /> 
      <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> 
      <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> 
      <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
      <AlternatingRowStyle BackColor="White" /> 
      <Columns> 
      <asp:CommandField ShowSelectButton="True" /> 
      <asp:BoundField DataField="LastName" HeaderText="Фамилия" SortExpression="LastName" /> 
      <asp:BoundField DataField="FirstName" HeaderText="Имя" SortExpression="FirstName" /> 
       </Columns> 
       <EditRowStyle BackColor="#2461BF" /> 
  </asp:GridView> 
  

Если не указать SelectedIndex="0", то в начале не будет выбран ни одна запись и DetailsView на странице не появится.

Второй SqlDataSource фильтрует информацию по EmployeeID.

  <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
      SelectCommand="SELECT * FROM [Employees] WHERE ([EmployeeID]=@EmployeeID)" 
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" > 
      <SelectParameters> 
      <asp:ControlParameter ControlID="GridView1" Name="EmployeeID"  
      PropertyName="SelectedValue" Type="String" /> 
      </SelectParameters>  
  </asp:SqlDataSource> 
  

Самое важное тут – SelectParameters. Таким образом в команду SelectCommand подставляется тот EmployeeID той записи, которая была выбрана в GridView1.

  <asp:DetailsView ID="DetailsView1" runat="server"  
      DataSourceID="SqlDataSource2" 
      Height="50px" Width="561px" 
      CellPadding="4" GridLines="None" ForeColor="#333333"  
      HeaderText="Личное дело" 
      AutoGenerateRows="False" DataKeyNames="EmployeeID"> 
      <Fields> 
      <asp:BoundField DataField="LastName" HeaderText="Фамилия" SortExpression="LastName" /> 
      <asp:BoundField DataField="FirstName" HeaderText="Имя" SortExpression="FirstName" /> 
      <asp:BoundField DataField="Title" HeaderText="Должность" SortExpression="Title" /> 
      <asp:BoundField DataField="BirthDate" HeaderText="Дата рождения" SortExpression="BirthDate" /> 
      <asp:BoundField DataField="HireDate" HeaderText="Дата приема" SortExpression="HireDate" /> 
      <asp:BoundField DataField="HomePhone" HeaderText="Телефон" SortExpression="HomePhone" /> 
      </Fields> 
      <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
      <EditRowStyle BackColor="#2461BF" /> 
      <RowStyle BackColor="#EFF3FB" /> 
      <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> 
      <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
      <AlternatingRowStyle BackColor="White" /> 
      <CommandRowStyle BackColor="#D1DDF1" Font-Bold="True" /> 
      <FieldHeaderStyle BackColor="#DEE8F5" Font-Bold="True" /> 
  </asp:DetailsView> 
  

Вставка записей с помощью DetailsView

Чтобы наш DetailsView научился вставлять записи, необходимо установить свойство

AutoGenerateInsertButton="True". В элементе управления появляется кнопка “New”. Стоит ее нажать, и данные заменяются на TextBox-ы.

Но пока записи вставляться не будут. В SqlDataSource необходимо определить

1. Свойство InsertCommand
2. По одному InsertParameter Для каждого поля.

  <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
       SelectCommand="SELECT * FROM [Employees] WHERE ([EmployeeID]=@EmployeeID)" 
      InsertCommand="INSERT INTO [Employees] ( [LastName], 
      [FirstName], [Title], [BirthDate], [HireDate], [HomePhone]) 
           VALUES ( @LastName, 
           @FirstName, @Title, @BirthDate, @HireDate, @HomePhone)"  
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" > 
      <SelectParameters> 
      <asp:ControlParameter ControlID="GridView1" Name="EmployeeID"  
      PropertyName="SelectedValue" 
  /> 
      </SelectParameters> 
      <InsertParameters> 
      <asp:Parameter Type="String" Name="CustomerID"></asp:Parameter> 
      <asp:Parameter Type="String" Name="LastName"></asp:Parameter> 
      <asp:Parameter Type="String" Name="FirstName"></asp:Parameter> 
      <asp:Parameter Type="String" Name="Title"></asp:Parameter> 
      <asp:Parameter Type="String" Name="BirthDate"></asp:Parameter> 
      <asp:Parameter Type="String" Name="HireDate"></asp:Parameter> 
      <asp:Parameter Type="String" Name="HomePhone"></asp:Parameter> 
      </InsertParameters> 
  </asp:SqlDataSource> 
  

Ничего сложного, не так ли? :)

Можно также обновить вышестоящий GridView, чтобы в нем немедленно отображалась вставленная запись. Напишем обработчик события ItemInserted.

      protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e) 
      { 
          GridView1.DataBind(); 
      }
  

Работа с шаблонами полей.

Ввод дат было бы легче организовать с помощью календаря. Для этого можно определить шаблонизированное поле.

  <asp:TemplateField HeaderText="Дата приема" SortExpression="HireDate"> 
      <EditItemTemplate> 
      <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("HireDate") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <InsertItemTemplate> 
      <asp:Calendar ID="CalendarHireDate" runat="server"  
      BackColor="#EFF3FB" ForeColor="#003399" 
      SelectedDate='<%# Bind("HireDate") %>'></asp:Calendar> 
      </InsertItemTemplate> 
      <ItemTemplate> 
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("HireDate") %>'></asp:Label> 
      </ItemTemplate> 
  </asp:TemplateField> 
  

И, конечно, нужно изменить тип параметров.

      <asp:Parameter Type="DateTime" Name="HireDate"></asp:Parameter>
  

Редактирование и удаления делаются точно так, как в GridView.

Метод Bind, в отличие от метода Eval, работает в обе стороны, то есть не только читает данные из источника данных, но и позволяет его обновлять.

Возможность вставки записей DetailsView позволяет расширить возможности работы с источниками данных в ASP .NET 2.0.

События DetailsView

У DetailsView имеются пары событий, которые происходят при связывании с данными, при переходе из режима просмотра в режим вставки, при перелистывании страницы.

ItemCreated

ItemDeleting - ItemDeleted

ItemInserted - ItemInserting

ItemUpdated - ItemUpdating

ModeChanged - ModeChanging

В таблице Employees некоторые поля должны быть заполнены, у них стоит AllowNulls=false. Поэтому при работе нашей формы произойдет исключение, если попытаться вставить запись, не введя имя и фамилию. Чтобы избежать этого, во время обработки события ItemInserting нужно сделать проверку. Также обработаем событие ModeChanged, чтобы напомнить клиенту о его обязанностях. ))

  protected void DetailsView1_ModeChanged(object sender, EventArgs e) 
  { 
      switch (DetailsView1.CurrentMode) 
      { 
          case DetailsViewMode.Insert: 
              DetailsView1.HeaderText = "Заполните, пожалуйста, форму. Имя и фамилия обязательны."; 
              DetailsView1.HeaderStyle.ForeColor = System.Drawing.Color.Purple; 
              DetailsView1.HeaderStyle.BackColor = System.Drawing.Color.AliceBlue; 
              break; 
          case DetailsViewMode.ReadOnly: 
              DetailsView1.HeaderText = "Личное дело"; 
              DetailsView1.HeaderStyle.ForeColor = System.Drawing.Color.White; 
              DetailsView1.HeaderStyle.BackColor = System.Drawing.Color.FromArgb(0x507CD1); 
              break; 
      } 
  } 
  

Так как DetailsView1 все-таки таблица, ищем поля ввода в 0 и 1 строке в 1 столбце. Если там пусто, отменим вставку.

  protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e) 
      { 
          TextBox textbox1 = (TextBox)DetailsView1.Rows[0].Controls[1].Controls[0]; 
          textbox1.Text.Trim(); 
          TextBox textbox2 = (TextBox)DetailsView1.Rows[1].Controls[1].Controls[0]; 
          textbox2.Text.Trim(); 
          if (textbox1.Text == "" || textbox2.Text == "") 
              e.Cancel= true; 
      } 
  

Программное управление DetailsView

Предположим, мы нашли табличное представление информации о работнике слишком скучным. Мы хотим написать список характеристик работников в виде связного текста, а в DetailsView оставить только координаты(адрес, телефон).

Характеристика пишется с помощью элемента Repeater. Внутри него находится DetailsView. Источник данных рипитера– таблица Employees, как и выше. А какой установить источник у DetailsView? Если таким же, то для всех записей будет выводится та же самая информация – из первой записи таблицы. Так что для каждой записи нужен свой источник, отфильтрованный в соответствии с EmployeeID.

      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>" 
          SelectCommand="SELECT * FROM [Employees] "> 
      </asp:SqlDataSource> 
      <br> 
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemCreated="Repeater1_ItemCreated"> 
       <ItemTemplate> 
          <%# DataBinder.Eval(Container.DataItem, "TitleOfCourtesy") %> 
          <%# DataBinder.Eval(Container.DataItem, "FirstName") %>  
          <%# DataBinder.Eval(Container.DataItem, "LastName") %> was born in  
          <%# ((DateTime)DataBinder.Eval(Container.DataItem, "BirthDate")).ToLongDateString() %>. <p> 
          <p>He/She lives in <%# DataBinder.Eval(Container.DataItem, "City") %> 
          of the great country <%# DataBinder.Eval(Container.DataItem, "Country") %>. </p> 
          <p>We appreciate her work as <%# DataBinder.Eval(Container.DataItem, "Title") %>.</p> 
          <p><%# DataBinder.Eval(Container.DataItem, "Notes") %></p> 
          <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="EmployeeID" 
               Height="50px" Width="82%"> 
              <Fields> 
                  <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" /> 
                  <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" /> 
                  <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" /> 
                  <asp:BoundField DataField="HomePhone" HeaderText="HomePhone" SortExpression="HomePhone" /> 
                  <asp:BoundField DataField="Extension" HeaderText="Extension" SortExpression="Extension" /> 
                  <asp:ImageField HeaderText="Photo" DataImageUrlField="PhotoPath"> 
                  </asp:ImageField> 
              </Fields> 
          </asp:DetailsView> 
          </ItemTemplate> 
          <SeparatorTemplate><hr width=80%  dir=rtl></SeparatorTemplate> 
      </asp:Repeater> 
  

Во время обработки события ItemCreated, когда данные еще не связаны, можно динамически связать DetailsView с данными.

      protected void Repeater1_ItemCreated(object sender, RepeaterItemEventArgs e) 
      { 
          if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
          { 
              SqlDataSource sds = new SqlDataSource(); 
              sds.ConnectionString = SqlDataSource1.ConnectionString; 
              sds.ID = "SqlDataSource2"; 
              string Filter = String.Format("where EmployeeID = '{0}'", ((DataRowView)e.Item.DataItem)["EmployeeID"]); 
              sds.SelectCommand = "SELECT * FROM [Employees] " + Filter; 
              e.Item.Controls.Add(sds); 
              System.Web.UI.WebControls.DetailsView ds = (System.Web.UI.WebControls.DetailsView)e.Item.FindControl("DetailsView1"); 
              if (ds != null) 
                  ds.DataSourceID = sds.ID; 
          } 
  

Точно так же можно связать DetailsView с BulletedList, с DropDownList и другими.

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