一页上有多个 ModalPopupExtenders，每个都有 javascript答案

【问题标题】：Multiple ModalPopupExtenders on one page, each with javascript一页上有多个 ModalPopupExtenders，每个都有 javascript
【发布时间】：2010-11-02 16:15:39
【问题描述】：

您好所有 ASP.NET AJAX 和 JavaScript 领域的专家！

这里是交易：我有一个用户控件 (ascx)，它当前包含一个帮助按钮和一个显示面板的 ModalPopupExtender。这个想法是用户单击按钮，帮助信息显示在页面顶部的模式弹出窗口中，另一个按钮关闭它。

帮助信息很可能比窗口大，所以我必须调整显示的模式弹出窗口的大小。但是，当控件编码如下时，面板最初会调整大小；如果父页面出现验证错误并重新发送给客户端，则顶部的 javascript 永远不会执行。

这是控制标记：

<script type="text/javascript">
// Adjust for popup y = 130 and a small gap.
var myAdjustedHeight = getPageHeight() - 150;
if (document.getElementById('<% =pnlPopUp.ClientID %>')) {
  document.getElementById('<% =pnlPopUp.ClientID %>').style.height = myAdjustedHeight;
  document.getElementById('<% =pnlScroll.ClientID %>').style.height = myAdjustedHeight - 20;
}
</script>
<asp:button id="btnHelp" runat="server" text="Help" />
<asp:updatepanel id="upPopUp" runat="server">
    <contenttemplate>
        <asp:panel id="pnlPopUp" runat="server" width="600">
            <div class="header" style="float: left;">
             Help
            </div>
            <asp:button id="btnClose" runat="server" text="Close" style="float: right; padding-bottom: 3px;" />
            <asp:panel id="pnlScroll" runat="server" scrollbars="Vertical" style="clear: both;">
                <asp:gridview id="grv" runat="server" autogeneratecolumns="true" showheader="false" gridlines="None" cellspacing="2" cellpadding="2">
                </asp:gridview>
            </asp:panel>
        </asp:panel>
    </contenttemplate>
</asp:updatepanel>
<ajaxtoolkit:modalpopupextender id="popUpExtender" 
  runat="server" backgroundcssclass="modalBackground" okcontrolid="btnClose" 
  targetcontrolid="btnHelp" popupcontrolid="pnlPopUp" x="100" y="130" />

（GridView 以基本方式使用预定义的 DataSet 填充 Page_Load 中的数据。）

我已经尝试添加这个：

function pageLoad() {
    document.getElementById('<% =popUpExtender.ClientID %>').add_shown(adjustHeight);
}

（其中 adjustHeight() 是一个包含顶部代码的函数），但是当它触发时，我会为 ModalPopupExtender 返回 null - 实际上它似乎从未包含在通过网络发送的标记中。

顺便说一句，我需要添加此帮助按钮的至少两个实例，以显示页面上多个元素的帮助信息。因此，我不能使用 ModalPopupExtender 的 BehaviorID 属性，因为它直接通过管道输出到页面并且我遇到了 id 冲突。

那么，我该如何解决这个问题？我是将 ModalPopupExtender 移动到页面还是可以在 ascx 控件中解决这个问题？如果有人对如何解决此问题有任何想法，我将不胜感激。

【问题讨论】：

标签： javascript asp.net asp.net-ajax modalpopupextender

【解决方案1】：

在您的 pageLoad 中使用它：

$find('<% =popUpExtender.ClientID %>');

对于 document.getElementById 返回的 HTML 元素，add_shown 不存在。

【讨论】：

太好了，现在页面已呈现。谢谢！