Working with DetailView in ASP.NET

Introduction: Hello guys, In this article i am going to demonstrate how to use DetailView Data control in ASP.NET. Well DetailView is a data control which display data based on template designed. You can insert, edit and display data as you in this control. You can also use paging functionality to display multiple records at a time.

Code: Following example describes how to use a detail view control.

1. First of all design a template as you want to see.

<asp:DetailsView ID=”DetailsView1″ runat=”server” AutoGenerateRows=”False” ClientIDMode=”Static”
DataKeyNames=”UserID” DataMember=”DefaultView” Height=”50px” Width=”100%” OnModeChanging=”DetailsView1_ModeChanging”
OnDataBound=”DetailsView1_DataBound” OnItemUpdating=”DetailsView1_ItemUpdating”
GridLines=”None”>
<FieldHeaderStyle Width=”120px” />
<Fields>
<asp:TemplateField HeaderText=”UserID” InsertVisible=”False” SortExpression=”UserID”>
<ItemTemplate>
<asp:Label ID=”lblUserID” runat=”server” Text=’<%# Bind(“UserID”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Title” SortExpression=”Title”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlTitle” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlTitle” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”lblTitle” runat=”server” Text=’<%# Bind(“Title”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”FirstName” SortExpression=”FirstName”>
<EditItemTemplate>
<asp:TextBox ID=”txtFirstName” runat=”server” Text=’<%# Bind(“FirstName”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”txtFirstName” runat=”server” Text=’<%# Bind(“FirstName”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label5″ runat=”server” Text=’<%# Bind(“FirstName”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”LastName” SortExpression=”LastName”>
<EditItemTemplate>
<asp:TextBox ID=”txtLastName” runat=”server” Text=’<%# Bind(“LastName”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”txtLastName” runat=”server” Text=’<%# Bind(“LastName”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label6″ runat=”server” Text=’<%# Bind(“LastName”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Sex” SortExpression=”Sex”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlSex” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlSex” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”lblSex” runat=”server” Text=’<%# Bind(“Sex”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Email” SortExpression=”Email”>
<EditItemTemplate>
<asp:TextBox ID=”txtEmail” runat=”server” Text=’<%# Bind(“Email”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”txtEmail” runat=”server” Text=’<%# Bind(“Email”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label8″ runat=”server” Text=’<%# Bind(“Email”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”GroupID” SortExpression=”GroupID”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlGroup” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlGroup” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”lblGroup” runat=”server” Text=’<%# Bind(“GroupID”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”RoleID” SortExpression=”RoleID”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlRole” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlRole” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”lblRole” runat=”server” Text=’<%# Bind(“RoleID”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”ContactNo” SortExpression=”ContactNo”>
<EditItemTemplate>
<asp:TextBox ID=”txtContactNo” runat=”server” Text=’<%# Bind(“ContactNo”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”ContactNo” runat=”server” Text=’<%# Bind(“ContactNo”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label11″ runat=”server” Text=’<%# Bind(“ContactNo”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”DOB” SortExpression=”DOB”>
<EditItemTemplate>
<asp:TextBox ID=”txtDOB” runat=”server” Text=’<%# Bind(“DOB”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”txtDOB” runat=”server” Text=’<%# Bind(“DOB”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label12″ runat=”server” Text=’<%# Bind(“DOB”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Country” SortExpression=”Country”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlCountry” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlCountry” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label13″ runat=”server” Text=’<%# Bind(“Country”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”State” SortExpression=”State”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlState” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlState” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label14″ runat=”server” Text=’<%# Bind(“State”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”City” SortExpression=”City”>
<EditItemTemplate>
<asp:DropDownList ID=”ddlCity” runat=”server”>
</asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID=”ddlCity” runat=”server”>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label15″ runat=”server” Text=’<%# Bind(“City”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Address” SortExpression=”Address”>
<EditItemTemplate>
<asp:TextBox ID=”txtAddress” runat=”server” Text=’<%# Bind(“Address”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”txtAddress” runat=”server” Text=’<%# Bind(“Address”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”txtAddress” runat=”server” Text=’<%# Bind(“Address”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”PinCode” SortExpression=”PinCode”>
<EditItemTemplate>
<asp:TextBox ID=”txtPinCode” runat=”server” Text=’<%# Bind(“PinCode”) %>’></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID=”txtPinCode” runat=”server” Text=’<%# Bind(“PinCode”) %>’></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label3″ runat=”server” Text=’<%# Bind(“PinCode”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Photograph” SortExpression=”Photograph” HeaderStyle-VerticalAlign=”Top”>
<EditItemTemplate>
<p>
<asp:FileUpload ID=”FileUpload1″ runat=”server” ToolTip=”Browse photograph of product to upload”
CssClass=”fileUpload” onchange=”readURL(this);” />
</p>
<p>
<img src=’<%# Eval(“Photograph”) %>’ runat=”server” alt=”User Image” id=”userImage”
width=”200″ height=”200″ />
</p>
</EditItemTemplate>
<InsertItemTemplate>
<p>
<asp:FileUpload ID=”FileUpload1″ runat=”server” ToolTip=”Browse photograph of product to upload”
CssClass=”fileUpload” onchange=”readURL(this);” />
</p>
<p>
<img src=”#” alt=”User Image” id=”userImage” width=”200″ height=”200″ />
</p>
</InsertItemTemplate>
<ItemTemplate>
<img src=’<%# Bind(“Photograph”) %>’ alt=”User Photograph” runat=”server” id=”imgPhotograph”
width=”250″ height=”200″ />
</ItemTemplate>
<HeaderStyle VerticalAlign=”Top”></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Remarks” SortExpression=”Remarks”>
<EditItemTemplate>
<asp:TextBox runat=”server” class=”textarea” ID=”txtRemarks” TextMode=”MultiLine”
Text=’<%# Eval(“Remarks”) %>’ />
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox runat=”server” class=”textarea” ID=”txtRemarks” TextMode=”MultiLine”
Text=’<%# Eval(“Remarks”) %>’ />
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID=”Label1″ runat=”server” Text=’<%# Bind(“Remarks”) %>’></asp:Label>
</ItemTemplate>
<HeaderStyle VerticalAlign=”Top”></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText=”RegistrationDate” SortExpression=”RegistrationDate”>
<ItemTemplate>
<asp:Label ID=”Label2″ runat=”server” Text=’<%# Bind(“RegistrationDate”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType=”Button” EditText=”Edit Detail” ShowEditButton=”True”>
<ControlStyle CssClass=”submitButton” />
</asp:CommandField>
</Fields>
</asp:DetailsView>

2. In the code view at page_Load() write code to bind the detailview.

private void BindDetailView()
{
UserBAL user = UserBAL.IsAuthenticated();
DetailsView1.DataSource = user.GetUserDetail(user.UserID).Table.AsDataView();
DetailsView1.DataBind();
}

Demo:

ReadModeDetailView

3.   If you want to edit your data , yo have to write code to handle the update event yourself.

4. If you want to use any DropDown in edit mode. Bind those drp down using code.

private void BindDropDown()
{
DropDownList ddlTitle = DetailsView1.FindControl(“ddlTitle”) as DropDownList;
ddlTitle.DataSource = UtitlityMethods.EnumToDictionary<UserBAL.UserTitle>();
ddlTitle.DataTextField = “Value”;
ddlTitle.DataValueField = “Key”;
ddlTitle.DataBind();

DropDownList ddlGender = DetailsView1.FindControl(“ddlSex”) as DropDownList;
ddlGender.DataSource = UtitlityMethods.EnumToDictionary<UserBAL.Gender>();
ddlGender.DataTextField = “Value”;
ddlGender.DataValueField = “Key”;
ddlGender.DataBind();

DropDownList ddlGroup = DetailsView1.FindControl(“ddlGroup”) as DropDownList;
ddlGroup.DataSource = UtitlityMethods.EnumToDictionary<UserBAL.UserGroup>();
ddlGroup.DataTextField = “Value”;
ddlGroup.DataValueField = “Key”;
ddlGroup.DataBind();

DropDownList ddlRole = DetailsView1.FindControl(“ddlRole”) as DropDownList;
ddlRole.DataSource = UtitlityMethods.EnumToDictionary<UserBAL.UserRole>();
ddlRole.DataTextField = “Value”;
ddlRole.DataValueField = “Key”;
ddlRole.DataBind();

DropDownList ddlCountry = DetailsView1.FindControl(“ddlCountry”) as DropDownList;
ddlCountry.DataSource = AreaBAL.GetCountries();
ddlCountry.DataTextField = “AreaName”;
ddlCountry.DataValueField = “AreaID”;
ddlCountry.DataBind();

DropDownList ddlState = DetailsView1.FindControl(“ddlState”) as DropDownList;
ddlState.DataSource = AreaBAL.GetStateByCountry(1);
ddlState.DataTextField = “AreaName”;
ddlState.DataValueField = “AreaID”;
ddlState.DataBind();

DropDownList ddlCity = DetailsView1.FindControl(“ddlCity”) as DropDownList;
ddlCity.DataSource = AreaBAL.GetCityList();
ddlCity.DataTextField = “AreaName”;
ddlCity.DataValueField = “AreaID”;
ddlCity.DataBind();
}

5. Paste following line of code in DeatlView_ModeChanging() event

protected void DetailsView1_ModeChanging(object sender, DetailsViewModeEventArgs e)
{
switch (e.NewMode)
{
case DetailsViewMode.Edit:
DetailsView1.ChangeMode(DetailsViewMode.Edit);
BindDetailView();
break;
case DetailsViewMode.ReadOnly:
e.Cancel = true;
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
BindDetailView();
break;
}
}

6. If you are using any enum to bind dropdown the paste following line of code to typecast those enums into enumNames at DataBound() Event.

protected void DetailsView1_DataBound(object sender, EventArgs e)
{
if (DetailsView1.CurrentMode == DetailsViewMode.ReadOnly)
{
Label lblTitle = (DetailsView1.Rows[1].FindControl(“lblTitle”)) as Label;
lblTitle.Text = ((UserBAL.UserTitle)Convert.ToByte(lblTitle.Text)).ToString();

Label lblSex = (DetailsView1.Rows[1].FindControl(“lblSex”)) as Label;
lblSex.Text = ((UserBAL.Gender)Convert.ToByte(lblSex.Text)).ToString();

Label lblGroup = (DetailsView1.Rows[1].FindControl(“lblGroup”)) as Label;
lblGroup.Text = ((UserBAL.UserGroup)Convert.ToByte(lblGroup.Text)).ToString();

Label lblRole = (DetailsView1.Rows[1].FindControl(“lblRole”)) as Label;
lblRole.Text = ((UserBAL.UserRole)Convert.ToByte(lblRole.Text)).ToString();
}

if (DetailsView1.CurrentMode == DetailsViewMode.Edit || DetailsView1.CurrentMode == DetailsViewMode.Insert)
{
BindDropDown();
}
}

7. Now update the DetailView using following line of code.

protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
UserBAL user = new UserBAL();

user.UserID = Convert.ToInt32(DetailsView1.DataKey[0]);
user.Title = (UserBAL.UserTitle)((DropDownList)DetailsView1.Rows[1].FindControl(“ddlTitle”)).SelectedIndex;
user.FirstName = ((TextBox)DetailsView1.Rows[2].FindControl(“txtFirstName”)).Text;
user.LastName = ((TextBox)DetailsView1.Rows[3].FindControl(“txtLastName”)).Text;
user.Sex = (UserBAL.Gender)((DropDownList)DetailsView1.Rows[4].FindControl(“ddlSex”)).SelectedIndex;
user.EmailId = ((TextBox)DetailsView1.Rows[5].FindControl(“txtEmail”)).Text;
user.GroupID = (UserBAL.UserGroup)((DropDownList)DetailsView1.Rows[6].FindControl(“ddlGroup”)).SelectedIndex;
user.RoleID = (UserBAL.UserRole)((DropDownList)DetailsView1.Rows[7].FindControl(“ddlRole”)).SelectedIndex;
user.ContactNo = ((TextBox)DetailsView1.Rows[8].FindControl(“txtContactNo”)).Text;
user.DOB = Convert.ToDateTime(((TextBox)DetailsView1.Rows[9].FindControl(“txtDOB”)).Text);
user.Country = ((DropDownList)DetailsView1.Rows[10].FindControl(“ddlCountry”)).SelectedItem.ToString();
user.State = ((DropDownList)DetailsView1.Rows[11].FindControl(“ddlState”)).SelectedItem.ToString();
user.City = ((DropDownList)DetailsView1.Rows[12].FindControl(“ddlCity”)).SelectedItem.ToString();
user.Address = ((TextBox)DetailsView1.Rows[13].FindControl(“txtAddress”)).Text;
user.PinCode = ((TextBox)DetailsView1.Rows[14].FindControl(“txtPinCode”)).Text;

FileUpload fup1 = DetailsView1.FindControl(“FileUpload1″) as FileUpload;
System.Web.UI.HtmlControls.HtmlImage img = DetailsView1.FindControl(“userImage”) as System.Web.UI.HtmlControls.HtmlImage;

if (!string.IsNullOrEmpty(img.Src))
{
if (fup1.HasFile)
fup1.SaveAs(Server.MapPath(“~/Images/User/” + Path.GetFileName(fup1.PostedFile.FileName)));

user.Photograph = img.Src;
}
else
{
user.Photograph = string.Empty;
}

user.Remarks = ((TextBox)DetailsView1.FindControl(“txtRemarks”)).Text;

if (user != null)
{
user.UpdateUserDetail();
UtitlityMethods.ClientMessage(“Personal detail saved successfully.”, Constant.AlertType.Error);
}
else
{
UtitlityMethods.ClientMessage(“Oooops some problem occured while saving your detail. Please try again..”, Constant.AlertType.Error);
}

DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
BindDetailView();
}

Demo:

EditModeDetailView