ASP.NET UpdatePanel and Gridview

Using update panel parts of webpage can be updated without refreshing the entire page. In the below example we will check how to edit contents in a gridview without refreshing the entire page.

1)  Create an ASP.NET web application

2)  Add default.aspx page

3)  Add scriptmanager

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

4)Add updatepanel

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    </asp:UpdatePanel>

5)Add datagrid inside the update panel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

       <ContentTemplate>

            <asp:GridView runat="server" ID="grvEmp" AutoGenerateColumns="false"

                onrowcancelingedit="grvEmp_RowCancelingEdit" onrowediting="grvEmp_RowEditing"

                onrowupdating="grvEmp_RowUpdating">

                <Columns>

                    <asp:TemplateField>

                        <HeaderTemplate>

                            Employee Name

                        </HeaderTemplate>

                        <ItemTemplate>

                            <%# Eval("employee_name")%>

                        </ItemTemplate>

                        <EditItemTemplate>

                            <asp:TextBox runat="server" Text='<%# Eval("employee_name")%>' ID="txtName" ></asp:TextBox>

                        </EditItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Action">

                        <ItemTemplate>

                            <asp:Button ID="btnEdit" Text="Edit" runat="server" CommandName="Edit" /><br />

                        </ItemTemplate>

                        <EditItemTemplate>

                            <asp:Button ID="btnUpdate" Text="Update" runat="server" CommandName="Update" /><br />

                            <asp:Button ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />

                        </EditItemTemplate>

                    </asp:TemplateField>

                </Columns>

            </asp:GridView>

       </ContentTemplate>

    </asp:UpdatePanel>

6)Add a text box outside the update panel

<asp:TextBox runat="server" ID="txtTime"></asp:TextBox>

              

7)Create a function to return dataset to bind to datagrind

public DataSet GetEmpData()

        {

            DataSet ds = new DataSet();

            DataTable dt = new DataTable();

            dt.Columns.Add("employee_name");

            DataRow dr = dt.NewRow();

            dr[0] = "Employee 1";

            dt.Rows.Add(dr);

            ds.Tables.Add(dt);

            return ds;

        }

8) On page load set time and bind the gridview

  protected void Page_Load(object sender, EventArgs e)

        {

            txtTime.Text = DateTime.Now.ToString();

            if (!IsPostBack)

            {

                grvEmp.DataSource = GetEmpData();

                grvEmp.DataBind();

            }

        }

9)Handle the row edit,update and cancel events

  protected void grvEmp_RowEditing(object sender, GridViewEditEventArgs e)

        {

            grvEmp.EditIndex = e.NewEditIndex;

            grvEmp.DataSource = GetEmpData();

            grvEmp.DataBind();

        }

        protected void grvEmp_RowUpdating(object sender, GridViewUpdateEventArgs e)

        {

        }

   

        protected void grvEmp_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

        {

            grvEmp.EditIndex = -1;

            grvEmp.DataSource = GetEmpData();

            grvEmp.DataBind();

        }

And we are done. Run the application and click on edit button on the gridview. You can see that only the grid is refreshed, time on the text box on main page does not change.