更新面板不适用于 iframe，为什么？答案

【问题标题】：update panel not working for iframe, why?更新面板不适用于 iframe，为什么？
【发布时间】：2011-06-18 19:23:30
【问题描述】：

注意

请提供问题的解决方案。谢谢
在iframe中显示的页面的控件必须实现ajax类型的功能，请提出一些补救措施。任何治疗方法。

带有 iframe 的内容（按钮）导致完全回发

我在主页上使用了更新面板、脚本管理器
以及 iframe 中显示的 pae

即使这样回发也会发生

注意

我使用标签中的当前时间检查这一点。

这里是代码。

default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css">  </link>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <table style="width: 100%;" align="center" width="100%">
            <tr>
                <td align="center" valign="top" bgcolor="#FFFF99" nowrap="nowrap" width="100%" 
                    style="width: 100%;" colspan="2">
                    Logo and pic here 
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="left" nowrap="nowrap" style="width: 20%;" valign="top" width="20%"  bgcolor="#CC00CC">
                    Side Left

                    <br />
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                        <asp:Label runat="server" Text="Menu will come here"></asp:Label>
      <br />
                            <asp:Button ID="Button1" runat="server" Text="small" 
                                onclick="size_iframe_small" />
                            <asp:Button ID="Button2" runat="server" Text="big" onclick="size_iframe_big" />


                            <br />
                            <!--Source HTML codes by Quackit.com 
                            http://www.quackit.com/html/codes/scrolling_images.cfm
                            -->

<marquee behavior="scroll" direction="up" scrollamount="5" onmouseover="this.setAttribute('scrollamount', 2, 0);" onmouseout="this.setAttribute('scrollamount', 5, 0);"  >
<div>
<asp:Image ID="Image1" runat="server" Height="100px" 
                                ImageUrl="~/Images/Water lilies.jpg" Width="100%" ></asp:Image>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="Page0004.aspx" Target="I1" CssClass="hyperlink_marquee" BackColor="#FFFF99">PAGE0004</asp:HyperLink>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</div>

</marquee>


      </ContentTemplate>
                    </asp:UpdatePanel>

                    <div>
                    This DOESNOT have AJAX, 
                    <br />
                    notice the postback
                    <br />
                        <asp:Button ID="Button3" runat="server" Text="POSTBACK" />
                    </div>

                </td>
                <td align="left" bgcolor="#006600" nowrap="nowrap" style="width: 80%;" valign="top" width="80%">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>

                   Content Center <br />
                    <asp:Panel ID="Panel1" runat="server" >
                    below is a iframe
                    <br />
                    frame border is one to display effect.                    
                    </asp:Panel>
                            <iframe id="I1" runat="server" name="I1" scrolling="no" ></iframe>
                        </ContentTemplate>
                    </asp:UpdatePanel>


                </td>
            </tr>
             <tr>
                <td align="center" bgcolor="#FF99CC" nowrap="nowrap" style="width: 100%;" 
                     valign="bottom" width="100%" colspan="2">
                   copyright pic
                </td>
            </tr>
            <tr>
                <td align="center" bgcolor="Aqua" nowrap="nowrap" style="width: 100%;" 
                    valign="bottom" width="100%" colspan="2">
                   bottom links
                </td>
            </tr>
        </table>
    </div>



    </form>
</body>
</html>

页面来源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link href="StyleSheet.css" rel="stylesheet" type="text/css" />  </link>
</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTMxNjQzNjAzOA9kFgICAw9kFgQCAw8PFgIeBFRleHQFEDAwOjA1OjIwLjE0MDYyNTBkZAIJD2QWAmYPZBYCAgMPFgQeBkhlaWdodAUGMTAwMHB4HgVXaWR0aAUFNzAwcHhkZIj8iyoBcGPp9uYNf6JDGALbcNPc" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebSite2/WebResource.axd?d=SaMSNOBLKccV2NOTlN-gpw2&amp;t=634143971188437500" type="text/javascript"></script>


<script src="/WebSite2/ScriptResource.axd?d=wSIzE9Mm7k9OISEyoWDsv3U4aXp9CFd2A4oFHH6FT1g6BCLjteDUaab2pkPnDwBpBV94ozt6kAUQ8M2GCuP8p7K6gO-LkSKrRL_6Fka6BBY1&amp;t=ffffffffc9e9457d" type="text/javascript"></script>
<script src="/WebSite2/ScriptResource.axd?d=wSIzE9Mm7k9OISEyoWDsv3U4aXp9CFd2A4oFHH6FT1g6BCLjteDUaab2pkPnDwBpwApHifEXkw8RNjLgUqr8FJOGxAzU11m_nYTGH6QqtL81&amp;t=ffffffffc9e9457d" type="text/javascript"></script>
<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLe247BDgKM54rGBgK7q7GGCALs0bLrBgLWlM+bAg8dLO2f49U7Nx0cS1fOwVELnlid" />

</div>
    <div>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1','tUpdatePanel2'], [], [], 90);
//]]>
</script>


        <table style="width: 100%;" align="center" width="100%">
            <tr>
                <td align="center" valign="top" bgcolor="#FFFF99" nowrap="nowrap" width="100%" 
                    style="width: 100%;" colspan="2">
                    Logo and pic here 
                    <span id="Label1">00:05:20.1406250</span>

                </td>
            </tr>
            <tr>
                <td align="left" nowrap="nowrap" style="width: 20%;" valign="top" width="20%"  bgcolor="#CC00CC">
                    Side Left

                    <br />
                    <div id="UpdatePanel1">

                        <span>Menu will come here</span>
      <br />

                            <input type="submit" name="Button1" value="small" id="Button1" />
                            <input type="submit" name="Button2" value="big" id="Button2" />




                            <br />
                            <!--Source HTML codes by Quackit.com 
                            http://www.quackit.com/html/codes/scrolling_images.cfm
                            -->

<marquee behavior="scroll" direction="up" scrollamount="5" onmouseover="this.setAttribute('scrollamount', 2, 0);" onmouseout="this.setAttribute('scrollamount', 5, 0);"  >
<div>
<img id="Image1" src="Images/Water%20lilies.jpg" style="height:100px;width:100%;border-width:0px;" />
<a id="HyperLink1" class="hyperlink_marquee" href="Page0004.aspx" target="I1" style="background-color:#FFFF99;">PAGE0004</a>
<input name="TextBox1" type="text" id="TextBox1" />

</div>

</marquee>



</div>

                    <div>
                    This DOESNOT have AJAX, 
                    <br />
                    notice the postback
                    <br />
                        <input type="submit" name="Button3" value="POSTBACK" id="Button3" />
                    </div>


                </td>
                <td align="left" bgcolor="#006600" nowrap="nowrap" style="width: 80%;" valign="top" width="80%">
                    <div id="UpdatePanel2">


                   Content Center <br />
                    <div id="Panel1">

                    below is a iframe
                    <br />
                    frame border is one to display effect.                    

    </div>

                            <iframe id="I1" name="I1" scrolling="no" Height="1000px" Width="700px"></iframe>

</div>


                </td>
            </tr>
             <tr>
                <td align="center" bgcolor="#FF99CC" nowrap="nowrap" style="width: 100%;" 
                     valign="bottom" width="100%" colspan="2">
                   copyright pic
                </td>
            </tr>

            <tr>
                <td align="center" bgcolor="Aqua" nowrap="nowrap" style="width: 100%;" 
                    valign="bottom" width="100%" colspan="2">
                   bottom links
                </td>
            </tr>
        </table>
    </div>





<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>

</body>
</html>

page0004.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page0004.aspx.cs" Inherits="Page0004" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page0004</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel199" runat="server">
        <ContentTemplate>

            <asp:Button ID="Button1" runat="server" Text="No Postback" />

        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </ContentTemplate>
        </asp:UpdatePanel>



    </div>
    </form>
</body>
</html>

【问题讨论】：

我不明白你为什么需要一个 iframe。你不能只是动态地将你想要的 iframe 中的内容添加到 UpdatePanel 的 Controls 集合中吗？

标签： asp.net html iframe updatepanel

【解决方案1】：

你想做什么有点难以理解，但这是你的解决方案

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test2.aspx.vb" Inherits="test2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="one" runat="server">
        <ContentTemplate>
            <asp:Label runat="server">I want to be changed</asp:Label>
            <iframe src="test3.aspx"></iframe>
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

在页面“test3.aspx”中插入以下内容

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test2.aspx.vb" Inherits="test2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Im an Iframe
        <asp:Button OnClientClick="parent.Sys.WebForms.PageRequestManager.getInstance()._doPostBack('one', '')" runat="server" />
    </div>
    </form>
</body>
</html>

现在你看到函数parent.Sys.WebForms.PageRequestManager.getInstance()._doPostBack('one', '') parent 用于退出 iframe，现在你在主页上

Sys.WebForms.PageRequestManager.getInstance()._doPostBack 会导致 updatepanel 回发，如果第一个参数是请求的 updatepanel 的 id...

【讨论】：

【解决方案2】：

更新面板需要定义触发器，因此它知道要为哪些控件捕获哪些事件。因此，您要为其捕获事件的控件需要对UpdatePanel 可见，因此不能在iframe 内。

编辑：

触发器可以定义如下：

<asp:UpdatePanel>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <!-- Your content here -->
    </ContentTemplate>
</asp:UpdatePanel>

更多关于UpdatePanels 的工作方式可以在here找到。

但是，就像我说的，Button1 必须在了解它的 UpdatePanel 范围内定义。因此，如果您想在Button1_Click 事件处理程序中修改default.aspx 上的控件，则Button1 和要修改的控件必须彼此可见（因此不在iframe 中定义）。您可以通过将 iframe 替换为包含 page0004 内容的用户控件来做您想做的事情，但您可以确保 default.aspx 和用户控件之间的所有控件始终存在。

是否有理由单独定义 page0004 并将其注入 iframe 中？

【讨论】：

好的，但请看代码，更新面板也定义在 iframe 中显示的实际页面中，因此该页面上的更新面板可以看到按钮单击。也请提供解决方案
对，但实际上定义了两个UpdatePanels（UpdatePanel1 和UpdatePanel199），并且都没有为它们定义任何触发器。因此，他们不会阻止完整的回发，因为他们不知道要查找什么。我没有给出“答案”的原因是我的观点是你不能做你正在尝试的事情（因此，这就是我的答案）。
我必须为 iframe 中显示的任何页面（aspx 页面相同的网站）的“页面控件”提供 ajax 类型的功能。请提出一些建议。这个触发的东西怎么定义？