如何从SQL中检索数据并在ModalPopup中显示
本文关键字：ModalPopup 显示 数据 检索 SQL | 更新日期: 2023-09-27 18:08:44
我试图在单击日历控件时在模式弹出窗口中查看数据。我使用了以下代码：
<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时，数据显示在面板中。有人能在这方面帮我吗。
首先，我将解释为什么它在没有ModalPopupExtender的情况下工作，而不使用它。ModalPopupExtender注册一个javascript事件来获取Calendar1的SelectionChanged，然后显示Panel1。这一切都发生在客户端，没有回发，因此Panel1的字段值从未更改。
删除ModalPopupExtender允许在回发时正常处理Calendar1.SelectionChanged。您想要的是一个解决方案，它既将Panel1放入弹出窗口，又执行异步回发以将新值放入Panel1。我认为这通常可以通过设置服务并为ModalPopupExtender的Dynamic...属性填充适当的值来完成。然而，一种更简单的方法，使用您已经拥有的一切，就是使用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();
}