从 ajax modalpopup 中更新 updatepanel

Question

我有一个带有 ajax modalpopup 控件的 aspx 页面。当我在 modalpopup 内单击按钮时，我需要更新页面上更新面板内的内容（而不是在 modalpopup 内）。

所以我可以在更新面板中显示更改，而无需刷新整个页面。我已经尝试在按钮单击事件后面的代码中使用 UpdatePanel.Update() 方法。但它什么也没做。

我现在正在做的是在按钮单击事件中刷新整个页面。

无论如何我可以更新更新面板以显示更改？

更新：这是相关aspx页面中的代码sn-p。

<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>

Answer 1

在您希望更新的更新面板中，您需要将模态 div 的按钮声明为异步回发触发器。

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

请记住，您的模态 div 不应该是更新面板的一部分。如果是，它会在回调后消失，因为 ContentTemplate 中的所有内容都将替换为来自服务器的内容。