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은 SelectionChanged의 Calendar1을 잡기 위해 자바 스크립트 이벤트를 등록한 다음 Panel1을 표시합니다. 이 모든 것은 포스트 백이없는 클라이언트 측에서 발생하므로 Panel1의 필드 값은 절대로 바뀌지 않았습니다.

ModalPopupExtender을 제거하면 Calendar1.SelectionChanged을 다시 게시 할 때 정상적으로 처리 할 수 ​​있습니다. 당신이 쫓고있는 것은 Panel1을 팝업으로 넣은 과의 비동기 포스트 백을 수행하여 새로운 값을 Panel1에 넣는 것입니다. 나는 이것이 일반적으로 서비스를 설정하고 Dynamic... 속성의 적절한 값을 ModalPopupExtender으로 채워서 수행 할 수 있다고 생각합니다.

이런 식으로

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

, 당신이를 제외하고, 다른 작업을 변경할 필요가 없습니다 : 여기 보여 그러나, 당신은 이미 장소에서 모든 것을 사용하여 훨씬 더 간단한 방법은, UpdatePanel를 사용하는 단지입니다 귀하의 캘린더 선택에 대한 처리기를 다음과 같이 수정하십시오.

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