ASP计时器阻止UI？

问题描述 投票：0回答：1

我有一个相当简单的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>

并插入我的标签，显示内容模板中的时间并在tick事件上更新它。工作得很好，除了阻止我的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>

c# asp.net telerik
1个回答
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中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.