Нужна помощь с простым примером ASP.NET ModalPopupExtender - PullRequest
Новая
       9

Нужна помощь с простым примером ASP.NET ModalPopupExtender

1 голос
/ 01 февраля 2010

Я новичок в 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>

Ответы [ 7 ]

4 голосов
/ 28 февраля 2011

Вам не хватает PopupControlID="pnlpopup"

2 голосов
/ 10 октября 2013

Попробуйте использовать 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>
1 голос
/ 25 февраля 2012

Мне никогда не удавалось заставить работать всплывающее расширение! Никогда, независимо от того, насколько простой или простой страницы или примера, точка!

Даже этот самый простой пример не сработает! Да, набор инструментов установлен! При нажатии кнопки ничего не происходит! 

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

Я потратил больше времени на эту вещь, чем кто-либо должен тратить! Я сделал свой собственный расширитель всплывающих окон, который работает безупречно!

1 голос
/ 01 февраля 2010

Убедитесь, что ваш проект ссылается на '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>
0 голосов
/ 11 декабря 2013

Вы можете показать всплывающую панель с 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>
0 голосов
/ 13 июня 2011

У меня та же проблема, и у меня ScriptManager унаследовано от главной страницы.

Все не работает, если я переверну элемент управления, что означает PopUpControlID=btnpopup и TargetControlID=pnlpopup, тогда он будет работать, а с DropShadow=True btnpopup будет иметь эффект drophadow. Интересно, почему обратная логика для модалпопупа работает для кнопки, а не для панели?

Обратите внимание, что унаследованный ScriptManager от Master Page не будет работать, если вы поместите один ScriptManager на свою страницу, он будет работать нормально.

Ура!

0 голосов
/ 01 февраля 2010

Я думаю, что вы пропустили директиву Register. Вы должны добавить что-то вроде

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %> после

`<% @ Page ...%> 'директива

...