如何阻止弹窗中的Calendar控件点击时触发Postback？

核心思路：阻止不必要的整页PostBack #

不管弹窗加载同页还是跨页日历，核心都是要避免日历操作触发整页刷新，要么用纯前端逻辑处理日期选择，要么让回发仅在弹窗内部局部执行，确保弹窗始终保持显示，直到用户主动点击【OK】。

方案1：用纯前端日历控件（推荐，彻底避免回发） #

直接换掉服务器端的Calendar控件，用前端日历组件（比如jQuery UI Datepicker、Flatpickr、Element UI DatePicker等），所有操作在客户端完成，完全不会触发PostBack：

• 实现步骤：
  1. 在弹窗div里引入对应前端库的JS和CSS文件
  2. 初始化日历组件，绑定到输入框或直接监听日期选中事件
  3. 用户选好日期后，点击【OK】时再通过AJAX把日期提交到服务器（如果需要）
• 示例代码（以jQuery UI Datepicker为例）：

  <!-- 弹窗容器 -->
  <div id="datePopup" style="display: none; padding: 20px;">
    <label>选择日期：</label>
    <input type="text" id="selectedDate">
    <div style="margin-top: 15px;">
      <button id="okBtn">确定</button>
    </div>
  </div>
  
  <script>
    // 初始化弹窗（用jQuery UI Dialog）
    $("#datePopup").dialog({
      autoOpen: false,
      modal: true,
      title: "选择日期"
    });
  
    // 初始化日历控件
    $("#selectedDate").datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText) {
        // 选中日期后仅在客户端记录，不触发回发
        console.log("已选中日期：" + dateText);
      }
    });
  
    // OK按钮点击事件：提交日期并关闭弹窗
    $("#okBtn").click(function() {
      var date = $("#selectedDate").val();
      if (date) {
        // 用AJAX提交到服务器
        $.post("/api/save-date", { selectedDate: date }, function(res) {
          // 提交成功后关闭弹窗
          $("#datePopup").dialog("close");
        });
      }
    });
  </script>
  

方案2：保留服务器端Calendar控件（处理局部回发） #

如果必须用ASP.NET的服务器端Calendar控件，就把它放进UpdatePanel里，让日历的回发仅局部更新弹窗内的内容，不刷新整页：

• 示例代码：

  <div id="datePopup" style="display: none; border: 1px solid #ccc; padding: 15px;">
    <asp:UpdatePanel ID="CalendarUpdatePanel" runat="server">
      <ContentTemplate>
        <asp:Calendar ID="FlightCalendar" runat="server" 
                      OnSelectionChanged="FlightCalendar_SelectionChanged">
        </asp:Calendar>
        <asp:HiddenField ID="HiddenSelectedDate" runat="server" />
      </ContentTemplate>
      <Triggers>
        <asp:AsyncPostBackTrigger ControlID="FlightCalendar" EventName="SelectionChanged" />
      </Triggers>
    </asp:UpdatePanel>
    <asp:Button ID="OkBtn" runat="server" Text="OK" OnClick="OkBtn_Click" 
                Style="margin-top: 10px;" />
  </div>
  

• 后台逻辑：
  在FlightCalendar_SelectionChanged事件里，把选中的日期存到隐藏字段里，不要关闭弹窗；点击OkBtn时，再读取隐藏字段的日期做业务处理，同时关闭弹窗。

方案3：弹窗加载跨页日历（iframe方式） #

如果弹窗是通过iframe加载其他页面的日历：

1. 确保iframe内的日历操作仅局部回发（同样用UpdatePanel处理）
2. 选好日期后，通过JS通信把日期传给父页面，再由父页面控制弹窗关闭：
   • 父页面JS：

     // 接收iframe传来的日期
     function getSelectedDate(date) {
       console.log("iframe传来的日期：" + date);
       // 可以把日期填充到页面的输入框里
       $("#flightDate").val(date);
     }
     
     // 关闭弹窗的方法
     function closeDatePopup() {
       $("#datePopup").hide();
     }
     

   • iframe页面的OK按钮点击事件：

     // 获取选中的日期（假设存在id为selectedDate的输入框）
     var date = document.getElementById("selectedDate").value;
     // 传给父页面
     window.parent.getSelectedDate(date);
     // 通知父页面关闭弹窗
     window.parent.closeDatePopup();
     

关键提醒 #

不管用哪种方案，核心都是不让日历的任何操作触发整页刷新，弹窗的生命周期完全由用户的【OK】点击行为控制，这样就能实现类似机票预订网站的交互效果。

内容的提问来源于stack exchange，提问作者DragonFire