locked
how to use PopupControlExtender RRS feed

  • Question

  • User1484644233 posted
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ajaxpopup.aspx.vb" Inherits="ajaxpopup" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="asm" runat="server"></asp:ScriptManager>
                
                <asp:Button ID="ClientButton" runat="server" Text="Launch  Modal Popup (Client)" />
                
                <asp:PopupControlExtender ID="PopupControlExtender1" runat="server"
                    TargetControlID="clientbutton" PopupControlID="modalpanel" Position="Right" CommitProperty="value">
                </asp:PopupControlExtender>
    
                 <asp:Panel ID="ModalPanel" runat="server" Width="500px">
                    ASP.NET AJAX is a free
                    <br />
                    <asp:Button ID="OKButton" runat="server" Text="Close" />
                </asp:Panel>
               
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/insertLocations.aspx">Insert New Locations</asp:HyperLink>
                <br />
            </div>
        </form>
    </body>
    </html>
    

    I am using above code to show the panel as popup. When I run this example, everything in panel already showing on the page.

    How can I make this show the panel when I click on on the button id "clientbutton"?

    Thanks in advance and I am sorry if this question was answered previsously , I search and couldn't find an answer to my question. 

    Friday, May 23, 2014 2:54 PM

Answers

  • User2103319870 posted

    You need to make a slight change to your panel control. You need to hide it initally and then show on button click.

    <asp:Panel ID="ModalPanel" runat="server" Width="500px" style="display:none">
                ASP.NET AJAX is a free
                <br />
                <asp:Button ID="OKButton" runat="server" Text="Close" />
            </asp:Panel>

    Complete code

    <asp:Button ID="ClientButton" runat="server" Text="Launch  Modal Popup (Client)" />
            <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="clientbutton"
                PopupControlID="modalpanel" Position="Right" CommitProperty="value">
            </asp:PopupControlExtender>
            <asp:Panel ID="ModalPanel" runat="server" Width="500px" style="display:none">
                ASP.NET AJAX is a free
                <br />
                <asp:Button ID="OKButton" runat="server" Text="Close" />
            </asp:Panel>

    Check this link for more details : Modal PopupExtendar Example

    Also you may need to add some css styles to make you popup look better.

    Sample Implementation:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .modalBackground
            {
                background-color: Gray;
                filter: alpha(opacity=70);
                opacity: 0.7;
            }
            .modalPopup
            {
                background-color: #FFFFFF;
                border-width: 3px;
                border-style: solid;
                border-color: black;
                padding-top: 10px;
                padding-left: 10px;
                width: 300px;
                height: 140px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Button ID="btnShowModal" runat="server" Text="Click to show the Modal Window" />
        <asp:Panel ID="pnlModalPanel" runat="server" Style="display: none" CssClass="modalPopup"
            align="center">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <%--Add your other controls here--%>
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
            TargetControlID="btnShowModal" PopupControlID="pnlModalPanel">
        </asp:ModalPopupExtender>
        </form>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 23, 2014 3:05 PM
  • User1484644233 posted

    Even though it is not fixing the problem, I found a quick solution.

    In properties of sqlconnection , in inserted event, I typed gridview1.bind()

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 23, 2014 5:06 PM

All replies

  • User2103319870 posted

    You need to make a slight change to your panel control. You need to hide it initally and then show on button click.

    <asp:Panel ID="ModalPanel" runat="server" Width="500px" style="display:none">
                ASP.NET AJAX is a free
                <br />
                <asp:Button ID="OKButton" runat="server" Text="Close" />
            </asp:Panel>

    Complete code

    <asp:Button ID="ClientButton" runat="server" Text="Launch  Modal Popup (Client)" />
            <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="clientbutton"
                PopupControlID="modalpanel" Position="Right" CommitProperty="value">
            </asp:PopupControlExtender>
            <asp:Panel ID="ModalPanel" runat="server" Width="500px" style="display:none">
                ASP.NET AJAX is a free
                <br />
                <asp:Button ID="OKButton" runat="server" Text="Close" />
            </asp:Panel>

    Check this link for more details : Modal PopupExtendar Example

    Also you may need to add some css styles to make you popup look better.

    Sample Implementation:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .modalBackground
            {
                background-color: Gray;
                filter: alpha(opacity=70);
                opacity: 0.7;
            }
            .modalPopup
            {
                background-color: #FFFFFF;
                border-width: 3px;
                border-style: solid;
                border-color: black;
                padding-top: 10px;
                padding-left: 10px;
                width: 300px;
                height: 140px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Button ID="btnShowModal" runat="server" Text="Click to show the Modal Window" />
        <asp:Panel ID="pnlModalPanel" runat="server" Style="display: none" CssClass="modalPopup"
            align="center">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <%--Add your other controls here--%>
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
            TargetControlID="btnShowModal" PopupControlID="pnlModalPanel">
        </asp:ModalPopupExtender>
        </form>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 23, 2014 3:05 PM
  • User1484644233 posted

    Thanks for your reply , it helped a lot. I am able to show the popup and changed background color as you recommended too.

    I have a gridview on the page showing list of records. Then when I press on add new record, modelpopupextender showing me a detailsview control to insert a record to the database. On my details view control there is only one row to enter data, it opens in insert mode. When the popup is showing the details view control, click on insert link closes the popup which I don't mind but when I am back at the main content (gridview) is not showing the record that I just added.

    Friday, May 23, 2014 4:51 PM
  • User1484644233 posted

    Even though it is not fixing the problem, I found a quick solution.

    In properties of sqlconnection , in inserted event, I typed gridview1.bind()

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 23, 2014 5:06 PM