ASP.NET AJAX enabled page loses its AJAX behavior when an IFrame is placed inside of an Up

Hello everyone,

I have a strange issue on one of my web pages in our ASP.NET AJAX-enabled Website. We have an ASP.NET 2.0 Website and we wanted to ajaxify it just by making good use of the UpdatePanel control on all the pages of website to remove the postbacks and make the pages more responsive to the user. One of the pages has a couple of IFrames on it and when we tried to place all the content on the page inside of an UpdatePanel, we have noticed that the browser itself crashes upon the selectedIndexChange event of a DropDownList on the same page. The IFrames are hidden by default and are made visible only upon the click event of a button.

When I wanted to find out the reason behind all this by replicating or simulating the same aforementioned behavior on a sample page, I have noiticed this *** behavior that if an IFrame is placed inside of an UpdatePanel along with other html elements, the page loses its AJAX behavior and makes a postback for the click event of a button placed inside of the same UpadetPanel as the IFrame.

Here's the source code for that...

<form id="frmAJAX7" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="TRUE">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Label ID="lblName" runat="server">Enter Your Name: </asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnClick" runat="server" OnClick="btnClick_Click" Text="Click me!" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lbl" runat="server"></asp:Label>
</td>
</tr>
</table>
<iframe id="iframe1" frameborder="1" src="http://pics.10026.com/?src=http://www.msdn.microsoft.com"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form
If the IFrame named iframe1 is placed outside of the UpdatePanel, the page works fine and exhibits the normal AJAX behavior. Is there any kind any of conflict between the ASP.NET AJAX extensions and the IFrame element?

Please let me know if any one out there has any idea about this since I am not a seasoned developer yet in ASP.NET AJAX. And any help regarding this would be appreciated as this is quite an urgent requirement.

Thanks in advance...

Well...it seems to be working fine for me.
I belive you are getting confused coz the page inside the IFrame which happens to behttp://www.msdn.microsoft.com in the example above is reloading itself on button click. The purpose of Ajax is (or to be more specific, you can say UpdatePanel in your case) instead of causing entire page to postback it would just refresh the part of the page which is inside update panel. Notice the Label and and text box in which you enter your name they dont get reloaded when they are inside the update panelon button click. Try putting everything out of updatepanel and then check the behaviour of TextBox and Label. I am sure you would notice the difference.

I also tried keeping a drop down list control inside and outside the update panel, still working fine for me.

Well, instead of keping the Src of IFramehttp://www.msdn.microsoft.com try to keep the Src of IFrame some other webpage in your project(preferebly with one or two textbox and buttons) and if you still dont notice the difference then also try to keep the controls of source page under updatepanel:)

Hope this helps:)

Cheers
Ritesh

Thanks for the reply, Ritesh.

I have mentioned the src attribute to a different page, part of the same project. I replaced the value of the src attribute to http://msdn.microsoft.com just for the posting purposes. The source page has UpdatePanel with a few other controls wrapped inside of it. I still get the same issue.

Here's the source code for the source page of the IFrame...

<form id="frmAJAX2" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click me!" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form
I don't really want the UpdatPanel to refresh or reload the source page of the IFrame and even if it does, the request should be a asynchronous postback, which is not the one happening in my case. I see a clear postback in the example that I have mentioned.

Hope I was clear enough...

Hey....i thought you were seeing main page getting refreshed. Now...If I understand you correctly then you dont want the SOURCE page inside the IFrame to get refreshed... Well as I said in my last post Ajax would not postback the entire page but the controls inside the update panel would get refreshed to fetch the data from the server.

If you dont want to see any refreshing in the source page then you need to create page which would work something like this onehttp://www.jamesdam.com/ajax_login/login.html. Hit F5 and try to refresh this page and see the difference. Also keep this page under the source of IFrame. You can refer to the sample code provided at the botton of that page.

Cheers
Ritesh