How to show a record using DetailsView in ASP.NET?

DetailsView

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?

ASPX PAGE

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="true" />

 <hr />DetailsView with custom fields
        <asp:DetailsView ID="DetailsView2" runat="server" AutoGenerateRows="false">
            <Fields>                
                <asp:TemplateField HeaderText="First Name">
                    <ItemTemplate>
                        <%# Eval("FirstName") %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Last Name" DataField="LastName" />
                <asp:BoundField HeaderText="Age" DataField="Age" />
                <asp:BoundField HeaderText="Active" DataField="Active" />
            </Fields>
        </asp:DetailsView>

CODE BEHIND

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetData();
}
}
 
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
ad.Fill(table);
}
}
}
// specify the data source for the DetailsView
DetailsView1.DataSource = table;
// bind the data now
DetailsView1.DataBind();

DetailsView2.DataSource = table;
DetailsView2.DataBind();
}
 

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.

OUTPUT

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.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.