DetailsView Example, How use DetailsView in ASP.Net 2.0/3.5/4.0

Displays the values of a single record from a data source in a table, where each data row represents a field of the record. The DetailsView control allows you to edit, delete, and insert records.
The DetailsView control binds to a data source control. The data source control handles the details of connecting to a data store and returning the selected data. Binding the DetailsView control to data is as simple as setting the DataSourceID property declaratively. Also, the code option is available.
The operations will depend upon the data source, but the DetailsView control allows you to page, update, insert, and delete data from the underlying data source, as long at the operations are allowed by the underlying data source and respective SQL commands are defined. In keeping with the GridView control, the DetailsView control can easily be used without code.

The Fields element is used to define the fields to be included in a DetailView control. The possibilities include the following:
  • BoundField: Bind the field to a data item from the underlying data source.
  • ButtonField: Include a button in the display.
  • CheckBoxField: Include check box controls in the display.
  • CommandField: Include command buttons in the display.
  • HyperLinkField: Include URL links in the display.
  • ImageField: Display underlying data as an image.
  • TemplateField: Define a custom display format for a data element.
BoundField field types to display data from the SQL Server data source with custom labels. Also, the example utilizes the delete, edit, and update button options via the following DetailsView object properties:
  • AutoGenerateDeleteButton: Boolean value signaling whether the Delete button is displayed. The DeleteCommand of the associated data connection is used to perform the delete of the selected record.
  • AutoGenerateInsertButton: Boolean value signaling whether the Insert button is displayed. The InsertCommand property of the associated data connection is used to perform the new record insertion.
  • AutoGenerateEditButton: Boolean value determining if the Edit button is displayed. Selecting this button puts the record in edit mode and displays an update button to save the changes. The UpdateCommand property of the associated data connection is used to save the changes to the backend data source.
The TemplateField field type provides more control over data fields within the DetailsView data control. It allows you to control the appearance and behavior of the field when it is being edited, viewed, or a new value is being added. The following elements are used to control these behaviors:
  • EditItemTemplate: Control the appearance of the field when the current DetailsView record is in edit mode.
  • InsertItemTemplate: Determine how the field will appear when a new record is being added to the underlying data source.
  • ItemTemplate: How the field appears when being viewed by the user.
<asp:DetailsView
AccessKey="string"
AllowPaging="True|False"
AutoGenerateDeleteButton="True|False"
AutoGenerateEditButton="True|False"
AutoGenerateInsertButton="True|False"
AutoGenerateRows="True|False"
BackColor="color name|#dddddd"
BackImageUrl="uri"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
Inset|Outset"
BorderWidth="size"
Caption="string"
CaptionAlign="NotSet|Top|Bottom|Left|Right"
CellPadding="integer"
CellSpacing="integer"
CssClass="string"
DataKeyNames="string"
DataMember="string"
DataSource="string"
DataSourceID="string"
DefaultMode="ReadOnly|Edit|Insert"
EmptyDataText="string"
Enabled="True|False"
EnablePagingCallbacks="True|False"
EnableTheming="True|False"
EnableViewState="True|False"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
FooterText="string"
ForeColor="color name|#dddddd"
GridLines="None|Horizontal|Vertical|Both"
HeaderText="string"
Height="size"
HorizontalAlign="NotSet|Left|Center|Right|Justify"
ID="string"
OnDataBinding="DataBinding event handler"
OnDataBound="DataBound event handler"
OnDisposed="Disposed event handler"
OnInit="Init event handler"
OnItemCommand="ItemCommand event handler"
OnItemCreated="ItemCreated event handler"
OnItemDeleted="ItemDeleted event handler"
OnItemDeleting="ItemDeleting event handler"
OnItemInserted="ItemInserted event handler"
OnItemInserting="ItemInserting event handler"
OnItemUpdated="ItemUpdated event handler"
OnItemUpdating="ItemUpdating event handler"
OnLoad="Load event handler"
OnModeChanged="ModeChanged event handler"
OnModeChanging="ModeChanging event handler"
OnPageIndexChanged="PageIndexChanged event handler"
OnPageIndexChanging="PageIndexChanging event handler"
OnPreRender="PreRender event handler"
OnUnload="Unload event handler"
PageIndex="integer"
PagerSettings-FirstPageImageUrl="uri"
PagerSettings-FirstPageText="string"
PagerSettings-LastPageImageUrl="uri"
PagerSettings-LastPageText="string"
PagerSettings-Mode="NextPrevious|Numeric|NextPreviousFirstLast|NumericFirstLast"
PagerSettings-NextPageImageUrl="uri"
PagerSettings-NextPageText="string"
PagerSettings-PageButtonCount="integer"
PagerSettings-Position="Bottom|Top|TopAndBottom"
PagerSettings-PreviousPageImageUrl="uri"
PagerSettings-PreviousPageText="string"
PagerSettings-Visible="True|False"
runat="server"
SkinID="string"
Style="string"
TabIndex="integer"
ToolTip="string"
Visible="True|False"
Width="size"
>
<AlternatingRowStyle />
<CommandRowStyle />
<EditRowStyle />
<EmptyDataRowStyle />
<EmptyDataTemplate>
<!-- child controls -->
</EmptyDataTemplate>
<FieldHeaderStyle />
<Fields>
<asp:BoundField
AccessibleHeaderText="string"
ApplyFormatInEditMode="True|False"
ConvertEmptyStringToNull="True|False"
DataField="string"
DataFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
HtmlEncode="True|False"
InsertVisible="True|False"
NullDisplayText="string"
ReadOnly="True|False"
ShowHeader="True|False"
SortExpression="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:BoundField>
<asp:ButtonField
AccessibleHeaderText="string"
ButtonType="Button|Image|Link"
CausesValidation="True|False"
CommandName="string"
DataTextField="string"
DataTextFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
ImageUrl="uri"
InsertVisible="True|False"
ShowHeader="True|False"
SortExpression="string"
Text="string"
ValidationGroup="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:ButtonField>
<asp:CheckBoxField
AccessibleHeaderText="string"
DataField="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
InsertVisible="True|False"
ReadOnly="True|False"
ShowHeader="True|False"
SortExpression="string"
Text="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:CheckBoxField>
<asp:CommandField
AccessibleHeaderText="string"
ButtonType="Button|Image|Link"
CancelImageUrl="uri"
CancelText="string"
CausesValidation="True|False"
DeleteImageUrl="uri"
DeleteText="string"
EditImageUrl="uri"
EditText="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
InsertImageUrl="uri"
InsertText="string"
InsertVisible="True|False"
NewImageUrl="uri"
NewText="string"
SelectImageUrl="uri"
SelectText="string"
ShowCancelButton="True|False"
ShowDeleteButton="True|False"
ShowEditButton="True|False"
ShowHeader="True|False"
ShowInsertButton="True|False"
ShowSelectButton="True|False"
SortExpression="string"
UpdateImageUrl="uri"
UpdateText="string"
ValidationGroup="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:CommandField>
<asp:DynamicField
AccessibleHeaderText="string"
ApplyFormatInEditMode="True|False"
ConvertEmptyStringToNull="True|False"
DataField="string"
DataFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
HtmlEncode="True|False"
InsertVisible="True|False"
NullDisplayText="string"
ShowHeader="True|False"
UIHint="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:DynamicField>
<asp:HyperLinkField
AccessibleHeaderText="string"
DataNavigateUrlFields="string"
DataNavigateUrlFormatString="string"
DataTextField="string"
DataTextFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
InsertVisible="True|False"
NavigateUrl="uri"
ShowHeader="True|False"
SortExpression="string"
Target="string|_blank|_parent|_search|_self|_top"
Text="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:HyperLinkField>
<asp:ImageField
AccessibleHeaderText="string"
AlternateText="string"
ConvertEmptyStringToNull="True|False"
DataAlternateTextField="string"
DataAlternateTextFormatString="string"
DataImageUrlField="string"
DataImageUrlFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
InsertVisible="True|False"
NullDisplayText="string"
NullImageUrl="uri"
ReadOnly="True|False"
ShowHeader="True|False"
SortExpression="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:ImageField>
<asp:TemplateField
AccessibleHeaderText="string"
ConvertEmptyStringToNull="True|False"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
InsertVisible="True|False"
ShowHeader="True|False"
SortExpression="string"
Visible="True|False"
>
<ControlStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
<AlternatingItemTemplate>
<!-- child controls -->
</AlternatingItemTemplate>
<EditItemTemplate>
<!-- child controls -->
</EditItemTemplate>
<FooterTemplate>
<!-- child controls -->
</FooterTemplate>
<HeaderTemplate>
<!-- child controls -->
</HeaderTemplate>
<InsertItemTemplate>
<!-- child controls -->
</InsertItemTemplate>
<ItemTemplate>
<!-- child controls -->
</ItemTemplate>
</asp:TemplateField>
</Fields>
<FooterStyle />
<FooterTemplate>
<!-- child controls -->
</FooterTemplate>
<HeaderStyle />
<HeaderTemplate>
<!-- child controls -->
</HeaderTemplate>
<InsertRowStyle />
<PagerSettings
FirstPageImageUrl="uri"
FirstPageText="string"
LastPageImageUrl="uri"
LastPageText="string"
Mode="NextPrevious|Numeric|NextPreviousFirstLast|
NumericFirstLast"
NextPageImageUrl="uri"
NextPageText="string"
OnPropertyChanged="PropertyChanged event handler"
PageButtonCount="integer"
Position="Bottom|Top|TopAndBottom"
PreviousPageImageUrl="uri"
PreviousPageText="string"
Visible="True|False"
/>
<PagerStyle />
<PagerTemplate>
<!-- child controls -->
</PagerTemplate>
<RowStyle />
</asp:DetailsView>



<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataSourceID="Customers"
DataKeyNames="CustomerID">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="CustomerName" HeaderText="CustomerName" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" />
</Columns>
</asp:GridView>
</td>
<td valign="top">
<asp:DetailsView ID="DetailsView1" runat="server"
AutoGenerateRows="True" DataKeyNames="CustomerID"
DataSourceID="Details" Height="50px" Width="301px">
</asp:DetailsView>
</td>
</tr>
</table>

<asp:SqlDataSource ID="Details" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM [Customers] WHERE ([CustomerID] = @CustomerID)">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="CustomerID"
PropertyName="SelectedValue"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="Customers" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CompanyName], [CustomerName], [CustomerID] FROM [Customers]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Tags: , , , , , , , ,
Hot on Web:


About author