How
to use Details view control in ASP.NET?
Description
Mostly we are used details view control to view all details of single record in a one page. Details view control is same like other data control, it is also used to display record in the web page. In this control records are displayed with details in vertical format. Each record display in single page mean if you assign 10 records as DataSoure then 10 Details view paging is occur.
In this article I have explained in detail about Updating / Deleting records through Details View.
Details View Example
Consider below example how to bind data in the details view and also how to manipulate Data Edit, Update, Insert and delete operations.
Initially i have load data from database to details view, each records are displayed in details view each page. After User click Update button to Edit and update selected record details. If click Add New Button then able to add new record in the database.
Client side
I have placed here details view control
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Details View Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>Details View Example</b><br />
<br />
<asp:Label ID="lblmsg" runat="server"></asp:Label><br /><br />
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="400px" AutoGenerateRows="False"
CellPadding="4" ForeColor="#333333" GridLines="None" OnItemUpdating="DetailsView1_ItemUpdating"
OnModeChanging="DetailsView1_ModeChanging"
OnItemCommand="DetailsView1_ItemCommand" AllowPaging="true"
oniteminserting="DetailsView1_ItemInserting"
onitemdeleting="DetailsView1_ItemDeleting"
onpageindexchanging="DetailsView1_PageIndexChanging" >
<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 No">
<ItemTemplate>
<asp:Label ID="lbleno" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.eno") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteno" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.eno") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Emp Name">
<ItemTemplate>
<asp:Label ID="lblempname" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.empname") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtempname" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.empname") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Salary">
<ItemTemplate>
<asp:Label ID="lblsal" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.sal") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtsal" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.sal") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True"></asp:CommandField>
<asp:CommandField ShowInsertButton="True"></asp:CommandField>
<asp:CommandField ShowEditButton="True" CancelText="Cancel" EditText="Edit" UpdateText="Update" />
</Fields>
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:DetailsView>
</div>
</form>
</body>
</html>
Code Behind
In the code behind i have manipulate insert, update, delete operation code and query details.
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
SqlCommand sqlcmd = new SqlCommand();
SqlDataAdapter da = new SqlDataAdapter();
DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LoadDet();
}
}
void LoadDet()
{
sqlcon.Open();
sqlcmd = new SqlCommand("select * from emp", sqlcon);
da = new SqlDataAdapter(sqlcmd);
da.Fill(dt);
sqlcon.Close();
DetailsView1.DataSource = dt;
DetailsView1.DataBind();
}
//Below code is used to display page wise records
protected void DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
LoadDet();
}
protected void DetailsView1_ModeChanging(object sender, DetailsViewModeEventArgs e)
{
if (e.CancelingEdit == true)
{
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
LoadDet();
}
}
//Below code is used to update record details
protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
string eno = ((TextBox)DetailsView1.FindControl("txteno")).Text.ToString();
string empname = ((TextBox)DetailsView1.FindControl("txtempname")).Text.ToString();
string sal = ((TextBox)DetailsView1.FindControl("txtsal")).Text.ToString();
sqlcon.Open();
sqlcmd = new SqlCommand("UPDATE emp SET empname='" + empname + "', sal='" + sal + "' WHERE eno='" + eno + "' ", sqlcon);
sqlcmd.ExecuteNonQuery();
sqlcon.Close();
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
LoadDet();
}
protected void DetailsView1_ItemCommand(object sender, DetailsViewCommandEventArgs e)
{
if (e.CommandName == "New")
{
DetailsView1.ChangeMode(DetailsViewMode.Insert);
LoadDet();
}
if (e.CommandName == "Edit")
{
DetailsView1.ChangeMode(DetailsViewMode.Edit);
LoadDet();
}
}
//Below code is used to insert record into database table
protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e)
{
sqlcon.Open();
string eno = ((TextBox)DetailsView1.FindControl("txteno")).Text.ToString();
string empname = ((TextBox)DetailsView1.FindControl("txtempname")).Text.ToString();
string sal = ((TextBox)DetailsView1.FindControl("txtsal")).Text.ToString();
SqlCommand cmd = new SqlCommand("select eno from emp where eno = '" + eno + "'", sqlcon);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblmsg.Text = "Employee No already exists";
}
else
{
dr.Close();
sqlcmd = new SqlCommand("insert into emp values('" + eno + "', '" + empname + "', '" + sal + "')", sqlcon);
sqlcmd.ExecuteNonQuery();
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
}
sqlcon.Close();
LoadDet();
}
//Below code is used to delete record from database
protected void DetailsView1_ItemDeleting(object sender, DetailsViewDeleteEventArgs e)
{
string eno = ((Label)DetailsView1.Rows[0].FindControl("lbleno")).Text;
sqlcon.Open();
sqlcmd = new SqlCommand("delete from emp where eno = '" + eno + "'", sqlcon);
sqlcmd.ExecuteNonQuery();
sqlcon.Close();
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
LoadDet();
}
}
Output
Insert like below After Click new button in footer
Update Values like this after click Edit button in the details view footer
Display Data Like this in Details View
Source code:
Client Side: ASP.NETCode Behind: C#
Conclusion
I hope this article is help you to know all Insert, update and delete through Details view operations.
Attachments
Dear friend
ReplyDeleteI have a doubt.I want to get employer image with Full Data in Detailsview By clicking a Dropdown list.
(I.e How to change image on selection of dropdownlist item) .i also want to know, how to display employee image with name by selecting any name in dropdown list.