2

How to load a page in iframe which is in a modal popup extender on button click event?

Hi i have a grid with a link button in a page(say for example: "page1"), When i click the link button, i need to load a page(say for example: "page2") by passing a querystring inside a iframe which i have set in a modal popup extender control. I can acheive this by adding this piece of code in markup

  <asp:TemplateField HeaderText="PO NUMBER" HeaderStyle-HorizontalAlign="Center" 
      ItemStyle-HorizontalAlign="Center" ItemStyle-Width="100px">
    <ItemTemplate>
      <asp:HiddenField ID="hfPOAID" runat="server" 
      Value='<%# Bind("POAtID") %>'></asp:HiddenField>
      <asp:LinkButton ID="lbtnPO" runat="server" ForeColor="Blue" 
      Text='<%# Bind("PONUM") %>' CommandName="POview" CommandArgument=
      '<%# ((GridViewRow) Container).RowIndex %>' AutoPostBack="True">
      </asp:LinkButton>
<cc1:ModalPopupExtender ID="mpeStatus" OnOkScript="__doPostBack('Ok','')"  
runat="server" TargetControlID="lbtnPO" PopupControlID="pnlPerson" DropShadow="true" 
CancelControlID="ibCancel1" >  </cc1:modalpopupextender>              
<asp:Panel ID="pnlPerson" runat="server" Style="display: none" 
 Width="900px" Height="550px" CssClass="modalPopup">
   <div style="float: right;">
      <asp:ImageButton ID="ibCancel1" runat="server" ImageUrl="~/Images/del.png" 
      Width="20px" Height="20px" /> 
   </div>
   <div>
    <table>
      <tr>
        <td align="center" style="font-size: 14px;">
          <b>View Purchase Order</b>
        </td>
     </tr>
     <tr>
        <td>
          <iframe name="FRAME1" width="800" height="500" frameborder="0" 
              src='<%#String.Format("ShowPO.aspx?Poid={0}", Eval("POAtID"))%>'>
          </iframe>
        </td>
       </tr>
     </table>
   </div>
  </asp:Panel>
  </ItemTemplate>
  <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
  <ItemStyle HorizontalAlign="Center"></ItemStyle>
  </asp:TemplateField>

And in the Code Behind page----------------

   protected void gvPOCloseRpt_OnRowCommand(object sender, GridViewCommandEventArgs e)
   {
   try
   {
     if (e.CommandName == "POview")
     {
          int index = Int32.Parse(e.CommandArgument.ToString());
          HiddenField hfPOAID = (HiddenField)gvPOCloseRpt.Rows[index].FindControl
          ("hfPOAID");
          Session["POID"] = hfPOAID.Value;
          string Script = "window.open('http://mak-erp/deverp/Purchase/poprnt.aspx')";
          System.Web.UI.ScriptManager.RegisterClientScriptBlock(this, 
          this.GetType(), "test", Script, true);
     }
   }
   catch (Exception ex)
   {
     Response.Write(ex);
   }
}

But, if there is bulk data's in grid, it take too long time to load a page, So, I need to load the page only on a click event of link button in grid?......

Can anyone help me out to do this.....

Thanks in advance...........

Dineshkumar R,

The Evil Greebo
  • 7,013
  • 3
  • 28
  • 55
Dineshkumar R
  • 55
  • 4
  • 8

2 Answers2

1

You can try ThickBox to pop up the page2.

And you can use url query string to pass the POID parameter.

see more information about ThickBox : https://web.archive.org/web/20120502133946/https://jquery.com/demo/thickbox/

Or you can use ajax to achieve this!

jmoreno
  • 12,752
  • 4
  • 60
  • 91
Steel.Liao
  • 196
  • 5
  • Thanks for kind attention on my query........Am not such familiar in using thickbox, if you are suggesting me to use ajax, in which manner i can able to do this?.... – Dineshkumar R Jun 21 '11 at 04:03
  • Firstly,you should include the jquery file,thickbox.css and thickbox-compressed.js in page1. Then you can use code like: `Open iFrame Modal` to pop up page2. – Steel.Liao Jun 21 '11 at 14:38
0

Try using jQuery modal popup referring a div which in turn contains an iframe to display the page. Like :

$('#btnOpenPopup').click(function (e) {
    $('#frmLoadPage').attr('src','your_page_url');
    $('#divContainer').modal();
    return false;
});

<div id="divContainer" class="form-control">
  <iframe id="frmLoadPage" ></iframe>
</div>
Satish Kumar
  • 3
  • 2
Sachin Kumar
  • 974
  • 2
  • 13
  • 23