Ajax – ModalPopupExtender not displaying on button postback within updatepanel

.net-3.5ajaxasp.netmodalpopupextendervb.net

I know this flavor of question has been asked multiple times, but I've spent hours sifting through answers that don't match or don't work and I'm at wits end.

Background: I have a situation where I want to evaluate a record to make sure it fits a specific set of criteria. If it fits the criteria, raise an alert message for confirmation from the user. I do not want to raise the popup unless the criteria matches.

Pseudocode of what I want to accomplish:

  • User enters information in multiple fields
  • User clicks "Save" (cmdUpdate)
  • within the "Save" click function it checks to see if the same record already exists
    in the database (e.g. this is a duplicate).
  • If it's not a duplicate continue with the save function
  • If it's a duplicate prompt the user for confirmation to save the dup.

I can't get the popup to display before/after the postback. I've tried a hack workaround of setting a session value to maintain the state. The value tests positive in the prerender and does call the modalpopupextender.show but it never fires successfully to the screen. I'm not opposed to switching to a javascript solution if someone has a better method but I have to do the check for duplicates in the asp.net code behind.

Markup:

<asp:UpdatePanel ID="upMainContent" runat="server" UpdateMode="Conditional"  ChildrenAsTriggers="False" >
    <ContentTemplate>
    <asp:Label ID="lblDummy" runat="server" EnableViewState="false" Style="display: none;" />
    <asp:Panel ID="pnlConfirmation" runat="server" Width="400px" Style="display: none;" CssClass="ModalPopupFront">
        <div ID="Div1" runat="server" class="PopupHeader" style="width:400px;">&nbsp;&nbsp;Duplicate Record</div>
        <br />
        <asp:Label ID="lblConfirmationMessage" runat="server" Text="This record has already exists.<br/> Are you sure you want to save a duplicate entry?"></asp:Label><br />
        <br />
        <div style="text-align:right;">
        <asp:Button ID="btnSaveAnyway" runat="server" Text="Save" OnClick="btnSaveAnyway_Click" />
        <asp:Button ID="btnCancelSave" runat="server" Text="Cancel" OnClick="btnCancelSave_Click"  />
        </div>
    </asp:Panel>
    <ajax:ModalPopupExtender ID="mpeSaveConfirmation" runat="server" Enabled="False" 
        TargetControlID="lblDummy" PopupControlID="pnlConfirmation" 
        BackgroundCssClass="modalBackground" DropShadow="true" 
        CancelControlID="btnCancelSave"
        RepositionMode="RepositionOnWindowResizeAndScroll" PopupDragHandleControlID="pnlConfirmation" Drag="true">
    </ajax:ModalPopupExtender>


    <!-- all the input fields/misc content -->

     <asp:Button id="cmdUpdate" runat="server" CausesValidation="true" OnClick="cmdUpdate_Click" Text="Save" ValidationGroup="vg1"  ToolTip="Save the current record" TabIndex="102" />

    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlStateId" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="ddlCountyId" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel> 

Code behind:

    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        '...

        If GetSessionValue("HackWorkaround") Then
            mpeSaveConfirmation.Enabled = True
            mpeSaveConfirmation.Show()         
        End If        
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '...
        If not Page.IsPostBack Then
            SetSessionValue("HackWorkaround", False)
        End if
        '...
    End Sub

 Protected Sub cmdUpdate_Click(ByVal sender As Object, ByVal e As System.EventArgs)


        If tbOpTill.NewRecordIdenticalToLast() And tbOpRecord.NewRecordIdenticalToLast() Then
            SetSessionValue("HackWorkaround", True)
        Else
            SetSessionValue("HackWorkaround", False)
            SetSessionValue("LastOpRecordIDSaved", tbOpRecord.OpRecordId)

            Dim isEdit As Boolean = ResetOpRecord("Till", tbOpTill)
            SmartRedirect("Optill/oprecord_edit.aspx")
        End If

    End Sub


Protected Sub btnSaveAnyway_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    SetSessionValue("HackWorkaround", False)
    mpeSaveConfirmation.Enabled = False
    mpeSaveConfirmation.Hide()
    'Duplicate record exists, but the customer wants to save anyway.
    DoSave()

    Dim isEdit As Boolean = ResetOpRecord("Till", tbOpTill)
    SmartRedirect("Optill/oprecord_edit.aspx")
End Sub

Protected Sub btnCancelSave_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    SetSessionValue("HackWorkaround", False)
    mpeSaveConfirmation.Enabled = False
    mpeSaveConfirmation.Hide()
    'do nothing and return to the screen.
End Sub

Best Answer

Your issue is here:

<ajax:ModalPopupExtender ID="mpeSaveConfirmation" runat="server" Enabled="False"

Protected Sub btnSaveAnyway_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    SetSessionValue("HackWorkaround", False)
    **mpeSaveConfirmation.Enabled = False**
    mpeSaveConfirmation.Hide()

Make it true in code behind. and sync hide show accordingly. Also i can see in your code at some places you are using Style="display:none". So if you want to display you need use HtmlStyleWriter.Display,"block". If you use Visible true false in that case it will not work. I mean to say, that where ever you are using visible true false, in codebehind you have to use similar. If you are using style, then in codebehind you have to use the same.

Related Topic