How to CRUD in DetailsView in Asp.Net

Description:-

In this Example we will see how to Insert, Read, Update and Delete Record from Database using Details view in dot net. Here I have taken Simple Example for CRUD in Details view.

Design your Details view using Template Filed, Footer Controls, Columns and Headers and give some Style for Design. In My previous Example I had Explain all of thing how to Create Column in Grid view Sam Here We will Create Fields in Details view Item Template, Edit Templates.

In your Webpage Drag Details View and What I said like that Design your Details view in your Webpage.

<div>
   <asp:DetailsView ID="DetailsViewExample" AllowPaging="True" AutoGenerateRows="False"
      runat="server" Height="50px" CssClass="DetailsViewClass" CellPadding="3" OnPageIndexChanging="DetailsViewExample_PageIndexChanging"
      OnItemCommand="DetailsViewExample_ItemCommand1" OnItemUpdating="DetailsViewExample_ItemUpdating"
      OnModeChanging="DetailsViewExample_ModeChanging" OnItemInserting="DetailsViewExample_ItemInserting"
      Width="270px" OnItemDeleting="DetailsViewExample_ItemDeleting" 
      BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" 
      GridLines="Horizontal">
      <Fields>
         <asp:TemplateField HeaderText="First Name">
            <ItemTemplate>
               <asp:Label ID="lblID" Text='<%# Eval("EmpID") %>' Visible="false" runat="server"></asp:Label>
               <asp:Label ID="lblFirstName" Text='<%# Eval("FirstName") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
               <asp:Label ID="lblIDEdit" Text='<%# Eval("EmpID") %>' Visible="false" runat="server"></asp:Label>
               <asp:TextBox ID="txtFirstname" Text='<%# Eval("FirstName") %>' runat="server" CssClass="textbox"></asp:TextBox>
            </EditItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Last Name">
            <ItemTemplate>
               <asp:Label ID="lblLastName" Text='<%# Eval("LastName") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
               <asp:TextBox ID="txtLastName" Text='<%# Eval("LastName") %>' runat="server" CssClass="textbox"></asp:TextBox>
            </EditItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Salary">
            <ItemTemplate>
               <asp:Label ID="lbldob" Text='<%# Eval("Salary") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
               <asp:TextBox ID="txtCity" Text='<%# Eval("Salary") %>' runat="server" CssClass="textbox"></asp:TextBox>
            </EditItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Address">
            <ItemTemplate>
               <asp:Label ID="lblAddress" Text='<%# Eval("Address") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
               <asp:TextBox ID="txtAddress" Text='<%# Eval("Address") %>' runat="server" CssClass="textbox"></asp:TextBox>
            </EditItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Location">
            <ItemTemplate>
               <asp:Label ID="lblLocation" Text='<%# Eval("Location") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
               <asp:TextBox ID="txtLocation" Text='<%# Eval("Location") %>' runat="server" CssClass="textbox"></asp:TextBox>
            </EditItemTemplate>
         </asp:TemplateField>
         <asp:CommandField Visible="true" ShowInsertButton="true" ShowCancelButton="true"
            ShowDeleteButton="true" ShowEditButton="true" />
      </Fields>
      <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
      <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
      <PagerStyle CssClass="Foter" BackColor="#E7E7FF" ForeColor="#4A3C8C" 
         HorizontalAlign="Right" />
      <AlternatingRowStyle BackColor="#F7F7F7" />
      <EditRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
      <FieldHeaderStyle Width="80px" CssClass="Header" />
      <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
   </asp:DetailsView>
</div>

Now In your Details view generate item Inserting, deleting, Updating event so we can CRUD in Details view. For Paging we will use PageIndexChanging in Details view. So we will maintain record and read at a time one record in details view.

Now go to Code behind and code for inserting, Updating, Deleting Item in Details view from database.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        bindDetailtView();
    }
}

private void bindDetailtView()
{
    try
    {
        DataSet Ds = GetDataSet("Select * from Employee");
        DetailsViewExample.DataSource = Ds;
        DetailsViewExample.DataBind();
    }
    catch (Exception ex) { throw ex; }
}

private DataSet GetDataSet(string Query)
{
    DataSet Ds = new DataSet();
    try
    {
        string strCon = @"ConnectionString";
        SqlConnection Con = new SqlConnection(strCon);
        SqlDataAdapter Da = new SqlDataAdapter(Query, Con);
        Da.Fill(Ds);
    }
    catch (Exception) { }
    return Ds;
}

private void ExecuteQuery(string Query)
{
    try
    {
        string strCon = @" ConnectionString ";
        SqlConnection Con = new SqlConnection(strCon);
        Con.Open();
        SqlCommand cmd = new SqlCommand(Query, Con);
        cmd.ExecuteNonQuery();
        Con.Close();
    }
    catch (Exception ex) { throw ex; }
}

protected void DetailsViewExample_PageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
    DetailsViewExample.PageIndex = e.NewPageIndex;
    bindDetailtView();
}

protected void DetailsViewExample_ItemCommand1(object sender, DetailsViewCommandEventArgs e)
{
    switch (e.CommandName.ToString())
    {
        case "Edit":
            DetailsViewExample.ChangeMode(DetailsViewMode.Edit);
            bindDetailtView();
            break;
        case "Cancel":
            DetailsViewExample.ChangeMode(DetailsViewMode.ReadOnly);
            bindDetailtView();
            break;
        case "New":
            DetailsViewExample.ChangeMode(DetailsViewMode.Insert);
            bindDetailtView();
            break;
    }
}

protected void DetailsViewExample_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
    TextBox txtFirstname = (TextBox)DetailsViewExample.FindControl("txtFirstname");
    TextBox txtLastName = (TextBox)DetailsViewExample.FindControl("txtLastName");
    TextBox txtCity = (TextBox)DetailsViewExample.FindControl("txtCity");
    TextBox txtAddress = (TextBox)DetailsViewExample.FindControl("txtAddress");
    TextBox txtPinNo = (TextBox)DetailsViewExample.FindControl("txtLocation");
    Label lblIDEdit = (Label)DetailsViewExample.FindControl("lblIDEdit");

    string Query = "Update Employee Set FirstName='" + txtFirstname.Text + "' ,LastName ='" + txtLastName.Text + "' ,Salary ='" + txtCity.Text + "',Address='" + txtAddress.Text + "',Location='" + txtLocation.Text + "' where EmpID =" + lblIDEdit.Text;
    ExecuteQuery(Query);
    DetailsViewExample.ChangeMode(DetailsViewMode.ReadOnly);
    bindDetailtView();
}

protected void DetailsViewExample_ItemInserting(object sender, DetailsViewInsertEventArgs e)
{
    TextBox txtFirstname = (TextBox)DetailsViewExample.FindControl("txtFirstname");
    TextBox txtLastName = (TextBox)DetailsViewExample.FindControl("txtLastName");
    TextBox txtCity = (TextBox)DetailsViewExample.FindControl("txtCity");
    TextBox txtAddress = (TextBox)DetailsViewExample.FindControl("txtAddress");
    TextBox txtPinNo = (TextBox)DetailsViewExample.FindControl("txtPinNo");
    string Query = "Insert into Employee ([FirstName] ,[LastName] ,[Salary] ,[Address] ,[Location]) values ('" + txtFirstname.Text + "' ,'" + txtLastName.Text + "' ,'" + txtCity.Text + "','" + txtAddress.Text + "','" + txtLocation.Text + "')";
    ExecuteQuery(Query);
    DetailsViewExample.ChangeMode(DetailsViewMode.ReadOnly);
    bindDetailtView();
}

protected void DetailsViewExample_ItemDeleting(object sender, DetailsViewDeleteEventArgs e)
{
    Label lblID = (Label)DetailsViewExample.FindControl("lblID");
    string Query = "Delete from Employee where EmpID =" + lblID.Text;
    ExecuteQuery(Query);
    bindDetailtView();
}

Now run your Webpage and Insert Item from Details view. Edit items and Update with Different name or else delete item.

Author : Umesh Patel

Related Posts