To show complete details about a record, we can use DetailsView control. In this article we shall learn how to auto populate a single record columns on the page automatically and also how to explicitly specify the look and feel of a record column to display.
Many a times from the list of the records page, we need to provide a link against each record so that user can click on corresponding link and see the complete details about that record. If we are not using DetailsView control on the complete details page, we need to create several asp:Label controls and set its text property explicitly. DetailsView control fits in this scenario. DetailsView control is another data-bound control that helps us to display complete details about a single record at a time. It also gives us flexibility to manipulate, paginate the records.
Get hundreds of ASP.NET Tips and Tricks and ASP.NET Online training here.
In the previous article, we learnt about How to do pagination in the ListView using DataPager control? In this article,we shall learn how to show a record using DetailsView in ASP.NET?
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="true" />
<hr />DetailsView with custom fields
<asp:DetailsView ID="DetailsView2" runat="server" AutoGenerateRows="false">
<asp:TemplateField HeaderText="First Name">
<%# Eval("FirstName") %>
<asp:BoundField HeaderText="Last Name" DataField="LastName" />
<asp:BoundField HeaderText="Age" DataField="Age" />
<asp:BoundField HeaderText="Active" DataField="Active" />
In the above code snippet, on .aspx page we have a DetailsView control with AutoGenerateColumns true and other with false. The first DetailsView displays all the default columns from the datasource automatically and 2nd one let us define our structure and style of the data to display.
In the code behind, we have used ADO.NET to retrieve the data from the database and specified the data source to the DetailsView control.
string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
private void GetData()
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
// fire Fill method to fetch the data and fill into DataTable
// specify the data source for the DetailsView
DetailsView1.DataSource = table;
// bind the data now
DetailsView2.DataSource = table;
As we have kept
AutoGeneratedRows property of the first DetailsView to true (by default it is true) so several rows corresponding to each columns of the data source will be created and shown as displayed in the below picture. The 2nd DetailsView takes care of the fields specified with their header and footer specified in the asp:BoundField and asp:TemplateField and displays the record.
Note: Even if our Data Source will have multiple records, DetailsView shows only first record from the data source.
Hope this article was useful. Thanks for reading, hope you liked it.
Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.