如何仅更新TimerUpdatePanel并阻止其他UpdatePanel刷新？

我正在仪表板中添加考勤功能，页面上还有包含月份、年份筛选工具的其他UpdatePanel。当Timer的Tick事件触发时，筛选工具的下拉选项会自动折叠，无法正常选择。需要实现仅更新TimerUpdatePanel，不刷新其他UpdatePanel的效果。

相关代码 #

ASPX页面代码 #

<asp:UpdatePanel ID="TimerUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <div class="row">
            <div class="offset-2 col-md-4">
                <div id="timer" class="bg-primary timer-div">
                    <div>
                        <h2 id="Timer_Time" runat="server">00:00:00</h2>
                        <h2 id="Timer_Day" runat="server">-------</h2>
                        <h2 id="Timer_Date" runat="server">00-00-0000</h2>
                    </div>
                </div>
            </div>
            <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
        </div>
        <div class="hr-line-dashed"></div>
        <div class="row">
            <div class="col-md-4 offset-5" style="padding-top: 12px; letter-spacing: 2px;">
                <span id="PunchMsg" runat="server"></span>
                <br />
                <span id="TimerOption" runat="server"></span>
            </div>
            <div class="col-md-3">
                <h2 id="stopWatch" runat="server"><span></span><span id="Hours" runat="server">00</span>:<span id="Minutes" runat="server">00</span>:<span id="Seconds" runat="server">00</span></h2>
                <asp:Button ID="PunchIN" Text="Punch In" runat="server" Visible="true" CssClass="btn btn-primary" OnClick="PunchIN_Click"></asp:Button>
                <asp:Button ID="PunchOut" Text="Punch Out" runat="server" Visible="false" CssClass="btn btn-warning" OnClick="PunchOut_Click"></asp:Button>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

注：补充了原始代码中未闭合的时间显示标签，确保HTML结构完整。

VB后台代码 #

Protected Sub Timer1_Tick(sender As Object, e As EventArgs)
    Dim CurrentDay = DateTime.Now.ToString("dddd")
    Dim CurrentDate = DateTime.Now.ToString("dd-MM-yyyy")
    Dim CurrentTime = DateTime.Now.ToString("H:mm tt")
    Timer_Day.InnerText = CurrentDay
    Timer_Date.InnerText = CurrentDate
    Timer_Time.InnerText = CurrentTime
    
    If PunchIN.Visible = False AndAlso PunchOut.Visible = True Then
        If Session("TimerStatement") <> "" Then
            Dim h = Val(Hours.InnerText)
            Dim m = Val(Minutes.InnerText)
            Dim s = Val(Seconds.InnerText)
            s += 1
            
            If s = 60 Then
                s = 0
                m = m + 1
            End If
            If m = 60 Then
                m = 0
                h = h + 1
            End If
            
            Hours.InnerText = h.ToString("00")
            Minutes.InnerText = m.ToString("00")
            Seconds.InnerText = s.ToString("00")
        Else
            TimerOption.InnerText = "Please select one of the below options first"
        End If
    End If
    
    TimerUpdatePanel.Update()
End Sub

解决方案 #

• 设置其他UpdatePanel的UpdateMode为Conditional
  确保页面上包含筛选工具的所有UpdatePanel，其UpdateMode属性都设置为Conditional。这样这些面板只会在自身触发器触发，或者手动调用Update()方法时才会更新，不会被Timer的异步回发影响。

• 移除不必要的手动更新调用
  当前TimerUpdatePanel的ChildrenAsTriggers已经设为true，且Timer是面板内的子控件，Tick事件触发时会自动触发面板的异步更新，无需手动调用TimerUpdatePanel.Update()，移除该调用可避免潜在的重复更新问题。

• 检查前端组件的初始化逻辑
  如果筛选工具使用了前端UI插件（如Bootstrap折叠、下拉选择插件等），异步回发后原DOM元素会被替换，插件绑定的事件会失效，导致下拉/折叠功能异常。可以通过ASP.NET的pageLoad函数在每次异步回发后重新初始化插件：

  function pageLoad(sender, args) {
      // 根据实际使用的插件调整初始化代码
      $('.collapse').collapse(); // 重新初始化折叠组件
      $('.select2').select2(); // 重新初始化Select2下拉
  }
  

  ScriptManager会在每次异步回发完成后自动调用pageLoad函数，确保前端组件功能正常。

• 确认Timer未被其他面板引用
  检查其他UpdatePanel的Triggers配置，确保没有将Timer1设置为它们的AsyncPostBackTrigger，避免触发其他面板的更新。

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