Элемент управления 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.
Свойства пейджера такие же как у GridView. Единственное отличие – отсутствие свойства PageSize – так как DetailsView всегда отображает одну запись. Например, для навигации по страницам использовать картинки. При этом PagerSettings:Mode должен быть задан как NumericFirstLast.
<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 – это не только вертикальная таблица с возможностью рассмотреть детали интересующей записи, но и возможность вставлять записи в таблицу, не создавая дополнительных элементов управления и не писать при этом большого количества кода.
Автор: Асмик Гаряка
Источник: aspnetmania.com
|
|