C# ASP定时器阻塞用户界面?
我有一个相当简单的asp.net页面,有几个按钮和文本框等,它们的可见性根据查询结果进行切换。一切正常。但我收到一个请求,要求嵌入一个连续显示服务器时间的时钟(这本质上是一个timeclock web应用程序)。我在线学习了一些教程和示例,无论我做什么,计时器似乎都会阻止按钮单击事件或文本框可见性等 例如,我在另一个SO线程上发现:C# ASP定时器阻塞用户界面?,c#,asp.net,telerik,C#,Asp.net,Telerik,我有一个相当简单的asp.net页面,有几个按钮和文本框等,它们的可见性根据查询结果进行切换。一切正常。但我收到一个请求,要求嵌入一个连续显示服务器时间的时钟(这本质上是一个timeclock web应用程序)。我在线学习了一些教程和示例,无论我做什么,计时器似乎都会阻止按钮单击事件或文本框可见性等 例如,我在另一个SO线程上发现: <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<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,这是个问题
编辑以添加页面标记:
<%@ 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>
您可以按照以下步骤解决此问题:
1。确保没有隐藏的脚本错误。有时,脚本错误会导致UI控件停止运行
2.AJAX的好处是部分更新。确保计时器仅更新页面的相关部分,例如标签,而不更新其他内容
3。如果在
标记中有脚本,请将它们转移到脚本管理器定义之后的
4.将计时器包装在asp:面板中并使用此面板。此外,还可以添加面板以更新自身:
<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>
5.有用提示-如果用户已滚动页面上的某个位置,并且此时出现AJAX请求,则滚动位置将重置并自动滚动到页面顶部。要防止出现这种情况,您可以使用以下方法:
var prm=Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(函数(){
prm.\u scrollPosition=null;
});
6.如果您在代码背后动态添加了自定义脚本,您可以检查并查看如何在AJAX请求后重新创建这些脚本
7。将脚本内容包装在一个文件中。如果您真的只是想显示时间,为什么不使用JavaScript呢?服务器控件对于此类功能来说太重了,因为时间戳是从服务器获取的,它们希望显示将要记录的时间…谢谢,但同样的事情。。。如果您愿意看一看,我添加了我的页面标记。我在网上尝试了你的建议以及许多其他例子,它们都表现出相同的行为(
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString() + "." + DateTime.Now.Millisecond;
}
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function() {
prm._scrollPosition = null;
});
</script>