SlideShare a Scribd company logo
WELCOME TO MY PRESENTATION
Ms. A. Sakila., I Msc Cs
 DetailView is one of the important control, that
is mainly used in master-detail scenario.
 You select the record from master control (as
example GridView) and selected record is
displayed in DetailView control.
 In general GridView control displays more
than one record, but the DetailsView control
displays single record from database table.
 When you execute your web page, DetailsView
control renders an HTML table.The
DetailsView supports both declarative and
programmatic databinding.
 DetailsView control supports the edit, insert,
delete and paging functionality.
 Write down the connection string in web.config
file. Here Database name is Employee and table
name is tblEmps.
<configuration>
<connectionStrings>
<add name="conString" connectionString="Data
Source=(local);Initial Catalog =
Employee;Integrated Security=True" />
</connectionStrings>
</configuration>
Example
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI.WebControls;
using System.Web.UI;
public partial class Default : System.Web.UI.Page
{
SqlConnection conn;
SqlDataAdapter adapter;
DataSet ds;
SqlCommand cmd;
string cs =
ConfigurationManager.ConnectionStrings["con
String"].ConnectionString;
protected void Page_Load(object sender,
EventArgs e)
{
if (!IsPostBack)
{
PopulateDetailView();
}
}
protected void PopulateDetailView()
{
try
{
conn = new SqlConnection(cs);
adapter = new SqlDataAdapter("select *
from tblEmps", conn);
ds = new DataSet();
adapter.Fill(ds);
DetailsView1.DataSource = ds;
DetailsView1.DataBind();
}
 catch (Exception ex)
{
Label1.Text = "ERROR :: " + ex.Message;
}
}
protected void
DetailsView1_PageIndexChanging(object sender,
DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
PopulateDetailView();
}
protected void DetailsView1_ModeChanging(object
sender, DetailsViewModeEventArgs e)
{
DetailsView1.ChangeMode(e.NewMode);
PopulateDetailView();
}
}
Output:
Default mode of DetailView control is ReadOnly.
You can change this default behavior by using
ChangeMode method.
 DetailsView1.ChangeMode(DetailsViewMode.Edit
);
DetailsViewMode is an enaum type that supports
the following options.
Edit
 Insert
 ReadOnly
 In DetailView paging is not enabled by default. For
achieve paging set AllowPaging property as True.
 If user clicks on paging link at bottom of DetailView
control, then PageIndexChanging event fires.
 Another important property of DetailView control is
PagerSettings.
 This property is used to customize the look of the
paging interface.
 For example, you can display first, previous, next, and
last links instead of page numbers in DetailView.
 User can also update the existing database
records. DetailsView control has the properety
AutoGenerateEditButton.
 In order to update a record, set the value of
AutoGenerateEditButton property as true.
 The AutoGenerateEditButton property
automatically generates the Edit link at the bottom
of DetailView control.
 Next provide the value of DataKeyNames
property. The DataKeyNames property holds the
name of the primary key column of database table.
 If you do not assign value in DataKeyNames
property,
 then you will not get the primary key for
performing updating or deleting the record.
 When user click on "Edit" link, update and
cancel link will appears in-place of edit link.

 When user clicks on "Edit" link, ItemUpdating
event fires.
protected void DetailsView1_ItemUpdating(object
sender, DetailsViewUpdateEventArgs e )
{
int ID =
Convert.ToInt32(DetailsView1.Rows[0].Cells[1].Text);
TextBox txtName =
DetailsView1.Rows[1].Cells[1].Controls[0] as TextBox;
TextBox txtGender =
DetailsView1.Rows[2].Cells[1].Controls[0] as TextBox;
TextBox txtSalary =
DetailsView1.Rows[3].Cells[1].Controls[0] as TextBox;
TextBox txtAddress =
DetailsView1.Rows[4].Cells[1].Controls[0] as TextBox;
TextBox txtDepartmentID =
DetailsView1.Rows[5].Cells[1].Controls[0] as TextBox;
string updateQuery = "update tblEmps set name='" +
txtName.Text + "',gender='"
+ txtGender.Text + "',Salary=" + txtSalary.Text +
",Address='" + txtAddress.Text + "',DepID="
+ txtDepartmentID.Text + " where
EmpID=" + ID;
conn = new SqlConnection(cs);
cmd = new SqlCommand(updateQuery,
conn);
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
DetailsView1.ChangeMode(DetailsViewMode
.ReadOnly);
PopulateDetailView();
}
When you perform edit operation, then by default you will not get any type of validation. You cannot restrict the user to enter nul
 You cannot restrict the user to enter null values or
illegal value.
 If you need to provide validation with input data,
then you should use templates with the
DetailsView control.
<Fields>
<asp:TemplateField HeaderText="Title:">
<EditItemTemplate>
<asp:TextBox id="txtName" Text='<%#
Bind("Name") %>' runat="server" />
<asp:RequiredFieldValidator id="reqName"
ControlToValidate=" txtName "
Text="(required)" Display="Dynamic"
Runat="server" />
</EditItemTemplate>
</asp:TemplateField>
</Fields>
 For inserting the new record into the database, first
set the value of AutoGenerateInsertButton
property as True.
 It will automatically generate the "New" link at
the bottom of DetailView control.
 When you click on the new link of DetailView
control, the UI will be changed and blank editable
text will appear.
 Now you have to find these textbox control that is
available inside the DetailView control.
 For inserting the record in database table, write the code in "ItemInserting" event as
given below.
protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs
e)
{
TextBox txtEmpID = DetailsView1.Rows[0].Cells[1].Controls[0] as TextBox;
TextBox txtName = DetailsView1.Rows[1].Cells[1].Controls[0] as TextBox;
TextBox txtGender = DetailsView1.Rows[2].Cells[1].Controls[0] as TextBox;
TextBox txtSalary = DetailsView1.Rows[3].Cells[1].Controls[0] as TextBox;
TextBox txtAddress = DetailsView1.Rows[4].Cells[1].Controls[0] as TextBox;
TextBox txtDepartmentID = DetailsView1.Rows[5].Cells[1].Controls[0] as TextBox;
string insertQuery = "insert into tblEmps
values("+txtEmpID.Text+",'"+txtName.Text+"',
'"+txtGender.Text+"',"+txtSalary.Text+",'"+txtAddress.Text+"',"+txtDepartmentI
D.Text+")";
conn = new SqlConnection(cs);
cmd = new SqlCommand(insertQuery, conn);
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
PopulateDetailView();
}
 For enabling delete functionality with the DetailsView control, set
the value AutoGenerateDeleteButton property as true. It will
automatically generate the "Delete" link at the bottom of
DetailView control.
protected void DetailsView1_ItemDeleting(object sender,
DetailsViewDeleteEventArgs e)
{
int ID =
Convert.ToInt32(DetailsView1.Rows[0].Cells[1].Text);
string deleteQuery = "delete tblEmps where empid = "+ID;
conn = new SqlConnection(cs);
cmd = new SqlCommand(deleteQuery, conn);
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
PopulateDetailView();
}
Detail view in distributed technologies

More Related Content

What's hot (16)

PPTX
Mysql: Tools & Gui
DataminingTools Inc
 
PPS
06 asp.net session08
Mani Chaubey
 
PPT
Chapter12 (1)
Rajalaxmi Pattanaik
 
PDF
Backendless apps
Matteo Bonifazi
 
DOC
exa_cer_g23
Agustin Zazueta
 
PPTX
Data Binding - Android by Harin Trivedi
harintrivedi
 
PPTX
SharePoint Conference 2018 - APIs, APIs everywhere!
Sébastien Levert
 
PPTX
React outbox
Angela Lehru
 
PDF
RubyOnRails-Cheatsheet-BlaineKendall
tutorialsruby
 
PPTX
APIs, APIs Everywhere!
BIWUG
 
PPTX
ASP.NET - Life cycle of asp
priya Nithya
 
ODP
Android App Development - 04 Views and layouts
Diego Grancini
 
PPT
SetFocus SQL Portfolio
geometro17
 
PPTX
Schema webinar
Gary Sherman
 
PDF
CaseStudy-MohammedImranAlam-Xcelsius
Mohammed Imran Alam
 
Mysql: Tools & Gui
DataminingTools Inc
 
06 asp.net session08
Mani Chaubey
 
Chapter12 (1)
Rajalaxmi Pattanaik
 
Backendless apps
Matteo Bonifazi
 
exa_cer_g23
Agustin Zazueta
 
Data Binding - Android by Harin Trivedi
harintrivedi
 
SharePoint Conference 2018 - APIs, APIs everywhere!
Sébastien Levert
 
React outbox
Angela Lehru
 
RubyOnRails-Cheatsheet-BlaineKendall
tutorialsruby
 
APIs, APIs Everywhere!
BIWUG
 
ASP.NET - Life cycle of asp
priya Nithya
 
Android App Development - 04 Views and layouts
Diego Grancini
 
SetFocus SQL Portfolio
geometro17
 
Schema webinar
Gary Sherman
 
CaseStudy-MohammedImranAlam-Xcelsius
Mohammed Imran Alam
 

Similar to Detail view in distributed technologies (20)

PPTX
form view
AbiMurugan2
 
PPTX
Disconnected data
aspnet123
 
DOCX
Grid view control
Paneliya Prince
 
PPTX
Application of Insert and select notes.ppt x
doxafo4842
 
PPTX
Chapter 16
application developer
 
DOCX
Add row in asp.net Gridview on button click using C# and vb.net
Vijay Saklani
 
DOCX
Add row in asp.net Gridview on button click using C# and vb.net
Vijay Saklani
 
DOCX
This is part 1 of 3STEP 1 Modify the clsDataLayer to Use a Two-St.docx
abhi353063
 
PPT
ASP.NET Session 13 14
Sisir Ghosh
 
DOC
Cis407 a ilab 4 web application development devry university
lhkslkdh89009
 
DOCX
Cis 407 i lab 5 of 7
helpido9
 
PPTX
Grid Vew Control VB
sunmitraeducation
 
DOCX
Cis 407 i lab 4 of 7
helpido9
 
PPT
Fixing an annoying GridView problem
Roger Pence
 
PPTX
76.pptx ajx ppt file for univercity of granted
hectortrading693
 
PDF
Entity frame work by Salman Mushtaq -1-
Salman Mushtaq
 
PPTX
37c
Sireesh K
 
PPTX
Stored procedure tunning
Virendra Yaduvanshi
 
form view
AbiMurugan2
 
Disconnected data
aspnet123
 
Grid view control
Paneliya Prince
 
Application of Insert and select notes.ppt x
doxafo4842
 
Add row in asp.net Gridview on button click using C# and vb.net
Vijay Saklani
 
Add row in asp.net Gridview on button click using C# and vb.net
Vijay Saklani
 
This is part 1 of 3STEP 1 Modify the clsDataLayer to Use a Two-St.docx
abhi353063
 
ASP.NET Session 13 14
Sisir Ghosh
 
Cis407 a ilab 4 web application development devry university
lhkslkdh89009
 
Cis 407 i lab 5 of 7
helpido9
 
Grid Vew Control VB
sunmitraeducation
 
Cis 407 i lab 4 of 7
helpido9
 
Fixing an annoying GridView problem
Roger Pence
 
76.pptx ajx ppt file for univercity of granted
hectortrading693
 
Entity frame work by Salman Mushtaq -1-
Salman Mushtaq
 
Stored procedure tunning
Virendra Yaduvanshi
 
Ad

Recently uploaded (16)

PPTX
Presentationexpressions You are student leader and have just come from a stud...
BENSTARBEATZ
 
PPTX
STURGEON BAY WI AG PPT JULY 6 2025.pptx
FamilyWorshipCenterD
 
PDF
The Family Secret (essence of loveliness)
Favour Biodun
 
PPTX
Inspired by VeinSense: Supercharge Your Hackathon with Agentic AI
ShubhamSharma2528
 
PPTX
BARRIERS TO EFFECTIVE COMMUNICATION.pptx
shraddham25
 
PDF
Generalization predition MOOCs - Conference presentation - eMOOCs 2025
pmmorenom01
 
PPTX
presentation on legal and regulatory action
raoharsh4122001
 
PPTX
Food_and_Drink_Bahasa_Inggris_Kelas_5.pptx
debbystevani36
 
PDF
The Impact of Game Live Streaming on In-Game Purchases of Chinese Young Game ...
Shibaura Institute of Technology
 
PPTX
Great-Books. Powerpoint presentation. files
tamayocrisgie
 
PPTX
Pastor Bob Stewart Acts 21 07 09 2025.pptx
FamilyWorshipCenterD
 
PDF
Cloud Computing Service Availability.pdf
chakrirocky1
 
PPTX
AI presentation for everyone in every fields
dodinhkhai1
 
PDF
Leveraging the Power of Jira Dashboard.pdf
siddharthshukla742740
 
PPTX
some leadership theories MBA management.pptx
rkseo19
 
PPTX
2025-07-06 Abraham 06 (shared slides).pptx
Dale Wells
 
Presentationexpressions You are student leader and have just come from a stud...
BENSTARBEATZ
 
STURGEON BAY WI AG PPT JULY 6 2025.pptx
FamilyWorshipCenterD
 
The Family Secret (essence of loveliness)
Favour Biodun
 
Inspired by VeinSense: Supercharge Your Hackathon with Agentic AI
ShubhamSharma2528
 
BARRIERS TO EFFECTIVE COMMUNICATION.pptx
shraddham25
 
Generalization predition MOOCs - Conference presentation - eMOOCs 2025
pmmorenom01
 
presentation on legal and regulatory action
raoharsh4122001
 
Food_and_Drink_Bahasa_Inggris_Kelas_5.pptx
debbystevani36
 
The Impact of Game Live Streaming on In-Game Purchases of Chinese Young Game ...
Shibaura Institute of Technology
 
Great-Books. Powerpoint presentation. files
tamayocrisgie
 
Pastor Bob Stewart Acts 21 07 09 2025.pptx
FamilyWorshipCenterD
 
Cloud Computing Service Availability.pdf
chakrirocky1
 
AI presentation for everyone in every fields
dodinhkhai1
 
Leveraging the Power of Jira Dashboard.pdf
siddharthshukla742740
 
some leadership theories MBA management.pptx
rkseo19
 
2025-07-06 Abraham 06 (shared slides).pptx
Dale Wells
 
Ad

Detail view in distributed technologies

  • 1. WELCOME TO MY PRESENTATION Ms. A. Sakila., I Msc Cs
  • 2.  DetailView is one of the important control, that is mainly used in master-detail scenario.  You select the record from master control (as example GridView) and selected record is displayed in DetailView control.  In general GridView control displays more than one record, but the DetailsView control displays single record from database table.
  • 3.  When you execute your web page, DetailsView control renders an HTML table.The DetailsView supports both declarative and programmatic databinding.  DetailsView control supports the edit, insert, delete and paging functionality.  Write down the connection string in web.config file. Here Database name is Employee and table name is tblEmps.
  • 4. <configuration> <connectionStrings> <add name="conString" connectionString="Data Source=(local);Initial Catalog = Employee;Integrated Security=True" /> </connectionStrings> </configuration> Example using System; using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Web.UI.WebControls; using System.Web.UI; public partial class Default : System.Web.UI.Page
  • 5. { SqlConnection conn; SqlDataAdapter adapter; DataSet ds; SqlCommand cmd; string cs = ConfigurationManager.ConnectionStrings["con String"].ConnectionString; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack)
  • 6. { PopulateDetailView(); } } protected void PopulateDetailView() { try { conn = new SqlConnection(cs); adapter = new SqlDataAdapter("select * from tblEmps", conn); ds = new DataSet(); adapter.Fill(ds); DetailsView1.DataSource = ds; DetailsView1.DataBind(); }
  • 7.  catch (Exception ex) { Label1.Text = "ERROR :: " + ex.Message; } } protected void DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e) { DetailsView1.PageIndex = e.NewPageIndex; PopulateDetailView(); } protected void DetailsView1_ModeChanging(object sender, DetailsViewModeEventArgs e) { DetailsView1.ChangeMode(e.NewMode); PopulateDetailView(); } }
  • 8. Output: Default mode of DetailView control is ReadOnly. You can change this default behavior by using ChangeMode method.  DetailsView1.ChangeMode(DetailsViewMode.Edit ); DetailsViewMode is an enaum type that supports the following options. Edit  Insert  ReadOnly
  • 9.  In DetailView paging is not enabled by default. For achieve paging set AllowPaging property as True.  If user clicks on paging link at bottom of DetailView control, then PageIndexChanging event fires.  Another important property of DetailView control is PagerSettings.  This property is used to customize the look of the paging interface.  For example, you can display first, previous, next, and last links instead of page numbers in DetailView.
  • 10.  User can also update the existing database records. DetailsView control has the properety AutoGenerateEditButton.  In order to update a record, set the value of AutoGenerateEditButton property as true.  The AutoGenerateEditButton property automatically generates the Edit link at the bottom of DetailView control.  Next provide the value of DataKeyNames property. The DataKeyNames property holds the name of the primary key column of database table.
  • 11.  If you do not assign value in DataKeyNames property,  then you will not get the primary key for performing updating or deleting the record.  When user click on "Edit" link, update and cancel link will appears in-place of edit link.   When user clicks on "Edit" link, ItemUpdating event fires.
  • 12. protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e ) { int ID = Convert.ToInt32(DetailsView1.Rows[0].Cells[1].Text); TextBox txtName = DetailsView1.Rows[1].Cells[1].Controls[0] as TextBox; TextBox txtGender = DetailsView1.Rows[2].Cells[1].Controls[0] as TextBox; TextBox txtSalary = DetailsView1.Rows[3].Cells[1].Controls[0] as TextBox; TextBox txtAddress = DetailsView1.Rows[4].Cells[1].Controls[0] as TextBox; TextBox txtDepartmentID = DetailsView1.Rows[5].Cells[1].Controls[0] as TextBox; string updateQuery = "update tblEmps set name='" + txtName.Text + "',gender='" + txtGender.Text + "',Salary=" + txtSalary.Text + ",Address='" + txtAddress.Text + "',DepID="
  • 13. + txtDepartmentID.Text + " where EmpID=" + ID; conn = new SqlConnection(cs); cmd = new SqlCommand(updateQuery, conn); conn.Open(); cmd.ExecuteNonQuery(); conn.Close(); DetailsView1.ChangeMode(DetailsViewMode .ReadOnly); PopulateDetailView(); } When you perform edit operation, then by default you will not get any type of validation. You cannot restrict the user to enter nul
  • 14.  You cannot restrict the user to enter null values or illegal value.  If you need to provide validation with input data, then you should use templates with the DetailsView control. <Fields> <asp:TemplateField HeaderText="Title:"> <EditItemTemplate> <asp:TextBox id="txtName" Text='<%# Bind("Name") %>' runat="server" /> <asp:RequiredFieldValidator id="reqName" ControlToValidate=" txtName " Text="(required)" Display="Dynamic" Runat="server" /> </EditItemTemplate> </asp:TemplateField> </Fields>
  • 15.  For inserting the new record into the database, first set the value of AutoGenerateInsertButton property as True.  It will automatically generate the "New" link at the bottom of DetailView control.  When you click on the new link of DetailView control, the UI will be changed and blank editable text will appear.  Now you have to find these textbox control that is available inside the DetailView control.
  • 16.  For inserting the record in database table, write the code in "ItemInserting" event as given below. protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e) { TextBox txtEmpID = DetailsView1.Rows[0].Cells[1].Controls[0] as TextBox; TextBox txtName = DetailsView1.Rows[1].Cells[1].Controls[0] as TextBox; TextBox txtGender = DetailsView1.Rows[2].Cells[1].Controls[0] as TextBox; TextBox txtSalary = DetailsView1.Rows[3].Cells[1].Controls[0] as TextBox; TextBox txtAddress = DetailsView1.Rows[4].Cells[1].Controls[0] as TextBox; TextBox txtDepartmentID = DetailsView1.Rows[5].Cells[1].Controls[0] as TextBox; string insertQuery = "insert into tblEmps values("+txtEmpID.Text+",'"+txtName.Text+"', '"+txtGender.Text+"',"+txtSalary.Text+",'"+txtAddress.Text+"',"+txtDepartmentI D.Text+")"; conn = new SqlConnection(cs); cmd = new SqlCommand(insertQuery, conn); conn.Open(); cmd.ExecuteNonQuery(); conn.Close(); DetailsView1.ChangeMode(DetailsViewMode.ReadOnly); PopulateDetailView(); }
  • 17.  For enabling delete functionality with the DetailsView control, set the value AutoGenerateDeleteButton property as true. It will automatically generate the "Delete" link at the bottom of DetailView control. protected void DetailsView1_ItemDeleting(object sender, DetailsViewDeleteEventArgs e) { int ID = Convert.ToInt32(DetailsView1.Rows[0].Cells[1].Text); string deleteQuery = "delete tblEmps where empid = "+ID; conn = new SqlConnection(cs); cmd = new SqlCommand(deleteQuery, conn); conn.Open(); cmd.ExecuteNonQuery(); conn.Close(); DetailsView1.ChangeMode(DetailsViewMode.ReadOnly); PopulateDetailView(); }