ModalPopupExtender 在第二次调用时不会在更新面板中重新加载 iframe答案

【问题标题】：ModalPopupExtender won't reload iframe in updatepanel on second callModalPopupExtender 在第二次调用时不会在更新面板中重新加载 iframe
【发布时间】：2017-09-23 07:12:10
【问题描述】：

我的页面正在将一个单独的 aspx 页面加载到 ModalPopupExtender 中包含的 UpdatePanel 内的 iframe 中以供用户输入。这工作正常，但是当我尝试使用 GetPostBackEventReference 注册 btnOK asp:button 时，我可以在用户按下 OK 按钮（在 iframe 内）关闭 ModalPopupExtender 后进行正确的回调，出于某种原因我不是能够重新打开 iframe（例如，如果用户想要做另一个相同类型的输入，即在这种情况下输入多个活动）。发生的问题是出现了 ModalPopupExtender 阴影，但 iframe 从未在其中完全加载。

如果我使用__doPostBack('<%=btnOK .ClientID%>','OnClick'); 而不是GetPostBackEventReference，我可以进行第二次调用，但我的按钮的C# 事件处理程序不会触发......而我只得到一个PostBack。我猜，因为我得到了一个完整的 PostBack，所以有些东西会重置页面，然后一切重新开始。

有什么办法可以解决这个问题吗？

提供一些我正在尝试做的事情的背景：该页面应该在将其他页面加载到 iframe 和 ModalPopupExtenders 时向用户显示内容，以保持页面更小并将输入与输出分开。考虑到这一点，我需要能够控制流程并在必要时进行适当的回调。

包含 ModalPopupExtender 的代码：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head_Obudget" runat="server">
<script type="text/javascript">
    $(document).ready(function () {
        $('.CssClass_btnNewActivity').click(function () {
            $('#frameInsertActivity').attr('src', 'InputForms/InsertActivity.aspx');
        });
    });
    function InsertActivity_Done() {
        <%= Page.ClientScript.GetPostBackEventReference(btnOK, String.Empty) %>;
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_Obudget" runat="server">
<asp:UpdatePanel ID="upNewActivity" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:PostBackTrigger ControlID="btnOK" />
    </Triggers>
    <ContentTemplate>
        <ajaxToolkit:ModalPopupExtender 
            BackgroundCssClass="ModalPopupBG"
            ID="mpeNewActivity" 
            runat="server"
            PopupControlID="divNewActivity" 
            TargetControlID="btnNewActivity"
            OkControlID="btnOK"
            CancelControlID="btnCancel" 
            DropShadow="true">
        </ajaxToolkit:ModalPopupExtender>
        <asp:button id="btnNewActivity" runat="server" CssClass="CssClass_btnNewActivity" text="New Activity" />
        <div id="divNewActivity">
            <iframe id="frameInsertActivity" width="500" height="100" frameBorder="0">
            </iframe>
        </div>
        <div class="popup_Buttons"style="display: none;">
            <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" OnClientClick="InsertActivity_Done();" CssClass="CSS_Class_btnOK" />
            <input id="btnCancel" type="button" value="Cancel" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

iframe 代码：

<asp:Content ID="Content1" ContentPlaceHolderID="head_Empty" runat="server">
<style type="text/css">
    body{background:white;}
</style>
<script type="text/javascript">
    function okay() {
        $(window.parent.document).find('.CSS_Class_btnOK').click();
    }
    function cancel() {
        window.parent.document.getElementById('btnCancel').click();
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_Empty" runat="server">
<table>
    <tr>
        <th colspan="2">
            New Activity:
        </th>
    </tr>
    <tr>
        <td>
            Name: <asp:TextBox ID="tbNewActivityName" runat="server" Width="200"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rfvNewActivityName" runat="server" ControlToValidate="tbNewActivityName" ValidationGroup="VG_NewActivity" ErrorMessage="*" Display="Dynamic"></asp:RequiredFieldValidator>
        </td>
        <td>
            <div class="popup_Buttons">
                <asp:Button ID="btnInsertNewActivity" runat="server" Text="Add" OnClick="btnInsertNewActivity_Click" ValidationGroup="VG_NewActivity" />
                <input id="btnCancel" onclick="cancel();" type="button" value="Cancel" />
            </div>
        </td>
    </tr>
</table>
</asp:Content>

【问题讨论】：

标签： javascript c# jquery asp.net iframe

【解决方案1】：

我意识到问题出在哪里：打开 ModalPopupExtender 的按钮也会在单击事件时执行 jQuery 以连接 iframe 的 'src' 属性。

我需要使用委托事件处理程序来处理来自后代元素的事件，以便在 iframe 的第一次执行返回后再次找到此按钮

...代码现在看起来和工作如下：

$(document).on('click', '.CssClass_btnNewActivity', function () {
            $('#frameInsertActivity').attr('src', 'InputForms/InsertActivity.aspx');
        });

...与此相反，它不起作用：

$('.CssClass_btnNewActivity').click(function () {
        $('#frameInsertActivity').attr('src', 'InputForms/InsertActivity.aspx');
    });

...我总是忘记这个=]

【讨论】：