ASP 计时器阻塞用户界面？答案

【问题标题】：ASP timer blocking UI?ASP 计时器阻塞用户界面？
【发布时间】：2019-03-29 16:11:27
【问题描述】：

我有一个相当简单的 asp.net 页面，有几个按钮和文本框等，其可见性会根据查询结果进行切换。一切正常。但我收到了一个嵌入时钟的请求，该时钟连续显示服务器时间（这本质上是一个时钟网络应用程序）。我已经在线学习了几个教程和示例，无论我做什么，计时器似乎都会阻止按钮单击事件或文本框可见性等。

例如，我在另一个 SO 线程上发现了这个：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <Triggers>
        <asp:AsyncPostBackTrigger  ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate> 
        <!-- your content here, no timer -->
    </ContentTemplate> 
</asp:UpdatePanel> 

<asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick">
</asp:Timer>

并插入了我的标签，它显示了内容模板中的时间并在滴答事件上更新了它。效果很好，除了屏蔽了我的 UI。

最近的尝试直接取自 Telerik 演示： https://demos.telerik.com/aspnet-ajax/ajaxmanager/application-scenarios/ajaxify-timer/defaultcs.aspx

计时器本身工作正常，只是对我的 UI 的干扰是个问题。

编辑以添加页面标记：

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <link id="Link1" href="~/Styles/Site.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
</head>
<body>
    <form id="form1" runat="server" enableviewstate="True">

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" 
                Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" 
                Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" 
                Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" 
                Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadButton1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                    <telerik:AjaxUpdatedControl ControlID="InButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="OutButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="EndBreakButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="MessagePlaceholder" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="InBtn">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="IDtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="PINtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                      <telerik:AjaxUpdatedControl ControlID="InButtonPlaceholder" />                    
                    <telerik:AjaxUpdatedControl ControlID="OutButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="EndBreakButtonPlaceholder" />                    
                    <telerik:AjaxUpdatedControl ControlID="AlertPlaceholder" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="OutBtn">
                <UpdatedControls>

                      <telerik:AjaxUpdatedControl ControlID="IDtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="PINtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                      <telerik:AjaxUpdatedControl ControlID="InButtonPlaceholder" />                  
                      <telerik:AjaxUpdatedControl ControlID="OutButtonPlaceholder" />
                      <telerik:AjaxUpdatedControl ControlID="EndBreakButtonPlaceholder" />

                      <telerik:AjaxUpdatedControl ControlID="AlertPlaceholder" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="StartBreakBtn">
                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="IDtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="PINtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                    <telerik:AjaxUpdatedControl ControlID="InButtonPlaceholder" />
                      <telerik:AjaxUpdatedControl ControlID="OutButtonPlaceholder" />

                    <telerik:AjaxUpdatedControl ControlID="EndBreakButtonPlaceholder" />

                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="EndBreakBtn">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="IDtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="PINtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                    <telerik:AjaxUpdatedControl ControlID="InButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="OutButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="EndBreakButtonPlaceholder" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfirmBtn">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="IDtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="PINtextbox" />
                    <telerik:AjaxUpdatedControl ControlID="InButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="OutButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="EndBreakButtonPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="MessagePlaceholder" />
                </UpdatedControls>
            </telerik:AjaxSetting>          
            <telerik:AjaxSetting AjaxControlID="CloseNoticeButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="AlertPlaceholder" />
                </UpdatedControls>
            </telerik:AjaxSetting>          
        </AjaxSettings>
    </telerik:RadAjaxManager>

   <div style="text-align:center">
        <asp:TextBox ID="IDtextbox" runat="server" TextMode="Password" 
            Font-Size="Large"></asp:TextBox>
        <asp:Label ID="Label2" runat="server" Text="Enter Employee Number"></asp:Label>
           <asp:TextBox ID="PINtextbox" runat="server" TextMode="Password" 
            Font-Size="Large" MaxLength="4" Width="120px"></asp:TextBox>
        <asp:Label ID="Label3" runat="server" Text="Enter PIN"></asp:Label><br />
        <br />


        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
            ControlToValidate="PINtextbox" ErrorMessage="Please Enter Only Numbers" 
            ForeColor="Red" ValidationExpression="^\d+$" Display="Dynamic" 
            ValidationGroup="1"></asp:RegularExpressionValidator>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
            ControlToValidate="IDtextbox" ErrorMessage="Please Enter Only Numbers" 
            ForeColor="Red" ValidationExpression="^\d+$" Display="Dynamic" 
            ValidationGroup="1"></asp:RegularExpressionValidator>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Log In" 
            onclick="RadButton1_Click" Height="75px" Width="200px" 
            Font-Size="XX-Large" ValidationGroup="1" >
        </telerik:RadButton> 

    </div>

    <asp:PlaceHolder ID="InButtonPlaceholder" runat="server">
    <div style="text-align:center">
        <telerik:RadButton ID="InBtn" runat="server" Text="Punch In"   onclick="InBtn_Click" Height="75px" Width="200px" 
            Font-Size="XX-Large" >

        </telerik:RadButton>
        </div>
    </asp:PlaceHolder>
    <asp:PlaceHolder ID="OutButtonPlaceholder" runat="server" >
    <div style="text-align:center">
        <telerik:RadButton ID="OutBtn" runat="server" Text="Punch Out"   onclick="OutBtn_Click" Height="75px" Width="200px" 
            Font-Size="XX-Large" CssClass="LargeButton" >
         </telerik:RadButton>
         <telerik:RadButton ID="StartBreakBtn" runat="server" Text="Start Break"   onclick="StartBreakBtn_Click" Height="75px" Width="200px" 
            Font-Size="XX-Large" CssClass="LargeButton" >       
        </telerik:RadButton>
        </div>
    </asp:PlaceHolder>
    <asp:PlaceHolder ID="EndBreakButtonPlaceholder" runat="server" 
       >
    <div style="text-align:center">
        <telerik:RadButton ID="EndBreakBtn" runat="server" Text="End Break"   onclick="EndBreakBtn_Click" Height="75px" Width="200px" 
            Font-Size="XX-Large" >
         </telerik:RadButton> 
         </div>       
    </asp:PlaceHolder><br /><br />
      <asp:PlaceHolder ID="MessagePlaceholder" runat="server">
      <div style="text-align:center; border:medium solid red;padding:20px">
      <div id="div1" runat="server"></div>
        <telerik:RadButton ID="ConfirmBtn" runat="server" Text="I have read this message"   onclick="ConfirmBtn_Click" Height="75px" Width="550px" 
            Font-Size="XX-Large"  AutoPostBack="True">
         </telerik:RadButton>
         </div>        
    </asp:PlaceHolder >
    <asp:PlaceHolder ID="AlertPlaceholder" runat="server">
      <div style="text-align:center; border:medium solid red;padding:20px">
        <asp:Label ID="Label1" runat="server" Text="Note!  This is outside your scheduled working hours and may be subject to review by management!"></asp:Label>
        <br />
        <br />
          <telerik:RadButton ID="CloseNoticeButton" runat="server" Text="OK" Height="75px" Width="200px" 
            Font-Size="XX-Large"   onclick="CloseNoticeButton_Click" CausesValidation="False">
          </telerik:RadButton>
        </div></asp:PlaceHolder>
    <br />
    <br />
    <div style="text-align:center">
   <img alt="" src="Images/LgCentralLogo.png" "width:250px height:auto" 
            width="250px" />
            </div>
    </form>

【问题讨论】：

如果你真的只是想显示时间，为什么不用 JavaScript 来做呢？服务器控件对于这种功能 IMO 来说太重了
因为时间戳是从服务器获取的，他们想显示时间，因为它将被记录......

标签： c# asp.net telerik

【解决方案1】：

您可以按照以下步骤解决此问题：

1. 确保没有隐藏的脚本错误。有时，脚本错误会导致 UI 控件停止运行。 Details

2. AJAX 的好处是部分更新。确保计时器仅更新页面的相关部分，例如标签，仅此而已。

3.如果<head>标签中有脚本，请在脚本管理器定义后将它们转移到<body>。

4. 将计时器包装在一个 asp:Panel 中并使用此面板。此外，您可以添加面板以更新自身：

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:Panel ID="Panel1" runat="server">
            <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick"></asp:Timer>
        </asp:Panel>
        <asp:Label ID="Label1" runat="server" Text="Output"></asp:Label>

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString() + "." + DateTime.Now.Millisecond;
    }

5. 有用的提示 - 如果用户在页面上的某处滚动并且此时发生 AJAX 请求，滚动位置将重置并自动滚动到页面顶部。为了防止这种情况，您可以使用这种方法：Source

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_beginRequest(function() {
        prm._scrollPosition = null;
    });
</script>

6.如果您在代码隐藏中动态添加了自定义脚本，您可以查看Demo 1 和Demo 2，了解如何在 AJAX 请求后重新创建这些脚本。

7. 将您的脚本内容包装在 RadScriptBlock 中。

【讨论】：

谢谢你，但同样的事情......如果你想看看，我添加了我的页面标记。我在网上尝试了您的建议以及许多其他示例，它们都表现出相同的行为。 :(