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>