Web系统中经常会遇到这样的情况:页面提交很慢,用户耐心受到挑战就开始摧残页面上的按钮,反复点击反而搞得更慢。前两天就遇到这样一个问题,用户要进行大数据量的导出操作,这个服务器端需要比较长的时间处理,于是很容易出现用户等得不耐烦就反复点击导出按钮的情况。
比较简单的解决方法就是在用户进行了点击操作将按钮之类的东西隐藏掉,国外的一位同行写了一个对button的扩展:pleasewaitButton 源文档 <http://www.codeproject.com/KB/webforms/PleaseWaitButton.aspx> 就是实现了这个效果。但是这个控件是有局限的,有时候要隐藏的不只是按钮。我觉得可以学习UpdatePanel的“包起来”一个区域的方式以获得更大的灵活性。
下面是页面代码的一个示例:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="KingWebControlToolkit" Namespace="KingWebControlToolkit" TagPrefix="King" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<King:LoadingControl runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
<ProgressTemplate>
<img src="loader.gif?http://www.xvna.com" />Loading
</ProgressTemplate>
</King:LoadingControl>
</div>
</form>
</body>
</html>
为了能看到Loading的效果我们在Page_Load中使用System.Threading.Thread.Sleep(3000);做延迟。
页面render出来的代码如下:
<!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><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMTA5NTM4NzBkZLrTZqXsuouOmVoeCXorqE2igxmz" />
</div>
<div>
<span><span onclick="javascript:this.style.display='none';document.getElementById('progress').style.display='';" id="content">
<input type="submit" name="ctl02$Button1" value="Button" id="ctl02_Button1" />
</span><span id="progress" style="display:none">
<img src="loader.gif?http://www.xvna.com" />Loading
</span></span>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLd8PGLAgLbhbjtDTVN73GhBUNr1cM8hkjWUdhLBytV" />
</div></form>
</body>
</html>