Search code examples
c#asp.netajaxcontroltoolkit

Wait for user response after showing modal popup login


In my code behind file i am calling an html modal popup which prompts the user for their username and password. i would like to get a result back from this to my code behind calling function before proceeding. how do i do this? Right now the modal form is shown and the c# code continues processing which makes sense but its not what i want. Note: The modal signoff html modal form has a button (btnSignoff) that calls some other code behind function thanks Damo

Code behind:

SignoffModal.Show();
//Wait for response (this is what i would like to be able to do)
if (result <0)
{
//throw some error
}

else
{
// Do some more work
}

HTML Code:

 <!-- Signoff Modal Form -->
                <asp:HiddenField ID="SignoffForModal" runat="server" />
                <ajaxToolkit:ModalPopupExtender runat="server" ID="SignoffModal" BehaviorID="modalPopupExtenderSignoff"
                    TargetControlID="SignoffForModal" PopupControlID="popUpPaneSignoff" OkControlID="btnSignoff"
                    BackgroundCssClass="modalBackground">
                </ajaxToolkit:ModalPopupExtender>
                <asp:Panel ID="popUpPaneSignoff" runat="server" CssClass="confirm-dialog">
                    <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
                    <br />
                    <asp:TextBox ID="txtUserName" runat="server" ToolTip="Username" Width="200px"></asp:TextBox>
                    <br />
                    <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
                    <br />
                    <asp:TextBox ID="txtPassword" runat="server" ToolTip="Password" TextMode="Password"
                        Width="200px"></asp:TextBox>
                    <br />
                    <br />
                    <div class="base">
                        <asp:Button ID="btnSignoff" runat="server" Text="Signoff" />
                        <asp:LinkButton ID="LinkButton3" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderSignoff').hide(); return false;" /></div>
                </asp:Panel>
                <!-- End Signoff Modal Form -->

Solution

  • Looks like the ModalPopupExtender isn't designed this way. While it is modal (prevents the user from interacting with the rest of the page), it's not blocking, mean code continues to run after the form is called. That's because the popup is running on the client, and the code-behind runs the server. This is called a callback because the client code calls back to the server when a action is taken.

    To make this work, you have to split the logic you after SignoffModal.Show(); in an "Ok" part and a "Cancel" part by adding a CancelControlID attribute on ModalPopupExtender to point to the button that handles the Cancel action, then add the button:

      <!-- Signoff Modal Form -->
    <asp:HiddenField ID="SignoffForModal" runat="server" />
    <ajaxToolkit:ModalPopupExtender runat="server" ID="SignoffModal" 
        BehaviorID="modalPopupExtenderSignoff"
        TargetControlID="SignoffForModal" 
        PopupControlID="popUpPaneSignoff"     
        OkControlID="btnSignoff" 
     // points to cancel button action
        CancelControlID="btnCancel" 
     BackgroundCssClass="modalBackground">
    

    ...

    <asp:Button ID="btnSignoff" runat="server" Text="Signoff" />
        // handles Cancel action...
        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        ...
    <!-- End Signoff Modal Form -->
    

    in the btnSignoff code-behind event handler:

    {
    // Do some work...
    

    in the btnCancel code-behind event handler:

    {
    //throw some error...