articles

DetailsView Control in ASP.Net

Pushpendra Singh21173 30-Oct-2010

The DetailsView control displays a single record from a data source, where each data row represents a field in the record.

The DetailsView control gives you the ability to display, edit, insert, or delete a single record at a time from its associated data source.

<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px">
</asp:DetailsView>


DetailsView Control in ASP.Net

Code:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="true" Height="50px" OnItemCommand="DetailsView1_ItemCommand" OnPageIndexChanging="DetailsView1_PageIndexChanging" Width="125px" OnItemUpdating="DetailsView1_ItemUpdating" OnModeChanging="DetailsView1_ModeChanging" EnableModelValidation="True" AutoGenerateRows="False" onitemdeleting="DetailsView1_ItemDeleting">
<Fields>
<asp:TemplateField>
 <ItemTemplate>
 <table border="2">
  <tr>
  <td>
  </td>
  <td>
   ID <asp:Label ID="lbl1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"id") %>'></asp:Label>
   </td>
   <td>
Password <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"pass") %>'></asp:Label>
   </td>                           
<td>
NAME <asp:Label ID="Label2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"name") %>'></asp:Label>
 </td>
 <td>
<asp:LinkButton ID="lnkbtn1" runat="server" CommandName="edit">edit</asp:LinkButton>
  </td>
  <td>
 <asp:LinkButton ID="LinkButton3" runat="server" CommandName="delete">delete</asp:LinkButton>
 </td>
 </tr>
 </table>
 </ItemTemplate>
 
<EditItemTemplate>
                    <asp:TextBox ID="txt1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"id") %>'></asp:TextBox>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"pass") %>'></asp:TextBox>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"name") %>'></asp:TextBox>
                    <asp:LinkButton ID="lnkbtn2" runat="server" CommandName="update">update</asp:LinkButton>
                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="cancel">cancel</asp:LinkButton>
                    <asp:Label ID="lbl2" runat="server"></asp:Label>
 </EditItemTemplate>
 </asp:TemplateField>
 </Fields>
 
<FooterTemplate>
<asp:Label ID="Label3" runat="server" Text="ID"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  <br />
  <asp:Label ID="Label4" runat="server" Text="Pass"></asp:Label>&nbsp;
  <asp:TextBox ID="TextBox4"  runat="server"></asp:TextBox>
            <br />
  <asp:Label ID="Label5" runat="server" Text="Name"></asp:Label>
  <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="ADD">ADD</asp:LinkButton>
 </FooterTemplate>
 </asp:DetailsView>

<%#DataBinder.Eval(Container.DataItem,"name") %>  DataBinder.Eval takes the argument. The first arg is the data object to bind to. The second arg is the string name of the field which will display on the page.

DetailsView Control in ASP.Net

 

Bind Data in DetailsView:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Binddata();// this function is called when the page is loaded.
}
}
 
public void Binddata()
{
DataSet ds = new DataSet();
 
DetailsView1.DataSource = Class1.execute_fill_datalist("insert_reg");
// Here data is fetched from the database through stored procedure(insert_reg).
 
DetailsView1.DataBind();
//Here data is bind to the control and show on the page.
}

In above code execute_fill_datalist is a function created in Class1.cs which is described below.

And insert_reg is a stored procedure made in backend.Which is described below

Allow paging should be true.

protected void DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
      
Binddata();
}


DetailsView Control in ASP.Net

 

EditMode:

DetailsView has ModeChanging event by which you can change normal mode to edit mode .In ths event we can also cancel edit mode.

protected void DetailsView1_ModeChanging(object sender, DetailsViewModeEventArgs e)
{
DetailsView1.ChangeMode(DetailsViewMode.Edit);
Binddata();
if (e.CancelingEdit == true)
{
 Response.Redirect("Default.aspx");
// redirect to the Default.aspx page           
}
}

 

DetailsView Control in ASP.Net

Add, Update and Delete in DetailsView:

ItemCommand event is used for programmatically determining which specific command button is clicked and take appropriate action.

Here this event is used for Adding data

protected void DetailsView1_ItemCommand(object sender, DetailsViewCommandEventArgs e)
{
if (e.CommandName == "ADD")
{
// Here  FindControl will find the TextboxId in which adding will be done.
 
            TextBox l = DetailsView1.FindControl("TextBox3") as TextBox;
            string i = l.Text;
            TextBox a = DetailsView1.FindControl("TextBox4") as TextBox;
            string p = a.Text;
            TextBox b = DetailsView1.FindControl("TextBox5") as TextBox;
            string s = b.Text;
 
            Class1.updat_reg("add_reg", i, p, s);
 
Response.Redirect("Default.aspx");
 
Binddata();
}
}

   

ItemUpdating event is used to update data

 

protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
// Here  FindControl will find the Textbox in which updating will be done.
 
TextBox l = DetailsView1.FindControl("txt1") as TextBox;
string i = l.Text;
TextBox a = DetailsView1.FindControl("TextBox1") as TextBox;
string p = a.Text;
TextBox b = DetailsView1.FindControl("TextBox2") as TextBox;
string s = b.Text;
 
Class1.updat_reg("update_reg", i, p, s);
// update_reg is a function which fetch the data from database through stored procedure.
       
Response.Redirect("Default.aspx");
 
Binddata();
}


ItemDeleting event is used to delete data.

  
protected void DetailsView1_ItemDeleting(object sender, DetailsViewDeleteEventArgs e)
{
Label lb = DetailsView1.FindControl("lbl1") as Label;
string b = lb.Text;
Class1.delete_regform("del_reg", b);
// Here delete_regform is a function. It gets the data which will be deleted from database through stored procedure.
 
Binddata();
}

 

DetailsView Control in ASP.Net

 

DetailsView Control in ASP.Net

 

Add both namespace in every .cs page in which you want to use data and SQL related keyword

using System.Data;
using System.Data.SqlClient;

 

Class1.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Data.SqlClient;
using System.Data;
using System.Web;
 
public class Class1
{    
public static DataSet execute_fill_datalist(string spname)
// this function is used to bind data
{
SqlConnection con = Connection.CreateConnection();
DataSet ds = new DataSet();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = spname;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
con.Open();
 
SqlDataAdapter da = new SqlDataAdapter(spname, con);
da.Fill(ds);
 
return ds;
}
 
public static void updat_reg(string spname,string id,string ps,string nm)
// this function is used to update and add data
{
SqlConnection con=Connection.CreateConnection();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = spname;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@id", SqlDbType.VarChar).Value = id;
cmd.Parameters.Add("@pass", SqlDbType.VarChar).Value = ps;
cmd.Parameters.Add("@name", SqlDbType.VarChar).Value = nm;
 
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
}
 
public static void delete_regform(string spname, string id) 
// this function is used to delete data
{
SqlConnection con = Connection.CreateConnection();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = spname;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@id", SqlDbType.VarChar).Value = id;
      
 
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
}
}

 

In class1.cs  Connection keyword is used

Connection is class in whichCreateConnection function is created.

Connection.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Configuration;
using System.Web;
using System.Data;
using System.Data.SqlClient;
 
public class Connection
{
public static SqlConnection CreateConnection()
{
string connectionstring;
connectionstring = ConfigurationManager.ConnectionStrings["mycon"].ConnectionString;
SqlConnection sqlcon = new SqlConnection(connectionstring);
return sqlcon;
}   
}

 

 

mycon is connection object created in web.config

web.config:

<connectionStrings>
<add name="mycon"connectionString="Data Source=(local);Initial Catalog=my; User Id=sa; Password=sa"providerName="System.Data.SqlClient"/>
</connectionStrings>

Write this connection string above <system.web>

Stored procedure:

This procedure is used to select data

Create procedure insert_reg
 
as
begin
select * from regform
end

This procedure is used to Add  data

Create procedure add_reg
@id varchar(50),
@pass varchar(50),
@name varchar(50)
as
begin
insert into regform
(id,pass,name
)
values
(
@id,
@pass,
@name
)
End

This procedure is used to Delete  data

create procedure del_reg
@id varchar(50)
as
begin
delete  from regform where id=@id
end

This procedure is used to Update  data

create procedure [dbo].[update_reg]
@id varchar(50),
@pass varchar(50),
@name varchar(50)
as
begin
update regform set pass=@pass,name=@name where id=@id
end

Updated 04-Mar-2020

Leave Comment

Comments

Liked By