- DetailsView Web Server Control
in ASP.NET environment,This article describes you how to work with DetailsView Web Control.The DetailsView control provides the simplest way to display,edit,update and delete data with the database.By using The DetailsView control,we can displays a single record from a data source in a table, where each data row represents a field in the record. It is often used in combination with a GridView control for master/detail scenarios.
The DetailsView control shows every field of a record on its own line. The DetailsView control is typically used for updating and inserting new records, often in a master/detail scenario where the selected record of the master control determines the record to display in the DetailsView control
When you set the AllowPaging property of the DetailsView control is true,The DetailsView control can automatically page over the data in its associated data source. The DetailsView control provides the user interface (UI) for navigating between data records.
For Data Binding to DetailsView Control
- use the DataSourceID property of the Controls such as SQLDatasource, which allows you to bind the DetailsView control to a data source control.
- Data binding using the DataSource property, which allows you to bind to various objects, including ADO.NET datasets and data readers.
Paging in a DetailsView Control
The DetailsView control can provide built-in paging that can be used to enable paging through records one at a time. The control can also support customizing the paging user interface (UI).
Data Paging Template
The Following ways helps you to customize the user interface (UI) of the DetailsView paging in a number of ways.
- Paging Modes -By Using PagerSettings property, you can customize the appearance of the paging user interface (UI) of the Detailsview.
- The DetailsView control can display direction controls that enable forward and backward navigation as well as numeric controls that enable a user to move to a specific page.
The following code snippets explains you the Paging Mode
-
DetailsView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast
-
The available Modes are as follows,
- NextPrevious
- NextPreviousFirstLast
- Numeric
- NumericFirstLast
Data Paging Template
The DetailsView control automatically adds user interface (UI) controls for paging after you have specify the AllowPaging Property is to True. You can customize the UI for paging by adding a PagerTemplate template. To specify which paging operation to perform, add a Button control to the template, and then set its CommandName property to Page and its CommandArgument property to one of the following values:
- Next -To navigate to the next page of data
- Prev - To navigate to the previous page.
- First -To navigate to the first page.
- Last -To navigate to the last page.
The following code snippets explains you working with Paging of Detailsview
-
<html >
<head id="Head1" runat="server">
<title>DetailsView Example</title>
</head>
<body>
<form id="form2" runat="server">
<h3>DetailsView Example</h3>
<table cellspacing="10">
<tr>
<td valign="top">
<asp:DetailsView ID="DV1"
DataSourceID="SQLDS1"
AutoGenerateRows="false"
AllowPaging="true"
DataKeyNames="Col"
runat="server">
<HeaderStyle forecolor="white" backcolor="Blue" />
<Fields>
<asp:BoundField Datafield="Col1" HeaderText="Column 1"
ReadOnly="true"/>
<asp:BoundField Datafield="Col2" HeaderText="Column 2"/>
<asp:BoundField Datafield="Col3" HeaderText="Column3"/>
</Fields>
<PagerSettings Mode="NextPreviousFirstLast"
FirstPageText="<<"
LastPageText=">>"
PageButtonCount="1"
Position="Top"/>
</asp:DetailsView>
</td>
</tr>
</table>
<asp:SqlDataSource ID="SQLDS1"
SelectCommand="SELECT * FROM [Table1]"
connectionstring="<%$ ConnectionStrings:YourConnString %>"
RunAt="server"/>
</form>
</body>
</html>
-
- Modifying Data in a DetailsView Control
The DetailsView control provides built-in edit or delete records without user making any code snippets. You can customize the editing functionality of the DetailsView control using events and templates.
Built-In Editing Features
in DetailsView Web Control, you can easily enable the Editing Features by setting one or more of the AutoGenerateEditButton, AutoGenerateInsertButton, and AutoGenerateDeleteButton properties to true
Customizing User Interface in the DetailsView Control
When you setting the AutoGenerateRows Propery is to false, then you can customize which fields of the Record will be bound to the DetailsView control. By default, AutoGenerateRows is set to True that allows the DetailsView control automatically generates a row for each bound field from the data source.
You can specify whether a bound field is editable using the ReadOnly property of the BoundField control. When the ReadOnly property is set to false, the field will be editable when the user clicks the Edit command button. When the ReadOnly property is true, the bound field will be displayed, but the user will not be able to edit the field.
Likewise, you can specify InsertVisible that denotes whether a value can be inserted for a bound field or not. If the InsertVisible property is false, then the bound field will not be displayed when the user clicks the New command button
The following code snippets explains you the DetailsView control to display Data.
-
in .aspx.cs page,
-
void EmployeesDropDownList_OnSelectedIndexChanged(Object sender, EventArgs e)
{
EmployeeDetailsView.DataBind();
}
void EmployeeDetailsView_ItemUpdated(Object sender,
DetailsViewUpdatedEventArgs e)
{
EmployeesDropDownList.DataBind();
EmployeesDropDownList.SelectedValue = e.Keys["EmployeeID"].ToString();
EmployeeDetailsView.DataBind();
}
void EmployeeDetailsView_ItemDeleted(Object sender,
DetailsViewDeletedEventArgs e)
{
EmployeesDropDownList.DataBind();
}
void EmployeeDetailsSqlDataSource_OnInserted(Object sender,
SqlDataSourceStatusEventArgs e)
{
System.Data.Common.DbCommand command = e.Command;
EmployeesDropDownList.DataBind();
EmployeesDropDownList.SelectedValue =
command.Parameters["@EmpID"].Value.ToString();
EmployeeDetailsView.DataBind();
}
-
in .aspx.cs page,
-
<html >
<head id="Head1" runat="server">
<title>Northwind Employees</title>
</head>
<body>
<form id="form2" runat="server">
<h3>Northwind Employees</h3>
<table cellspacing="10">
<tr>
<td valign="top">
<asp:DropDownList ID="EmployeesDropDownList"
DataSourceID="EmployeesSqlDataSource"
DataValueField="EmployeeID"
DataTextField="FullName"
AutoPostBack="True"
OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
RunAt="Server" />
</td>
<td valign="top">
<asp:DetailsView ID="EmployeeDetailsView"
DataSourceID="EmployeeDetailsSqlDataSource"
AutoGenerateRows="false"
AutoGenerateInsertbutton="true"
AutoGenerateEditbutton="true"
AutoGenerateDeletebutton="true"
DataKeyNames="EmployeeID"
Gridlines="Both"
OnItemUpdated="EmployeeDetailsView_ItemUpdated"
OnItemDeleted="EmployeeDetailsView_ItemDeleted"
RunAt="server">
<HeaderStyle backcolor="Navy"
forecolor="White"/>
<RowStyle backcolor="White"/>
<AlternatingRowStyle backcolor="LightGray"/>
<EditRowStyle backcolor="LightCyan"/>
<Fields>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID"
InsertVisible="False" ReadOnly="true"/>
<asp:BoundField DataField="FirstName" HeaderText="First Name"/>
<asp:BoundField DataField="LastName" HeaderText="Last Name"/>
<asp:BoundField DataField="Address" HeaderText="Address"/>
<asp:BoundField DataField="City" HeaderText="City"/>
<asp:BoundField DataField="Region" HeaderText="Region"/>
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>
</Fields>
</asp:DetailsView>
</td>
</tr>
</table>
<asp:SqlDataSource ID="EmployeesSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS
FullName FROM Employees"
Connectionstring="<%$ ConnectionStrings:Conn %>"
RunAt="server">
</asp:SqlDataSource>
<asp:SqlDataSource ID="EmployeeDetailsSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City,
Region, PostalCode
FROM Employees WHERE EmployeeID = @EmpID"
InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City,
Region, PostalCode)VALUES (@LastName, @FirstName, @Address,
@City, @Region, @PostalCode);
SELECT @EmpID = SCOPE_IDENTITY()"
UpdateCommand="UPDATE Employees SET LastName=@LastName,
FirstName=@FirstName, Address=@Address,
City=@City, Region=@Region, PostalCode=@PostalCode
WHERE EmployeeID=@EmployeeID"
DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"
ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
RunAt="server">
<SelectParameters>
<asp:ControlParameter ControlID="EmployeesDropDownList"
PropertyName="SelectedValue"
Name="EmpID" Type="Int32" DefaultValue="0" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<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="EmpID" Direction="Output" Type="Int32"
DefaultValue="0" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<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="EmployeeID" Type="Int32" DefaultValue="0" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
</DeleteParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
-
- Related Links
-
