iFrame loading twice in asp AjaxToolkit TabContainer

Question

am using asp AjaxToolkit in my prjoect as below asp.net C# code.

<asp:UpdatePanel ID="UpdatePanelDemo" runat="server">
        <ContentTemplate>
            <ajax:TabContainer ID="tabMessage" runat="server" ActiveTabIndex="1" AutoPostBack="true"
                OnActiveTabChanged="tabMessage_ActiveTabChanged" CssClass="ajax__tab_blueGrad-theme">
                <ajax:TabPanel ID="TabMCompose" runat="server">
                    <HeaderTemplate>
                        <span style="padding-left: 5px; padding-right: 5px;">Compose </span>
                    </HeaderTemplate>
                    <ContentTemplate>
                    This Text not flickering or not loading twice // ***** 
                        <iframe id="IFrmCompose" runat="server" scrolling="no" frameborder="0" height="400px"
                            width="100%"></iframe>
                    </ContentTemplate>
                </ajax:TabPanel>
                <ajax:TabPanel ID="tabMInbox" runat="server">
                    <HeaderTemplate>
                        <span style="padding-left: 5px; padding-right: 5px;">Inbox (<span id="SpnIn" runat="server"></span>)</span>
                    </HeaderTemplate>
                    <ContentTemplate>
                        <iframe id="IFrmInbox" runat="server" scrolling="no" frameborder="0" height="400px"
                            width="100%"></iframe>
                    </ContentTemplate>
                </ajax:TabPanel>
            </ajax:TabContainer>
        </ContentTemplate>
   </asp:UpdatePanel>

Problem: When I use iFrame inside the ajax TabContainer and when the user moves from 1st Tab to 2nd Tab, it seems that the page load twice and iFrame load twice or it flickers but the text above the iFrame as shown above ('This Text not flickering or not loading twice') is not flickering.

It seems there is some problem with iFrame and Ajax TabContainer.

Please give me suggestion why this happens.

Thanks.

Answer 1

Not 100% sure because there is no codebehind attached, but it looks like a ViewState issue. Page reload maybe the reason of the behavior

if(!IsPostback) BindIt();

Answer 2

Not 100% sure because there is no codebehind attached, but it looks like a ViewState issue. Since you are not setting the IFrame SRC in the repeater template, the page init will first set the IFrame empty and then re-set the URL even if it not changed (causing it to flicker).

Suggestion: Persist the URL in ViewState or other when a tab is changed, and set it in the repeater template to the persisted value. Always set any empty frame SRC to "about:blank" to avoid unnecessary loading and to reliably detect changes.

Just a side note: in a way you are doing the same thing twice - with UpdatePanels/Ajax Controls you do not need IFrames, the contents of your tab should retrieved via an AJAX call thus making the IFrames obsolete.