更新面板不适用于iframe,为什么?

时间:2011-01-31 19:17:25

标签: asp.net html iframe updatepanel

  • 请提供问题的解决方案。 thnku
  • 必须为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>

2 个答案:

答案 0 :(得分:3)

更新面板需要定义触发器,因此它知道要捕获哪些控件的事件。因此,UpdatePanel需要显示捕获事件的控件,因此不能在iframe内。

编辑:

触发器可以定义如下:

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

有关如何找到UpdatePanel工作的详情here

但是,正如我所说,Button1必须在了解它的UpdatePanel范围内定义。因此,如果要在default.aspx事件处理程序中修改Button1_Click上的控件,则Button1和要修改的控件必须彼此可见(因此未定义)在iframe内)。您可以通过使用包含page0004内容的用户控件替换iframe来执行您想要的操作,但您可以确保default.aspx和用户控件之间的所有控件始终都在那里。

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

答案 1 :(得分:2)

你想做什么有点不可理解,但这是你的解决方案

<%@ 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”中插入followng

<%@ 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回发,如果第一个参数是所请求的更新面板的ID ...