Repeater Edit,Update,Delete using entity framework in Asp .net

This post will explains how to insert data,Display data in Repeater control, create edit and delete functionality in repeater control using Entity Framework.
 
Repeater is one of my favorite databound controls to display repeated data. It allows you to do lots of design customizations.
You can create Tables,Unorderd lists, Ordered lists, anchor tags, database based menus, Image galleries etc. using repeater control.
 
Step 1: First of all we need database to insert, update, delete and display records in repeater control.Create Database "EmployeeTest"(You can choose your prefered database name).
 

Step 2: Create a table named "Employee" (You can also change table name as per your needs).

CREATE TABLE Employee(
[Id] [int] PRIMARY KEY IDENTITY(1,1),
[Name] [nvarchar](50) NULL,
[Email] [nvarchar](50) NULL,
[Age] [int] NULL,
[Salary] [float] NULL)

Step3: Make HTML form to input data.  

 
Name
Email
Age
Salary
<%--//======= By default we have made update button visible false. So that when ever page loads first time only save and cancel buttons are visible.--%>

Step 4: Now we will do coding to save our records into the database.

 

 //=-=-=-=-= Save Button
    protected void btnSave_Click(object sender, EventArgs e)
    {
        using (EmployeeTestEntities context = new EmployeeTestEntities())
        {
            //==== Creating object of Employee table and pass values for insertion.
            Employee obj = new Employee();
            obj.Name = txtName.Text;
            obj.Email = txtEmail.Text;
            obj.Salary = Convert.ToDouble(txtSalary.Text);
            obj.Age = Convert.ToInt32(txtAge.Text);
            context.AddToEmployees(obj);
            context.SaveChanges();
        }

        //===== Clear text from textboxes
        clearInputControls();

        //===== Bind data to repeater.
        bindEmployeeDetailsToRepeater();

    }

 

Step 5: We have successfully saved our data to database. Now lets create repeater control.

 
            
                    
                        ">
                            <%--//=-=-=-= For more information on this line of code you can refer:--%>

                            
                            <%--//=-=-=-= For more information on this line of code you can refer:--%>
                            
Sno Name Email Age Salary Action
<%#Container.ItemIndex+1%><%#Eval("Name") %> <%#Eval("Email") %> <%#Eval("Age") %> <%#Eval("Salary") %> <%--//==== Here we have used CommandName property to distinguish which button is clicked and we have passed our primary key to CommandArgument property. ====//--%>

Step 6:  Create some required methods which we have used in save functionality i.e. "bindEmployeeDetailsToRepeater()" and "clearInputControls" Methods.bindEmployeeDetailsToRepeater() method is used to bind records into database and "clearInputControls" is used to empty textboxes data after save operation.

 

 //===== Method to bind employee records to repeater control.
    void bindEmployeeDetailsToRepeater()
    {
        using (EmployeeTestEntities context = new EmployeeTestEntities())
        {
            repEmployeeDetails.DataSource = from r in context.Employees
                                            select r;
            repEmployeeDetails.DataBind();
        }
    }

 

 //===== Clear Inut control's data.
    void clearInputControls()
    {
        txtAge.Text = string.Empty;
        txtEmail.Text = string.Empty;
        txtName.Text = string.Empty;
        txtSalary.Text = string.Empty;
    }

 

Step7: Call "bindEmployeeDetailsToRepeater()" in the pageload so that data get binds to repeater when page loads first time.

 

 if (!Page.IsPostBack)
        {
            //===== To bind employee's records from database.
            bindEmployeeDetailsToRepeater();
        }

 

Step 8: Now we will create edit and delte functionality so that whenever edit button is clicked corresponding data will inserted into related textboxes.For this we will use repeater's "OnItemCommand" Event.

 

 //========= Edit,Delete buttons inside repeater.
    protected void repEmployeeDetails_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        //====== Here we use switch state to distinguish which link button is clicked based 
        //====== on command name supplied to the link button.
        switch (e.CommandName)
        {
            //==== This case will fire when link button placed
            //==== inside repeater having command name "Delete" is clicked.

            case ("Delete"):
                //==== Getting id of the selelected record(We have passed on link button's command argument property).
                int id = Convert.ToInt32(e.CommandArgument);

                //==== Call delete method and pass id as argument.
                deleteEmployee(id);

                break;

            //==== This case will fire when link button placed
            //==== inside repeater having command name "Edit" is clicked.
            case ("Edit"):

                //==== Getting id of the selelected record(We have passed on link button's command argument property).
                id = Convert.ToInt32(e.CommandArgument);

                //==== Call delete method and pass id as argument.
                bindEmployeeDetailToEdit(id);

                break;

        }
    }

 

Step 9: Create update functionality.

 

//========= Update Button
    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        using (EmployeeTestEntities context = new EmployeeTestEntities())
        {
            //====== Remember we have stored primary key in hiddenfield during 
            //====== binding values into textboxes method:(bindEmployeeDetailToEdit).
            //====== We will use same id to pass id parameter.
            int selectedId = Convert.ToInt32(hfSelectedRecord.Value);

            //==== Creating object of employee table/entity and 
            //==== binding selected row to model as per id supplied.
            Employee obj = context.Employees.FirstOrDefault(r => r.Id == selectedId);
            obj.Name = txtName.Text;
            obj.Email = txtEmail.Text;
            obj.Salary = Convert.ToDouble(txtSalary.Text);
            obj.Age = Convert.ToInt32(txtAge.Text);
            context.SaveChanges();
        }

        //===== Clear text from textboxes
        clearInputControls();

        //===== Bind data to repeater.
        bindEmployeeDetailsToRepeater();

        //===== Show Save button and hide update button.
        btnSave.Visible = true;
        btnUpdate.Visible = false;

        //===== Clear Hiddenfield
        hfSelectedRecord.Value = string.Empty;
    }

 

Step 10: Cancel button:

 

//========= Cancel Button
    protected void btnCancel_Click(object sender, EventArgs e)
    {
        //===== Clear text from textboxes
        clearInputControls();

        //===== Show Save button and hide update button.
        btnSave.Visible = true;
        btnUpdate.Visible = false;

        //===== Clear Hiddenfield
        hfSelectedRecord.Value = string.Empty;
    }

 

Step 11: Create CSS to give repeater some good looks.

 
 
We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.
Thanks for the useful article about how to edit, update and delete in Repeater control.
11-Nov-2013 From  Raghu
Thanks Raghu for your valuable feedback. Stay tuned for more.
10-Dec-2013 From  Anuj

Give your valuable comments.

Name
Email
Comment
5 + 3 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2017 CodingFusion