Как извлечь данные из SQL и отобразить в ModalPopup

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

Таким образом, вам не нужно ничего менять, кроме как изменить свой обработчик для вашего выбора календаря следующим образом:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    // Your original code here, plus at the end:
    ModalPopupExtender1.Show();
}