Need help with a simple ASP.NET ModalPopupExtender

2019-05-30 15:00发布

站内问答 / 移动开发
1280 7 5

I'm new to ASP.NET and I'm trying to get this Ajax ModalPopupExtender working. This is an example i found on the net, but nothing happens when btnpopup is clicked.

<%@ 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>

7条回答
劫难
2楼-- · 2019-05-30 15:24

Make sure your project references 'AjaxControlToolkit.dll'

Make sure your web.confog contains the following section:

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

Try wrapping the entire thing in an UpdatePanel like so:

<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>
查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
3楼-- · 2019-05-30 15:26

Try using ToolkitScriptManager instead of 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>
查看更多
0人赞 添加讨论(0) 举报
Melony?
4楼-- · 2019-05-30 15:29

I think you are missing the Register directive. You should add something like

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

`<%@ Page ... %>' directive

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
5楼-- · 2019-05-30 15:31

You can show the popup panel with javascript. I'm not sure if there's any other way, but this works like a charm. I used it for a comment control I created. 

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

The control to fire the event:

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

And lastly, the popup extender and the popup panel. Just change the cc1 prefix to whatever you're using, eg. asp, ajaxtoolkit, etc.

        <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>

Here's the styles I used, you'll obviously need to change some of them to suit your needs.

    <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>
查看更多
0人赞 添加讨论(0) 举报
在下西门庆
6楼-- · 2019-05-30 15:32

I have never ever ever been able to make the popup extender work! Never, regardless of how simple or basic the page or example is, period!

Even this most basic example will not work! Yes, the tool kit is installed! When the button is pressed, nothing happens!

<%@ 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>

I've wasted more time with this thing then anyone ever should spend! I've made my own custom popup extender which works flawlessly!

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
7楼-- · 2019-05-30 15:33

You are missing the PopupControlID="pnlpopup"

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)