Entity Framework with POCO Class To Perform CRUD Operation Using Modal Popup Extender

1  Open Visual Studio
2  Create a new Empty Web Site
Add new item>WebForm
3 Create A new project
Add Class Library>name it (PocoClassLibrary)
                                         >addnew item> ADO.NET Entity Data Model

The whole solution look like in the below image.

To add ADO/.NET Entity Data Model: 

• Click Add > New Item > ADO.NET Entity Data Model 

• Click ‘Add’ 
• Choose ‘Generate From Database’ and click ‘Next’

• Choose a connection to the database 

• Click Next 
• Choose the tables and set the Model Namespace I am using Deafault Namspace as DemoEntites2 
• Choose the dsh_poco_regi Tables  
• Click 'Finish' 

After Clicked on Finish button it Will Look like in the below image.

The Class1.cs class in the PocoClassLibrary of the project, which contains methods and properties.

Clss1.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;
namespace PocoClassLibrary
{
    public class Class1
    {
        public int userid
        {
            get;
            set;
        }
        public string fname
        {
            get;
            set;
        }
        public string lname
        {
            get;
            set;
        }
        public string age
        {
            get;
            set;
        }
        public string gender
        {
            get;
            set;
        }
        public string contactno
        {
            get;
            set;
        }
        public byte[] image
        {
            get;
            set;
        }
//create a new object and insert it using an entity model
        public string inserdata(Class1 c1)
        {
            //Class1 c1 = new Class1();
            DemoEntities2 dm = new DemoEntities2();
            dsh_poco_regi ds = new dsh_poco_regi();

            ds.fname = c1.fname;
            ds.lname = c1.lname;
            ds.age = c1.age;
            ds.gender = c1.gender;
            ds.contactno = c1.contactno;        
            dm.AddTodsh_poco_regi(ds);
            dm.SaveChanges();
            string msg = "data inserted successfully";
            return msg;
        }
//read data from a database using an entity model
        public IList<dsh_poco_regi> getdata()
        {
            DemoEntities2 dm = new DemoEntities2();
            List<dsh_poco_regi> data = new List<dsh_poco_regi>();
            data = (from d in dm.dsh_poco_regi
                    select d).ToList();
            return data;
        }
        public List<dsh_poco_regi> getdeatil(Class1 c1)
        {
            DemoEntities2 dm = new DemoEntities2();
            List<dsh_poco_regi> data = new List<dsh_poco_regi>();
            data = (from d in dm.dsh_poco_regi
                    where d.userid == c1.userid
                    select d).ToList();
            return data;
        }
//Update a row from a table using an entity model
        public void updatedeatil(Class1 c1)
        {
            DemoEntities2 dm = new DemoEntities2();
            dsh_poco_regi data1 = dm.dsh_poco_regi.FirstOrDefault(c => c.userid == c1.userid);
            data1.fname = c1.fname;
            data1.lname = c1.lname;
            data1.gender = c1.gender;
            data1.contactno = c1.contactno;
            data1.age = c1.age;
            dm.SaveChanges();
        }
//Delete a row from a table using an entity model
        public void deletedeatil(Class1 c1)
        {
            DemoEntities2 dm = new DemoEntities2();
            var deleterec = (from d in dm.dsh_poco_regi
                             where d.userid == c1.userid
                             select d).FirstOrDefault();
            dm.DeleteObject(deleterec);
            dm.SaveChanges();
        }
    }
}

Below you will notice that I have placed an ASP.Net DeataiView Control inside the GridView control along with a Modal Popup Extender that will be used to  Edit,Update,Cancel,View (CRUD) the records in the GridView Control.

Registraionform.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Registraionform.aspx.cs"
    Inherits="Registraionform" Debug="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
            background-color: #FFCC00;
        }
        .style2
        {
            height: 29px;
        }
    </style>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .modalBackground
        {
            background-color: Black;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }
        .modalPopup
        {
            background-color: #FFFFFF;
            width: 300px;
            border: 3px solid #0DA9D0;
        }
        .modalPopup .header
        {
            background-color: #2FBDF1;
            height: 30px;
            color: White;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
        }
        .modalPopup .body
        {
            min-height: 50px;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
        }
        .modalPopup .footer
        {
            padding: 3px;
        }
        .modalPopup .yes, .modalPopup .no
        {
            height: 23px;
            color: White;
            line-height: 23px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }
        .modalPopup .yes
        {
            background-color: #2FBDF1;
            border: 1px solid #0DA9D0;
        }
        .modalPopup .no
        {
            background-color: #9F9F9F;
            border: 1px solid #5C5C5C;
        }
        .style3
        {
            width: 100%;
        }
        .style4
        {
            height: 46px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Registration</asp:LinkButton>
    </div>
    <div>
        <asp:Panel ID="Panel1" runat="server" Visible="False">
            <table class="style1">
                <tr>
        <td colspan="2" style="font-weight: 700">                                                             Registraion
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <b>FirstName:</b>
                    </td>
                    <td>
                        &nbsp;&nbsp;
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <b>LastName:</b>
                    </td>
                    <td>
                        &nbsp;&nbsp;
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right" class="style2">
                        <b>Age:</b>
                    </td>
                    <td class="style2">
                        &nbsp;&nbsp;
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <b>Gender:</b>
                    </td>
                    <td>
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" RepeatDirection="Horizontal">
                            <asp:ListItem>Female</asp:ListItem>
                            <asp:ListItem>Male</asp:ListItem>
                        </asp:RadioButtonList>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <b>ContactNo:</b>
                    </td>
                    <td style="margin-left: 40px">
                        &nbsp;&nbsp;
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right" class="style4">
                        &nbsp;
                    </td>
                    <td class="style4" style="margin-left: 40px">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="submit" Height="38px"
                            Width="91px" />
                        <br />
                     
                        <asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
                    </td>
                </tr>
            </table>
        </asp:Panel>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
    <center>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
            ForeColor="#333333" GridLines="None" OnRowEditing="GridView1_RowEditing" OnRowCommand="GridView1_RowCommand"
            OnRowDeleting="GridView1_RowDeleting">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:TemplateField HeaderText="USERID">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("userid") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="FNAME">
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Eval("fname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="LNAME">
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("lname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="AGE">
                    <ItemTemplate>
                        <asp:Label ID="Label5" runat="server" Text='<%# Eval("age") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="GENDER">
                    <ItemTemplate>
                        <asp:Label ID="Label6" runat="server" Text='<%# Eval("gender") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="CONTACTNO">
                    <ItemTemplate>
                        <asp:Label ID="Label7" runat="server" Text='<%# Eval("contactno") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="EDIT">
                    <ItemTemplate>
                        <asp:HiddenField ID="hd" runat="server" />
                        <asp:Button ID="Button2" runat="server" CommandArgument='<%# Eval("userid") %>' CommandName="edit"
                            Text="View" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Delete">
                    <ItemTemplate>
                        <asp:Button ID="Button3" runat="server" CommandArgument='<%# Eval("userid") %>' CommandName="delete"
                            Text="Delete" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField></asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
    </center>
    <div>
        <asp:HiddenField ID="hf" runat="server" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hf"
            PopupControlID="Panel2" BackgroundCssClass="modalBackground">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel2" runat="server" BackColor="#FFCC00">
            <div align="right">
                <asp:Button ID="Button3" runat="server" Text="X" /></div>
            <asp:FormView ID="FormView1" runat="server" OnItemDeleting="FormView1_ItemDeleting"
                OnItemUpdating="FormView1_ItemUpdating" OnModeChanging="FormView1_ModeChanging"
                OnPageIndexChanging="FormView1_PageIndexChanging">
                <PagerSettings PageButtonCount="3" />
                <EditItemTemplate>
                    <table class="style3">
                        <tr>
                            <td colspan="2">
                                <asp:Label ID="Label8" runat="server" Text='<%# Eval("userid") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Fname:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox5" runat="server" Text='<%# Eval("fname") %>'></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                lname:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox6" runat="server" Text='<%# Eval("lname") %>'></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Age:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox7" runat="server" Text='<%# Eval("age") %>'></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Gender:
                            </td>
                            <td>
                                <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal"
                                    SelectedValue='<%# Eval("gender") %>'>
                                    <asp:ListItem Value="Male" Text="Male"></asp:ListItem>
                                    <asp:ListItem Value="Female" Text="Female"></asp:ListItem>
                                </asp:RadioButtonList>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ContactNo:
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox8" runat="server" Text='<%# Eval("contactno") %>'></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:LinkButton ID="LinkButton4" runat="server" CommandName="update">Update</asp:LinkButton>
                                &nbsp;
                                <asp:LinkButton ID="LinkButton5" runat="server" CommandName="cancel">Cancel</asp:LinkButton>
                            </td>
                        </tr>
                    </table>
                </EditItemTemplate>
                <ItemTemplate>
                    <table class="style3">
                        <tr>
                            <td colspan="2">
                                <asp:Label ID="Label9" runat="server" Text='<%# Eval("userid") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Fname:
                            </td>
                            <td>
                                <asp:Label ID="Label10" runat="server" Text='<%# Eval("fname") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Lname:
                            </td>
                            <td>
                                <asp:Label ID="Label11" runat="server" Text='<%# Eval("lname") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Age:
                            </td>
                            <td>
                                <asp:Label ID="Label12" runat="server" Text='<%# Eval("age") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Gneder:
                            </td>
                            <td>
                                <asp:Label ID="Label13" runat="server" Text='<%# Eval("gender") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                ContactNo:
                            </td>
                            <td>
                                <asp:Label ID="Label14" runat="server" Text='<%# Eval("contactno") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:LinkButton ID="LinkButton2" runat="server" CommandName="edit" OnClick="LinkButton2_Click">Edit</asp:LinkButton>
                            </td>
                            <td>
                                <asp:LinkButton ID="LinkButton3" runat="server" CommandName="delete">Delete</asp:LinkButton>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:FormView>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

The code scrap provided below is used to perform CRUD operation with GridView and DetailView Control  using ADO.NET Entity Data Model.

Registraionform.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PocoClassLibrary;
using AjaxControlToolkit;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
public partial class Registraionform : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
     
    }
    protected void Button1_Click1(object sender, EventArgs e)
    {
        if (TextBox1.Text == "" || TextBox2.Text == "" || TextBox3.Text == "" || TextBox4.Text == "" || RadioButtonList1.SelectedValue == "")
        {
            Label1.Text = "Please Fill Detail Properly!!";
            Label1.ForeColor = System.Drawing.Color.Red;
            Label1.Visible = true;
        }
        else
        {
            PocoClassLibrary.Class1 ac = new PocoClassLibrary.Class1();
            Class1 c1 = new Class1();
            c1.fname = TextBox1.Text;
            c1.lname = TextBox2.Text;
            c1.age = TextBox3.Text;
            c1.gender = RadioButtonList1.SelectedValue;
            c1.contactno = TextBox4.Text;

            string msg = ac.inserdata(c1);
            Label1.Text = msg;
            Label1.ForeColor = System.Drawing.Color.Blue;
            Label1.Visible = true;
            clearcontrol();
        }
        PocoClassLibrary.Class1 ac1 = new PocoClassLibrary.Class1();
        Class1 c2 = new Class1();
        ac1.getdata();
        bind();
    }
    public void bind()
    {
        PocoClassLibrary.Class1 ac = new PocoClassLibrary.Class1();
        var data = ac.getdata();
        GridView1.DataSource = data;
        GridView1.DataBind();
    }
    public void formbind()
    {
        PocoClassLibrary.Class1 pc = new PocoClassLibrary.Class1();
        Class1 c1 = new Class1();
        c1.userid = Convert.ToInt32(ViewState["id"].ToString());
        var data = pc.getdeatil(c1).ToList();
        if (data.Count > 0)
        {
            FormView1.DataSource = data;
            FormView1.DataBind();
        }
        else
        {
            Response.Write("Sorry ! No Record Found!");
        }
    }
    public void clearcontrol()
    {
        TextBox1.Text = string.Empty;
        TextBox2.Text = string.Empty;
        TextBox3.Text = string.Empty;
        TextBox4.Text = string.Empty;
    }
    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Panel1.Visible = true;
    }
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        Label lblid = (Label)GridView1.Rows[e.NewEditIndex].FindControl("Label2");
        int id1 = Convert.ToInt32(lblid.Text);
        ViewState["id"] = Convert.ToInt32(id1);
        formbind();
        ModalPopupExtender1.Show();
    }
    protected void FormView1_ItemDeleting(object sender, FormViewDeleteEventArgs e)
    {
        Label lblid = (Label)FormView1.Row.FindControl("Label9");
        int id = Convert.ToInt32(lblid.Text);
        PocoClassLibrary.Class1 pc1 = new PocoClassLibrary.Class1();
        Class1 c = new Class1();
        c.userid = id;
        pc1.deletedeatil(c);
        bind();
    }
    protected void FormView1_ItemUpdating(object sender, FormViewUpdateEventArgs e)
    {
        Label lblid = (Label)FormView1.Row.FindControl("Label8");
        int id = Convert.ToInt32(lblid.Text);
        TextBox txtfname = (TextBox)FormView1.Row.FindControl("TextBox5");
        TextBox txtlname = (TextBox)FormView1.Row.FindControl("TextBox6");
        TextBox txtage = (TextBox)FormView1.Row.FindControl("TextBox7");
        RadioButtonList rd = (RadioButtonList)FormView1.Row.FindControl("RadioButtonList2");
        TextBox txtcontact = (TextBox)FormView1.Row.FindControl("TextBox8");
        PocoClassLibrary.Class1 pc = new PocoClassLibrary.Class1();
        Class1 c1 = new Class1();
        c1.userid = id;
        c1.fname = txtfname.Text;
        c1.lname = txtlname.Text;
        c1.age = txtage.Text;
        c1.gender = rd.SelectedValue;
        c1.contactno = txtcontact.Text;
        pc.updatedeatil(c1);
        bind();
    }
    protected void FormView1_ModeChanging(object sender, FormViewModeEventArgs e)
    {
        if (e.NewMode == FormViewMode.Edit)
        {
            FormView1.ChangeMode(FormViewMode.Edit);
        }
        else
        {
            FormView1.ChangeMode(FormViewMode.ReadOnly);
        }
        formbind();
    }
    protected void FormView1_PageIndexChanging(object sender, FormViewPageEventArgs e)
    {
        FormView1.PageIndex = e.NewPageIndex;
        formbind();
    }
    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        ModalPopupExtender1.Show();
    }
    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "delete")
        {
            int id = Convert.ToInt32(e.CommandArgument.ToString());
            PocoClassLibrary.Class1 pc1 = new PocoClassLibrary.Class1();
            Class1 c = new Class1();
            c.userid = id;
            pc1.deletedeatil(c);
            bind();
        }
    }
    protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
    }
}

Run the application and see the output as below.

Below Figure show that DeatilView Control that inside the gridview control. DetailView control use for view and edit record .

Below Figure shows after updating record.

Download