The DetailsView is a control that is complementary to the GridView control. It has been introduced in ASP.NET 2.0 to provide an ability to work with a single record or row from an associated data source. The default view of this control is vertical with each column of the record displayed on a line of its own
. The DetailsView, like the GridView rides on the data source capabilities to update, insert or delete rows.
( Download full Source code )
It renders a single data item at a time even when the data source exposes more items.
Here I just would loke to show you how to bind the data to the details view and how to edit/delete the data in the details view and how add a new record to details view.
We can define the details in our .aspx page like this with the reqiured templates for new reocrd , edit and update.
In Default.aspx page:
<asp:DetailsView ID="dtvUserdetails" runat="server" AllowPaging="True"
AutoGenerateRows="False" CellPadding="4" ForeColor="#333333" GridLines="None"
Height="50px" onitemupdating="dtvUserdetails_ItemUpdating"
onmodechanging="dtvUserdetails_ModeChanging"
onpageindexchanging="dtvUserdetails_PageIndexChanging" Width="125px"
onitemdeleting="dtvUserdetails_ItemDeleting"
oniteminserting="dtvUserdetails_ItemInserting"
onmodechanged="dtvUserdetails_ModeChanged">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<Fields>
<asp:TemplateField HeaderText="Emp Id">
<EditItemTemplate>
<asp:Label ID="lblEmpId" runat="server" Text='<%# Bind("Eid") %>'></asp:Label>
</EditItemTemplate>
<InsertItemTemplate>
<asp:Label ID="lblEmpId" runat="server" Text='<%# Bind("Eid") %>'></asp:Label>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblEmpId" runat="server" Text='<%# Bind("Eid") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName">
<EditItemTemplate>
<asp:TextBox ID="txtFirstName" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvFirstname" runat="server"
ControlToValidate="txtFirstName" ErrorMessage="Please Enter First name"
ValidationGroup="g1"></asp:RequiredFieldValidator>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtFirstName0" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvFirstname0" runat="server"
ControlToValidate="txtFirstName0" ErrorMessage="Please Enter First name"
ValidationGroup="g1"></asp:RequiredFieldValidator>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName">
<EditItemTemplate>
<asp:TextBox ID="txtLastname" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvLastname" runat="server"
ControlToValidate="txtLastname" ErrorMessage="Please Enter Last name"
ValidationGroup="g1"></asp:RequiredFieldValidator>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtLastName0" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvLastname0" runat="server"
ControlToValidate="txtLastName0" ErrorMessage="Please Enter Last name"
ValidationGroup="g1"></asp:RequiredFieldValidator>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Platform">
<EditItemTemplate>
<asp:TextBox ID="txtPaltform" runat="server" Text='<%# Bind("Platform") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvPlatform" runat="server"
ControlToValidate="txtPaltform" ErrorMessage="Please Enter Platform"
ValidationGroup="g1"></asp:RequiredFieldValidator>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtPlatform0" runat="server" Text='<%# Bind("Platform") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvPlatform0" runat="server"
ControlToValidate="txtPlatform0" ErrorMessage="Please Enter Platform"
ValidationGroup="g1"></asp:RequiredFieldValidator>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblPlatform" runat="server" Text='<%# Bind("Platform") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Salary">
<EditItemTemplate>
<asp:TextBox ID="txtSalary" runat="server" Text='<%# Bind("Salary") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvSalary" runat="server"
ControlToValidate="txtSalary" ErrorMessage="Please Enter Salary"
ValidationGroup="g1" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevSalary" runat="server"
ControlToValidate="txtSalary" Display="Dynamic"
ErrorMessage="Not a valid Salary" ValidationExpression="^([0-9]*|\d*\.\d{2})$"
ValidationGroup="g1"></asp:RegularExpressionValidator>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtSalary0" runat="server" Text='<%# Bind("Salary") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvSalary0" runat="server"
ControlToValidate="txtSalary0" ErrorMessage="Please Enter Salary"
ValidationGroup="g1" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevSalary" runat="server"
ControlToValidate="txtSalary0" Display="Dynamic"
ErrorMessage="Not a valid Salary" ValidationExpression="^([0-9]*|\d*\.\d{2})$"
ValidationGroup="g1"></asp:RegularExpressionValidator>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblSalary" runat="server" Text='<%# Bind("Salary") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="MobileNumber">
<EditItemTemplate>
<asp:TextBox ID="txtMobile" runat="server" MaxLength="10"
Text='<%# Bind("MobileNumber") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvMobile" runat="server"
ControlToValidate="txtMobile" ErrorMessage="Please Enter Mobile Number"
ValidationGroup="g1" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevMobile" runat="server"
ControlToValidate="txtMobile" Display="Dynamic"
ErrorMessage="Not a valid number" ValidationExpression="^\d{10}$"
ValidationGroup="g1"></asp:RegularExpressionValidator>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtMobile0" runat="server" MaxLength="10"
Text='<%# Bind("MobileNumber") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvMobile0" runat="server"
ControlToValidate="txtMobile0" ErrorMessage="Please Enter Mobile Number"
ValidationGroup="g1" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevMobile0" runat="server"
ControlToValidate="txtMobile0" Display="Dynamic"
ErrorMessage="Not a valid number" ValidationExpression="^\d{10}$"
ValidationGroup="g1"></asp:RegularExpressionValidator>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblMobile" runat="server" Text='<%# Bind("MobileNumber") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EmailId">
<EditItemTemplate>
<asp:TextBox ID="txtMailId" runat="server" Text='<%# Bind("EmailId") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvEmail" runat="server"
ControlToValidate="txtMailId" ErrorMessage="Please Enter EmailId"
ValidationGroup="g1" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevEmail" runat="server"
ControlToValidate="txtMailId" Display="Dynamic"
ErrorMessage="Nat a valid Email Id"
ValidationExpression="^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$"
ValidationGroup="g1"></asp:RegularExpressionValidator>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtMailId0" runat="server" Text='<%# Bind("EmailId") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvEmail0" runat="server"
ControlToValidate="txtMailId0" ErrorMessage="Please Enter EmailId"
ValidationGroup="g1" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevEmail" runat="server"
ControlToValidate="txtMailId0" Display="Dynamic"
ErrorMessage="Nat a valid Email Id"
ValidationExpression="^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$"
ValidationGroup="g1"></asp:RegularExpressionValidator>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="lblMailId" runat="server" Text='<%# Bind("EmailId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server" CausesValidation="True"
CommandName="Update" Text="Update" ValidationGroup="g1"></asp:LinkButton>
<asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CausesValidation="False"
CommandName="Edit" Text="Edit"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<InsertItemTemplate>
<asp:LinkButton ID="lnkInsert" runat="server" CausesValidation="True"
CommandName="Insert" Text="Insert" ValidationGroup="g1"></asp:LinkButton>
<asp:LinkButton ID="lnkCacel" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</InsertItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkNew" runat="server" CausesValidation="False"
CommandName="New" Text="New"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Fields>
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:DetailsView>
To bind data to our Details view with Id "dtvUserdetails"
In Default.aspx.cs:
public void binddata()
{
SqlCommand cmd=new SqlCommand("select * from Testing2 order by eid",conn);
conn.Open();
DataSet ds = new DataSet();
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds, "user details");
dtvUserdetails.DataSource=ds.Tables["user details"].DefaultView;
dtvUserdetails.DataBind();
dtvUserdetails.AllowPaging = true;
conn.Close();
}
To insert an item we have "dtvUserdetails_ItemInserting", to Update and Item we have "dtvUserdetails_ItemUpdating" and to Delete an item we have "dtvUserdetails_ItemDeleting"
For Updating the DetialsView items
protected void dtvUserdetails_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
string FirstName=((TextBox)dtvUserdetails.FindControl("txtFirstName")).Text;
string LastName =((TextBox)dtvUserdetails.FindControl("txtLastname")).Text;
string Platfrom = ((TextBox)dtvUserdetails.FindControl("txtPaltform")).Text;
string Salary = ((TextBox)dtvUserdetails.FindControl("txtSalary")).Text;
string Mobile = ((TextBox)dtvUserdetails.FindControl("txtMobile")).Text;
string Email = ((TextBox)dtvUserdetails.FindControl("txtMailId")).Text;
string EmpId = ((Label)dtvUserdetails.FindControl("lblEmpId")).Text;
try
{
SqlCommand mySqlUpdate = new SqlCommand("Update Testing2 set FirstName='" + FirstName + "', name='" + LastName + "', salary='" + decimal.Parse(Salary) + "', platform='" + Platfrom + "',MobileNumber='" + decimal.Parse(Mobile) + "', EmailId='" + Email + "' where Eid='" + int.Parse(EmpId) + "' ", conn);
conn.Open();
mySqlUpdate.ExecuteNonQuery();
conn.Close();
Response.Write("<script>alert('Updated successfully')</script>");
dtvUserdetails.ChangeMode(DetailsViewMode.ReadOnly);
binddata();
}
catch
{
conn.Close();
Response.Write("<script>alert('Not updated successfully')</script>");
binddata();
}
}
For Changing the mode
protected void dtvUserdetails_ModeChanging(object sender, DetailsViewModeEventArgs e)
{
switch (e.NewMode)
{
case DetailsViewMode.Edit:
dtvUserdetails.ChangeMode(DetailsViewMode.Edit);
binddata();
break;
case DetailsViewMode.ReadOnly:
dtvUserdetails.ChangeMode(DetailsViewMode.ReadOnly);
binddata();
break;
case DetailsViewMode.Insert:
dtvUserdetails.ChangeMode(DetailsViewMode.Insert);
break;
}
}
protected void dtvUserdetails_ModeChanged(object sender, EventArgs e)
{
switch (dtvUserdetails.CurrentMode)
{
case DetailsViewMode.Edit:
dtvUserdetails.HeaderText = "Edit Mode";
dtvUserdetails.HeaderStyle.ForeColor = System.Drawing.Color.Red;
dtvUserdetails.HeaderStyle.BackColor = System.Drawing.Color.LightGray;
break;
case DetailsViewMode.Insert:
dtvUserdetails.HeaderText = "Insert Mode";
dtvUserdetails.ForeColor = System.Drawing.Color.Green;
dtvUserdetails.HeaderStyle.BackColor = System.Drawing.Color.Yellow;
break;
case DetailsViewMode.ReadOnly:
dtvUserdetails.HeaderText = "Read-Only Mode";
dtvUserdetails.ForeColor = System.Drawing.Color.Blue;
dtvUserdetails.HeaderStyle.BackColor = System.Drawing.Color.White;
break;
default:
dtvUserdetails.HeaderText = "Error!";
break;
}
}
For Deleting the item
protected void dtvUserdetails_ItemDeleting(object sender, DetailsViewDeleteEventArgs e)
{
try
{
string EmpId = ((Label)dtvUserdetails.FindControl("lblEmpId")).Text;
SqlCommand cmd = new SqlCommand("delete testing2 where Eid='" + int.Parse(EmpId) + "'", conn);
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
Response.Write("<script>alert('Deleted successfully')</script>");
binddata();
}
catch
{
conn.Close();
Response.Write("<script>alert('Not Deleted successfully')</script>");
binddata();
}
}
For Inserting the item
protected void dtvUserdetails_ItemInserting(object sender, DetailsViewInsertEventArgs e)
{
string FirstName = ((TextBox)dtvUserdetails.FindControl("txtFirstName0")).Text;
string LastName = ((TextBox)dtvUserdetails.FindControl("txtLastname0")).Text;
string Platfrom = ((TextBox)dtvUserdetails.FindControl("txtPlatform0")).Text;
string Salary = ((TextBox)dtvUserdetails.FindControl("txtSalary0")).Text;
string Mobile = ((TextBox)dtvUserdetails.FindControl("txtMobile0")).Text;
string Email = ((TextBox)dtvUserdetails.FindControl("txtMailId0")).Text;
try
{
SqlCommand mySqlInsert = new SqlCommand("Insert into Testing2 (FirstName, name, salary, platform, MobileNumber, EmailId) values('"+FirstName+"','"+LastName+"','"+decimal.Parse(Salary)+"','"+Platfrom+"','"+decimal.Parse(Mobile)+"','"+Email+"')", conn);
conn.Open();
mySqlInsert.ExecuteNonQuery();
conn.Close();
Response.Write("<script>alert('Inserted successfully')</script>");
dtvUserdetails.ChangeMode(DetailsViewMode.ReadOnly);
binddata();
}
catch
{
conn.Close();
Response.Write("<script>alert('Not updated successfully')</script>");
binddata();
}
}
Download full Source code
Nice post.I wish you had attached the database as well along with source code.
Nice., I love it, thanks for this info to the great author