DetailsView Rich Data Control

Introduction:

In this article we are going to discuss about DetailsView data control.  In ASP.NET 2.0, DetailsView is a data-bound control that renders a single record at a time from its associated data source. It can optionally provide paging buttons to navigate between records, and a command bar to execute basic operations on the current record (Insert, Update, Delete). DetailsView generates a user interface similar to the Form View of a Microsoft Access database, and is typically used for updating/deleting any currently displayed record or for inserting new records.  The difference between the DetailsView and FormView is their support for templates. The DetailsView is build out of field objects, in the same way that the Grid View is build out of column objects.

You can configure the DetailsView control to display a Delete and an Insert button so that you can delete the corresponding data record from the data source or insert a new data record. Similar to the AutoGenerateInsertButton property, when the  AutoGenerateInsertButton property is set to true on the DetaillsView control, it renders a New button. When the New button is clicked, the DetaillsView control's CurrentMode property changes to Insert. The DetaillsView control renders appropriate UI input controls for each bound field, unless the InsertVisible property of the bound field is set to false.

I am going to show use of all command bar in details.

NOTE I am using northwind database for this sample.



Figure 1: is showing one records at a time and paging is enabled.



Figure 2: when click on new command bar then should be look like this. Here you can insert record in database.



Figure 3: You can update existing record using update command bar.

So don't you think it's very useful control. I did not write one like code during insert, delete, update. For more information I am writing .aspx page code and attaching my sample application you need to only change connection string in web.config. And I am using SqlDataSource. You can use whatever you want according to your need.

. aspx code

DetailsView:

<asp:DetailsView ID="DetailsView1" runat="server" Height="50px"

Width="532px" AllowPaging="True" AutoGenerateRows="False"

CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"

ForeColor="#333333" GridLines="None" AutoGenerateDeleteButton="True"

AutoGenerateEditButton="True" AutoGenerateInsertButton="True">

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<CommandRowStyle BackColor="#FFFFC0" Font-Bold="True" />

<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

<PagerStyle BackColor="#FFCC66" Font-Names="Georgia" Font-Size="Medium" ForeColor="#333333"

HorizontalAlign="Center" />

<Fields>

<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />

<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="Region" HeaderText="Region" SortExpression="Region" />

<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />

<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />

<asp:BoundField DataField="HomePhone" HeaderText="HomePhone" SortExpression="HomePhone" />

<asp:BoundField DataField="Extension" HeaderText="Extension" SortExpression="Extension" />

<asp:BoundField DataField="Notes" HeaderText="Notes" SortExpression="Notes" />

</Fields>

<FieldHeaderStyle BackColor="#FFFF99" Font-Bold="True" />

<HeaderStyle BackColor="#990000" Font-Bold="True" Font-Names="Georgia" ForeColor="White" />

<AlternatingRowStyle BackColor="White" />

<EditRowStyle Font-Names="Georgia" Font-Size="Small" />

</asp:DetailsView>

SqlDataSource:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  

SelectCommand="SELECT * FROM [Employees] ORDER BY [EmployeeID]"            

DeleteCommand="DELETE FROM [Employees] WHERE EmployeeID = @EmployeeID"

InsertCommand = "INSERT INTO [Employees] ([LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City],[Region], [PostalCode], [Country], [HomePhone], [Extension], [Notes]) VALUES (@LastName, @FirstName, @Title, @TitleOfCourtesy, @BirthDate, @HireDate, @Address, @City, @Region, @PostalCode, @Country, @HomePhone, @Extension, @Notes)"           

UpdateCommand = "UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title, [TitleOfCourtesy] = @TitleOfCourtesy, [BirthDate] = @BirthDate, [HireDate] = @HireDate,[Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [HomePhone] = @HomePhone, [Extension] = @Extension, [Notes] = @Notes  WHERE [EmployeeID] = @EmployeeID">

<DeleteParameters>

  <asp:Parameter Name="EmployeeID" Type="int32"  />

 </DeleteParameters>

 <InsertParameters>

            <asp:Parameter Name="LastName" Type="String"  />

            <asp:Parameter Name="FirstName" Type="String"  />

            <asp:Parameter Name="Title" Type="String"  />

            <asp:Parameter Name="TitleOfCourtesy" Type="String"  />

            <asp:Parameter Name="BirthDate" Type="datetime"  />

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

            <asp:Parameter Name="Address" Type="String"  />

            <asp:Parameter Name="City" Type="String"  />

            <asp:Parameter Name="Region" Type="String"  />

            <asp:Parameter Name="PostalCode" Type="String"  />

            <asp:Parameter Name="Country" Type="String"  />

            <asp:Parameter Name="HomePhone" Type="String"  />

            <asp:Parameter Name="Extension" Type="String"  />

            <asp:Parameter Name="Notes" Type="String"  />

            <asp:Parameter Name="ReportsTo" Type="int32"  />

            <asp:Parameter Name="PhotoPath" Type="String"  />           

 </InsertParameters>

           

 <UpdateParameters>

            <asp:Parameter Name="EmployeeID" Type="int32"  />

            <asp:Parameter Name="LastName" Type="String"  />

            <asp:Parameter Name="FirstName" Type="String"  />

            <asp:Parameter Name="Title" Type="String"  />

            <asp:Parameter Name="TitleOfCourtesy" Type="String"  />

            <asp:Parameter Name="BirthDate" Type="datetime"  />

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

            <asp:Parameter Name="Address" Type="String"  />

            <asp:Parameter Name="City" Type="String"  />

            <asp:Parameter Name="Region" Type="String"  />

            <asp:Parameter Name="PostalCode" Type="String"  />

            <asp:Parameter Name="Country" Type="String"  />

            <asp:Parameter Name="HomePhone" Type="String"  />

            <asp:Parameter Name="Extension" Type="String"  />

            <asp:Parameter Name="Notes" Type="String"  />

            <asp:Parameter Name="ReportsTo" Type="int32"  />

            <asp:Parameter Name="PhotoPath" Type="String"  />

 </UpdateParameters>

</asp:SqlDataSource>

So what are you waiting for just implement this control.

Coming next article FormView Rich Data Control.