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>
                        &nbsp;<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>
                        &nbsp;<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>
Here i had four feilds EmpId, FirstName, LastName, Platform, Salary, MobileNumber and finally email Id.

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();       
    }
Now to change the modes to ReadOnly, Edit and Insert we have an event called "dtvUserdetails_ModeChanging"  we can also handle "dtvUserdetails_ModeChanged" after the mode was changed.
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

Share it

3 comments:

Post a Comment