Question

单击日历控件时，我尝试在模式弹出窗口中查看数据。我使用了以下代码：

<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="500px" OnDayRender="Calendar1_DayRender" Width="500px" OnSelectionChanged="Calendar1_SelectionChanged" CellPadding="1">
    <DayHeaderStyle BackColor="#99CCCC" Height="1px" ForeColor="#336666" />
    <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
    <OtherMonthDayStyle ForeColor="#999999" />
    <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
    <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
    <TitleStyle BackColor="#003399" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" BorderColor="#3366CC" BorderWidth="1px" Height="25px" />
    <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
    <WeekendDayStyle BackColor="#CCCCFF" />
</asp:Calendar>

</div>
<div>
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajax:ToolkitScriptManager>

    <asp:Panel ID="Panel1" runat="server" BackColor="#EAEAEA" BorderColor="White" BorderStyle="Solid" Height="200px" Width="300px" Direction="LeftToRight" Font-Names="Calibri" BackImageUrl="~/Image/index2.jpg">
        <div>
            <div style="height:120px; width:300px;">
                <table>
                    <tr>
                        <td><asp:Label ID="Label1" runat="server" Text="Date"></asp:Label></td>
                        <td><asp:Label ID="lbl_date" runat="server" Text="16-06-2014"></asp:Label></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="Label3" runat="server" Text="Time"></asp:Label></td>
                        <td><asp:Label ID="lbl_time" runat="server" Text="07:00 PM"></asp:Label></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="Label5" runat="server" Text="Day"></asp:Label></td>
                        <td><asp:Label ID="lbl_day" runat="server" Text="Monday"></asp:Label></td>
                    </tr>
                    <tr>
                        <td><asp:Label ID="lbl_msg" runat="server" Text="Staff Meeting"></asp:Label></td>
                    </tr>
                </table>
            </div>
            <div style="height:40px; width:300px">
                <asp:Image ID="Image_imgages" runat="server" Height="50px" Width="50px" Visible="false" />
            </div>
            <br />
            <asp:Button ID="btn_close" runat="server" Text="Close" />
        </div>
    </asp:Panel>

    <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Calendar1" DropShadow="True">

这里我的问题是模态弹出窗口没有从数据库中提取数据。当我删除ModalPopupExtender数据显示在面板中时。有人可以在这方面帮助我。

Answer 1

首先，我将解释为什么它在没有ModalPopupExtender的情况下有效并且无法使用它。 ModalPopupExtender注册javascript事件以获取SelectionChanged的{{1}}，然后显示Calendar1。这一切都发生在客户端，没有回发，因此Panel1的字段值永远不会改变。

在回发中删除Panel1允许ModalPopupExtender正常处理。你所追求的是一个解决方案，它将Calendar1.SelectionChanged放入弹出窗口并且执行异步回发以将新值放入Panel1。我认为这通常可以通过设置服务并填充Panel1 Dynamic...属性的正确值来完成。但是，使用您已经拥有的所有内容的一种更简单的方法就是使用ModalPopupExtender，正如我在此处所示：

UpdatePanel

通过这种方式，除了修改日历选择的处理程序之外，您无需更改任何其他内容：

<div>
    <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" DayNameFormat="Shortest" 
        Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="500px" OnDayRender="Calendar1_DayRender" Width="500px" 
        OnSelectionChanged="Calendar1_SelectionChanged" CellPadding="1">
        <DayHeaderStyle BackColor="#99CCCC" Height="1px" ForeColor="#336666" />
        <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
        <OtherMonthDayStyle ForeColor="#999999" />
        <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
        <TitleStyle BackColor="#003399" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" BorderColor="#3366CC" BorderWidth="1px" Height="25px" />
        <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
        <WeekendDayStyle BackColor="#CCCCFF" />
    </asp:Calendar>
</div>
<div>
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>

    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Always">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server" BackColor="#EAEAEA" BorderColor="White" BorderStyle="Solid" Height="200px" Width="300px" 
                Direction="LeftToRight" Font-Names="Calibri" BackImageUrl="~/Image/index2.jpg">
                <div style="height:120px; width:300px;">
                    <table>
                        <tr>
                            <td><asp:Label ID="Label1" runat="server" Text="Date"></asp:Label></td>
                            <td><asp:Label ID="lbl_date" runat="server" Text="16-06-2014"></asp:Label></td>
                        </tr>
                        <tr>
                            <td><asp:Label ID="Label3" runat="server" Text="Time"></asp:Label></td>
                            <td><asp:Label ID="lbl_time" runat="server" Text="07:00 PM"></asp:Label></td>
                        </tr>
                        <tr>
                            <td><asp:Label ID="Label5" runat="server" Text="Day"></asp:Label></td>
                            <td><asp:Label ID="lbl_day" runat="server" Text="Monday"></asp:Label></td>
                        </tr>
                        <tr>
                            <td><asp:Label ID="lbl_msg" runat="server" Text="Staff Meeting"></asp:Label></td>
                        </tr>
                    </table>
                </div>
                <div style="height:40px; width:300px">
                    <asp:Image ID="Image_imgages" runat="server" Height="50px" Width="50px" Visible="false" />
                </div>
                <br />
                <asp:Button ID="btn_close" runat="server" Text="Close" />
                <asp:HiddenField runat="server" ID="HiddenField1" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="HiddenField1"
                    CancelControlID="btn_close" DropShadow="True">
                </ajaxToolkit:ModalPopupExtender>
            </asp:Panel>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Calendar1" EventName="SelectionChanged" />
        </Triggers>
    </asp:UpdatePanel>
</div>

如何从SQL检索数据并在ModalPopup中显示

1 个答案: