Update updatepanel from within a ajax modalpopup

Question

I have a aspx page with a ajax modalpopup control in it. I need to update the contents inside an updatepanel on the page(not inside modalpopup) when I do a button click inside the modalpopup.

So I can display the changes inside the updatepanel without a full page refresh. I already tried using the UpdatePanel.Update() method inside the code behind of the button click event. But it does nothing.

What I'm doing right now is make a full page refresh inside the button click event.

there anyway that I can update the update panel to display the changes?

Update: Here is the code snippet in the related aspx page.

<div style="width: 400px; height: 200px; float: right;">
            <br />
            <asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateModel="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lblDate" runat="server"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnGetSelectedDate" />
                </Triggers>
            </asp:UpdatePanel>                
        </div>

        <ajaxToolkit:ModalPopupExtender ID="mpeUpcomingDaysOff" runat="server" PopupControlID="panelUpcomingDaysOff" BackgroundCssClass="modalBackground" DropShadow="true" Enabled="True" TargetControlID="btnChangeUpcomingDaysoff" OkControlID="btnGetSelectedDate" CancelControlID="btnUpcomingDaysOffCancel" OnOkScript="window.top.location.reload();">
        </ajaxToolkit:ModalPopupExtender>
        <asp:Panel ID="panelUpcomingDaysOff" runat="server" Height="400" Width="700" BackColor="White" Style="border-radius: 5px">
            <div style="height: 50px; width: 700px; padding-left: 100px; font-family: Verdana; padding-top: 5px">
                <div>
                    <span style="font-weight: bold">Upcoming Daysoff for
                        <asp:Label ID="lblProviderNameDaysOff" runat="server"></asp:Label></span><br />
                    <span style="font-size: 12px">Select vacation and any other days when this service provider will not be available for online appointments.</span>
                </div>
                <div style="height: 300px; padding-left: 150px">
                    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                        <ContentTemplate>                           
                            <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black"
                                Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" OnPreRender="Calendar1_PreRender" Width="330px"
                                OnSelectionChanged="Calendar1_SelectionChanged" OnLoad="Calendar1_Load" BorderStyle="Solid" CellSpacing="1" NextPrevFormat="ShortMonth">
                                <DayHeaderStyle Font-Bold="True"
                                    Height="8pt" Font-Size="8pt" ForeColor="#333333" />
                                <DayStyle BackColor="#CCCCCC"></DayStyle>

                                <NextPrevStyle Font-Size="8pt" ForeColor="White" Font-Bold="True" />
                                <OtherMonthDayStyle ForeColor="#999999" />
                                <SelectedDayStyle BackColor="#333399" ForeColor="White" />

                                <TitleStyle BackColor="#333399" Font-Bold="True"
                                    Font-Size="12pt" ForeColor="White" BorderStyle="Solid" Height="12pt" />
                                <TodayDayStyle BackColor="#999999" ForeColor="White" />
                            </asp:Calendar>
                    <br />
                    <asp:Button ID="btnGetSelectedDate" runat="server" Text="OK" OnClick="btnGetSelectedDate_Click" />
                    <asp:Button ID="btnUpcomingDaysOffCancel" runat="server" Text="Cancel" />
                    </ContentTemplate>
                    </asp:UpdatePanel>
                </div>

Schadensbegrenzer Schadensbegrenzer · Accepted Answer · 2014-06-28T11:28:55

In your update panel you wish to update you need to declare the button of your modal div as async postback trigger.

<asp:UpdatePanel ID="upPanel" runat="server" UpdateModel="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Id_Of_Button_In_ModalDiv" />
    </Triggers>
    <ContentTemplate>
        ....
    </ContentTemplate>
</asp:UpdatePanel>

Keep in mind though that your modal div should not be part of the update panel. If it is, it will disappear after call back as everything within the ContentTemplate will be replaced with content from server.

Update updatepanel from within a ajax modalpopup

1 Answers