一个页面上有多个ModalPopupExtender,每个都有javascript

时间:2010-11-02 16:15:39

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

Hello AJAX和JavaScript领域的所有大师们都好!

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

帮助信息可能比窗口大,所以我必须调整show上的模式弹出窗口。当控制编码如下时,面板最初调整大小;如果父页面有验证错误并重新发送给客户端,则顶部的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控件中解决这个问题? 如果有人知道如何解决这个问题,我将不胜感激。

1 个答案:

答案 0 :(得分:1)

在pageLoad:

中使用此功能
$find('<% =popUpExtender.ClientID %>');
对于HTML元素,

add_shown不存在,document.getElementById返回。