Edit GridView Row With ModalPopupExtender in ASP.NET Ajax

Introduction

In this article we will learn how to edit a GridView row using ModalPopupExtender. In this article we will use a ModalPopupExtender control of Ajax to display the GridView records. Normally all of you know how to use the ModalPopupExtender of ASP.NET Ajax but we will use this ModalPopupExtender control to edit a GridView row. Using this article we can show a very good presentation of our application. Instead of a GridView auto generated edit and update if we use this model dialogs then it is good. So let's get started with ModalPopupExtender.

Step 1 : Start a new web site and add the reference to AjaxControlToolkit as well as add a new web page and register the TagPrefix refers to AjaxControllToolkit like below.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Step 2 : Second we have to create our GridView with an edit column. In the edit column you can prefer any image button or whatever you wish which can make a PostBack to the server; I'm putting ImageButton as the edit button in GridView with the following markup.

<asp:GridView ID="gdvauthors" runat="server" AutoGenerateColumns="False"

            BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"

            CellPadding="4">

            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />

            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />

            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />

            <RowStyle BackColor="White" ForeColor="#003399" />

            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />

            <SortedAscendingCellStyle BackColor="#EDF6F6" />

            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />

            <SortedDescendingCellStyle BackColor="#D6DFDF" />

            <SortedDescendingHeaderStyle BackColor="#002876" />

<Columns>

<asp:BoundField HeaderText="AuthorId" DataField="AuthorId" />

<asp:BoundField HeaderText="Author Name" DataField="Name" />

<asp:BoundField HeaderText="Points Earned" DataField="Points" />

<asp:TemplateField ShowHeader="false">

<ItemTemplate>

<asp:ImageButton ID="imgbtndetails" runat="server" ImageUrl="~/edit.jpg" Height="30px" Width="30px" OnClick="imgbtn_Click" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

In the above markup I have just created columns as my DataSource for GridView. Just bind your GridView from the database in code behind. I'm populating it with only a datatable containing AuthorId, Name and Points columns. In the above code you can see I have kept one ImageButton and onclick event so create an empty event handler in code behind with imgbtn_click. 

Step 3 : Now we need to put one ModalPopupExtender and target control which we want to show as popup so first keep one ScriptManager and then ModalPopupExtender like given below.

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

        </asp:ScriptManager>

<asp:Button ID="btnShowPopup" runat="server" style="display:none" />

        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"

CancelControlID="btnCancel" BackgroundCssClass="modalBackground">

</cc1:ModalPopupExtender>

In the above markup we kept script manger, ModelPopupExtender and one button. This button is a target control id for ModelPopupExtender because we don't know exactly which ImageButton has been clicked. Now we need to create one panel which we have assigned as popupcontrolid to ModelPopup. So create one panel containing some textboxes to edit our row values like below.

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="269px" Width="400px" style="display:none">

<table width="100%" style="border:Solid 3px #D55500; width:100%; height:100%" cellpadding="0" cellspacing="0">

<tr style="background-color:#D55500">

<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">Update Author</td>

</tr>

<tr style="background-color: #008080; color: #FFFFFF; font-size: large; font-weight: bold">

<td align="right" style="width:45%">

Author Id : </td>

<td>

<asp:Label ID="lblID" runat="server"></asp:Label>

</td>

</tr>

<tr style="background-color: #33CCFF; color: #FF0000; font-size: large; font-weight: bold">

<td align="right">

Author Name : </td>

<td>

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

</td>

</tr>

<tr style="background-color: #FFCCFF; color: #000066; font-size: large; font-weight: bold">

<td align="right">

Points :

</td>

<td>

<asp:TextBox ID="txtpoints" runat="server"/></td>

</tr>

<tr>

<td>

</td>

<td>

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

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

</td>

</tr>

</table>

</asp:Panel>

In the above markup we kept one label to display the Author id and two textboxes to edit Author name and points and having an update and cancel button on that for updating record or canceling the current operation. Create one more event handler in code behind for an update button with btnupdate_Click.

Step 4 : Now it's time to write some code behind. So first bind your GridView in page load event. After the in imgbtn_Click event which is associated with ImageButton in GridView write the following code to edit the row.

ImageButton btndetails = sender as ImageButton;

        GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;

        lblID.Text = gvrow.Cells[0].Text;

        txtname.Text = gvrow.Cells[1].Text;

        txtpoints.Text = gvrow.Cells[2].Text;

        this.ModalPopupExtender1.Show();

In the above code we are editing the row of the GridView by assigning cells text to our textboxes and label and then showing our ModelPopupExtender to display the edited records.

Step 5 : In the update button click event, first we can update the record and then we will hide the ModelPopupExtender.

//Update the record first

this.ModalPopupExtender1.Hide();

Step 6 : Run the application and see the output as below.

Conclusion

In this easy way we can edit and update GridView row using ModalPopupExtender of ASP.NET Ajax.