Vince Xu's Blog: ModalPopup

In aspx page, we can handle a ModalPopup to work by binding related target properties. If ModalPopup is in MasterPage, some engineers encountered problem on defining TargetControlID, OKControl or CancelControl, since these target controls are in the child page so that we can't bind the target control id to ModalPopup directly.

The solution of it is using FindControl in child page to bind TargetControlID on ModalPopup dynamically. But I don't think it is a convenient way.

Here, I suggest you use client behavior method to achieve it.

MasterPage:

<head runat="server">
    <title></title>
    <style>
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .modalPopup
        {
            background-color: #ffffdd;
            border-width: 3px;
            border-style: solid;
            border-color: Gray;
            padding: 3px;
            width: 250px;
        }
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxtoolkit:toolkitscriptmanager runat="Server" id="ScriptManager1" >
        </ajaxtoolkit:toolkitscriptmanager>
        <script type="text/javascript">


            function showPopup() {
                var modalPopupBehavior = $find('programmaticModalPopupBehavior');
                modalPopupBehavior.show();

            }

            function hidePopup() {
                var modalPopupBehavior = $find('programmaticModalPopupBehavior');
                modalPopupBehavior.hide();

            }
        </script>
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
        <ajaxtoolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
            BehaviorID="programmaticModalPopupBehavior" 
            TargetControlID="hiddenTargetControlForModalPopup"
            PopupControlID="programmaticPopup" 
            BackgroundCssClass="modalBackground"
            DropShadow="True"  
            RepositionMode="RepositionOnWindowScroll" >
        </ajaxtoolkit:ModalPopupExtender>

        <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:125px;width:225px;padding:10px">
            I'm the ModalPopup in MasterPage

            <input id="Button1" type="button" value="OK" onclick="hidePopup()" /> 
        </asp:Panel>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>

    </form>
</body>

Child Page:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Button ID="Button1" runat="server" Text="I'm a Button in child page" OnClientClick="showPopup();return false;" />
</asp:Content>

1. Generate the ModalUpdate Progress bar when a button is triggered.

UpdateProgress can help us to build "page loading" progress on the page. But some times we want the page loading is popped up above the page and disable the background of page. Check the below image. In this way, we can use AjaxControlToolkit ModalPopup to achieve it.

Try the below sample code to achieve Modalupdate progress.

Firstly, you need download & install AjaxControlToolKits : http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Default.aspx

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

<head runat="server">
    <title>Untitled Page</title>
    <style>
        .modalBackground {
 background-color:Gray;
 filter:alpha(opacity=70);
 opacity:0.7;

}

.modalPopup {
 background-color:#ffffdd;
 border-width:3px;
 border-style:solid;
 border-color:Gray;
 padding:3px;
 width:250px;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    <script type="text/javascript">
        function showPopup() {
            var modalPopupBehavior = $find('programmaticModalPopupBehavior');       
            modalPopupBehavior.show();
        }
        function hidepopup()
        {
            var modalPopupBehavior = $find('programmaticModalPopupBehavior');
            modalPopupBehavior.hide();
        }
    </script>

    <asp:Button ID="loginButton" runat="server" Text="login"  OnClientClick="showPopup()"
        onclick="loginButton_Click" /><br />
   
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
              Put the control which needs to update here, such as GridView.    

        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="loginButton"  EventName="Click"/>
        </Triggers>
    </asp:UpdatePanel>
   
        <br />


        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
        <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
            BehaviorID="programmaticModalPopupBehavior"
            TargetControlID="hiddenTargetControlForModalPopup"
            PopupControlID="programmaticPopup"
            BackgroundCssClass="modalBackground"
            DropShadow="True"
            RepositionMode="RepositionOnWindowScroll" >
        </ajaxToolkit:ModalPopupExtender>

        <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:25px;width:85px;padding:10px">
        <div id='messagediv' style="text-align:center">Loading...</div>

        </asp:Panel>
    </form>
</body>

    protected void loginButton_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);//For testing.
        programmaticModalPopup.Hide();
  
    }

(You can change the css style or add an image into programmaticPopup instead of "Loading".)

With this sample, we need assign the specific control to raise the ModalUpdateProgress.

2. How can we pop up the ModalUpdateProgress bar while each request is posted and each control is triggered?

On assuming that you have a GridView. And when the request is from GridView, it will generate popup panel to display "loading".

<script type="text/javascript">
function pageLoad()
{
   $find('modalbehavior').hide();
}
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender, e)
{
   if (e.get_postBackElement().id == "<%= GridView1.ClientID %>")  // This line can make sure only the request from GridView1 will present popup panel, you can change it to other control client id.
   {
     $find('modalbehavior').show();
   }
});

</script>

Beside this code, you need a ModalPopup to show the Loading message.

Vince Xu's Blog

Thursday, November 20, 2008

ModalPopup in MasterPage

Monday, October 27, 2008

How to make ModalUpdate Progress Bar on page?

About Me

Blog Archive

Labels

Visited Location

Followers