需要一个简单的 ASP.NET ModalPopupExtender 示例的帮助答案

【问题标题】：Need help with a simple ASP.NET ModalPopupExtender example需要一个简单的 ASP.NET ModalPopupExtender 示例的帮助
【发布时间】：2010-02-01 14:13:42
【问题描述】：

我是 ASP.NET 的新手，我正在尝试让这个 Ajax ModalPopupExtender 正常工作。这是我在网上找到的一个例子，但是点击 btnpopup 时没有任何反应。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalTestProject._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>Untitled Page</title>
</head>
<body>

<form id="form1" runat="server">

<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>

<asp:Button ID="btnpopup" runat="server" Text="Button" /> 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnpopup" PopupControlID="pnlpopup" 
    CancelControlID="btnCancelpopup" EnableViewState="true" DropShadow="true" />

<asp:Panel ID="pnlpopup" runat="server" Width="400px">
    test
    <asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>

</form>

    </body>
</html>

【问题讨论】：

标签： asp.net ajax modalpopupextender

【解决方案1】：

你错过了PopupControlID="pnlpopup"

【讨论】：

【解决方案2】：

尝试使用 ToolkitScriptManager 代替 ScriptManager：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="atk" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
    </title>
    <style type="text/css" media="screen">
        @import url("../css/Main.css");
    </style>
    <script type='text/javascript' src="../js/jquery-1.7.1.min.js"></script>
</head>
<body class="template">
    <form id="form1" runat="server">
    <atk:ToolkitScriptManager ID="ScriptManager1"
        runat="server" EnableScriptGlobalization="True">
    </atk:ToolkitScriptManager>

【讨论】：

【解决方案3】：

确保您的项目引用“AjaxControlToolkit.dll”

确保您的 web.confog 包含以下部分：

<controls>
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
...
</controls>

尝试将整个内容包装在 UpdatePanel 中，如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnpopup" runat="server" Text="Button" /> 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnpopup" PopupControlID="pnlpopup" 
    CancelControlID="btnCancelpopup" EnableViewState="true" />

<asp:Panel ID="pnlpopup" runat="server">
    test
    <asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

【讨论】：

【解决方案4】：

我从来没有能够使弹出扩展器工作！永远不要，无论页面或示例多么简单或基本，句号！

即使是这个最基本的例子也行不通！是的，工具包已安装！当按下按钮时，什么也没有发生！

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>

<form id="form1" runat="server">

<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>

<asp:Button ID="btnpopup" runat="server" Text="Button" /> 

<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnpopup" PopupControlID="pnlpopup" 
    CancelControlID="btnCancelpopup" EnableViewState="true" DropShadow="true" />

<asp:Panel ID="pnlpopup" runat="server" Width="400px">
    test
    <asp:Button ID="btnCancelpopup" runat="server" Text="Button" />
</asp:Panel>

</form>

    </body>
</html>

我在这件事上浪费的时间比任何人都应该花的多！我已经制作了自己的自定义弹出扩展器，它可以完美运行！

【讨论】：

【解决方案5】：

我认为您缺少 Register 指令。你应该添加类似

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %> 在

之后

`' 指令

【讨论】：

【解决方案6】：

我有同样的问题，我有ScriptManager 继承自母版页。

一切都不起作用，如果我反转控制，这意味着PopUpControlID=btnpopup 和TargetControlID=pnlpopup，那么它会起作用，并且使用DropShadow=True，btnpopup 会产生阴影效果。我想知道为什么 modalpopup 的反向逻辑适用于按钮而不适用于面板？

请注意，从母版页继承的 ScriptManager 将不起作用，如果您将单个 ScriptManager 放在页面本身上，它将正常工作。

干杯！

【讨论】：

【解决方案7】：

您可以使用 javascript 显示弹出面板。我不确定是否还有其他方法，但这就像一个魅力。我将它用于我创建的评论控件。

function show_panel() {
    $find('popup_panel').show();
    return false;
}

触发事件的控件：

    <input id="btnReply" type="button" class='comment-reply' onclick="show_panel();"
         value="reply" runat="server" />

最后，弹出扩展器和弹出面板。只需将 cc1 前缀更改为您正在使用的任何内容，例如。 asp、ajaxtoolkit等

        <cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server"   
               CancelControlID="CancelButton" BehaviorID="popup_panel"
               TargetControlID="Hidden1" PopupControlID="PopupReplyPanel" 
               BackgroundCssClass="modalBackground"  DropShadow="true" >
        </cc1:ModalPopupExtender>  

        <asp:Panel ID="PopupReplyPanel" class="popup-panel" runat="server">
            <div class="popup-panel">
                Your popup panel

                <span class="ok-cancel-btns">
                    <input id="Hidden1" type="hidden" runat="server"/>
                    <asp:Button ID="okButton" runat="server" Text="Post Comment"  />
                    <input id="CancelButton" type="button" value="Cancel" />  
                </span>
            </div>
        </asp:Panel>

这是我使用的样式，您显然需要更改其中一些以满足您的需要。

    <style>
      /*Modal Popup Styles*/
      .modalBackground{background-color:black;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
      .popup-panel{padding:5px 5px 20px 5px;background-color:#f7f3ef;}
      .ok-cancel-btns{padding-top:10px;float:right;}
      .ok-cancel-btns input{margin-left:10px;text-align:right;}
    </style>

【讨论】：