Calling an External Page into ModelPopup from GridView

In this post the ModalPopup extender is used to pop open an external ASPX page inside GridView, Here are the steps:

1: Create new ASPX page and add The following controls // call this page MyPage.aspx a:- GridView to handle data // call is GridView1 b:- Panel to open the external page inside it // call it pnlEdit c:- LinkButton in GridView to Open The ModelPoup // call it lnkEdit d:- ModalPopupExtender to popup the Panel // call it MPEEditPopup e:- Iframe to open the external page and make it as server control // call it ifrEditPopup f:- HIDDEN LinkButton to virtualy open the popup // call it lnkHidden g:- DONT FORGET to add ScriptManger Look to the following code which contains all controls we need

MyPage.aspx         <asp:ScriptManager ID="ScriptManager1" runat="server">         </asp:ScriptManager>         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"             onrowcommand="GridView1_RowCommand">             <Columns>                 <asp:BoundField DataField="ID" HeaderText="ID" />                 <asp:BoundField DataField="Description" HeaderText="Description" />                 <asp:TemplateField HeaderText="Edit">                     <ItemTemplate>                         <asp:LinkButton ID="lnkEdit" CommandName="OpenEditPopup" runat="server">Edit</asp:LinkButton>                     </ItemTemplate>                 </asp:TemplateField>             </Columns>         </asp:GridView>         <asp:Panel Style="display: none" CssClass="modalPopup" ID="pnlDetail" runat="server">             <table cellpadding="0" cellspacing="0">                 <tr>                     <td align="right">                         <asp:Button Text="Close Popup" ID="btnClose" runat="server"  />                     </td>                 </tr>                 <tr>                     <td>                         <iframe id="ifrEditPopup" runat="server" scrolling="no" width="250px" height="140px"                             frameborder="no"></iframe>                     </td>                 </tr>             </table>         </asp:Panel>         <ajaxToolkit:ModalPopupExtender ID="MPEEditPopup" runat="server" TargetControlID="lnkHidden"             PopupControlID="pnlDetail" CancelControlID="btnClose" BackgroundCssClass="modalBackground"             DropShadow="false" />         <asp:LinkButton ID="lnkHidden" Style="visibility: hidden" runat="server">Hidden</asp:LinkButton>

The page design will be like this: 2:- In code-behind add the following code to fill grid with data

MyPage.aspx.cs protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.DataSource = LoadDataFromDB(); // This function will retrive data from DB to fill grid; GridView1.DataBind(); } // to reset the src attributes for IFrame control ifrEditPopup.Attributes["src"] = ""; }

3:-Create New Page and call it EditPage.aspx and write anything in this page e.g: This is EDIT Page

4:-In code-behind for The first page add OnRowCommand event to write the code to open the popup, look to the following code

MyPage.aspx.cs protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "OpenEditPopup") { // for IFrame control add new src as new attribute and give it the path for EditPage.aspx // what is t ??? I've added Ticks as Query String just to avoid cookie problem when trying to open the popup again ifrEditPopup.Attributes.Add("src", "EditPage.aspx?t=" + DateTime.Now.Ticks); // call Show method to open the popup MPEEditPopup.Show(); } }

5:- now run the project, the result will be like this: NOTE    we left the src attribute for IFrame control empty, to avoid loading EditPage.aspx more than one time when loading MyPage.aspx, e.g: if the GridView contains 10 rows then the system will create 10 Iframe controls and for each control the system will call the EditPage, therefore the best solution is to leave the src attribute balnk and fill it with the URL in OnRowCommand event when the user Click on Edit link

Thanks, Mohammad Al-Shafei