Web系统中经常会遇到这样的情况页面提交很慢用户耐心受到挑战就开始摧残页面上的按钮反复点击反而搞得更慢前两天就遇到这样一个问题用户要进行大数据量的导出操作这个服务器端需要比较长的时间处理于是很容易出现用户等得不耐烦就反复点击导出按钮的情况
比较简单的解决方法就是在用户进行了点击操作将按钮之类的东西隐藏掉国外的一位同行写了一个对button的扩展pleasewaitButton 源文档 <; 就是实现了这个效果但是这个控件是有局限的有时候要隐藏的不只是按钮我觉得可以学习UpdatePanel的包起来一个区域的方式以获得更大的灵活性
下面是页面代码的一个示例 <%@ Page Language=C# AutoEventWireup=true CodeFile=Defaultaspxcs Inherits=_Default %>
<%@ Register Assembly=KingWebControlToolkit Namespace=KingWebControlToolkit TagPrefix=King %>
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head runat=server>
<title>Untitled Page</title>
</head>
<body>
<form id=form runat=server>
<div>
<King:LoadingControl runat=server>
<ContentTemplate>
<asp:Button ID=Button runat=server Text=Button />
</ContentTemplate>
<ProgressTemplate>
<img src=loadergif />Loading
</ProgressTemplate>
</King:LoadingControl>
</div>
</form>
</body>
</html>
为了能看到Loading的效果我们在Page_Load中使用SystemThreadingThreadSleep();做延迟
页面render出来的代码如下 <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head><title>
Untitled Page
</title></head>
<body>
<form name=form method=post action=defaultaspx id=form>
<div>
<input type=hidden name=__VIEWSTATE id=__VIEWSTATE value=/wEPDwULLTEzMTANTMNzBkZLrTZqXsuouOmVoeCXorqEigxmz />
</div>
<div>
<span><span onclick=javascript:thisstyledisplay=none;documentgetElementById(progress)styledisplay=; id=content>
<input type=submit name=ctl$Button value=Button id=ctl_Button />
</span><span id=progress >
<img src=loadergif />Loading
</span></span>
</div>
<div>
<input type=hidden name=__EVENTVALIDATION id=__EVENTVALIDATION value=/wEWAgLdPGLAgLbhbjtDTVNGhBUNrcMhkjWUdhLBytV />
</div></form>
</body>
</html>
控件实现
其实就两个要点
控件要支持两个模板一个是ContentTemplate这个是要隐藏部分的模板一个是Progress模板用来放Loading的提示信息添加javascript脚本来实现隐藏这个利用事件传递的原理可以方便的实现这个控件超简单直接贴代码了控件源代码如下
using System;
using SystemComponentModel;
using SystemDrawing;
using SystemSecurityPermissions;
using SystemWeb;
using SystemWebUI;
using SystemWebUIWebControls;
namespace KingWebControlToolkit
{
[
AspNetHostingPermission(SecurityActionInheritanceDemand
Level = AspNetHostingPermissionLevelMinimal)
AspNetHostingPermission(SecurityActionDemand
Level = AspNetHostingPermissionLevelMinimal)
ToolboxData(
<{}:LoadingControl runat=\server\> </{}:LoadingControl>)
]
public class LoadingControl : CompositeControl
{
private ITemplate contentTempalte;
private ITemplate progressTemplate;
private TemplateContainer contentContainer;
private TemplateContainer progressContainer;
[
Browsable(false)
DesignerSerializationVisibility(
DesignerSerializationVisibilityHidden)
]
public TemplateContainer Owner
{
get
{
return contentContainer;
}
}
[
Browsable(false)
PersistenceMode(PersistenceModeInnerProperty)
DefaultValue(typeof(ITemplate) )
Description(Control template)
TemplateContainer(typeof(LoadingControl ))
]
public virtual ITemplate ContentTemplate
{
get
{
return contentTempalte;
}
set
{
contentTempalte = value;
}
}
[
Browsable(false)
PersistenceMode(PersistenceModeInnerProperty)
DefaultValue(typeof(ITemplate) )
Description(Control template)
TemplateContainer(typeof(LoadingControl))
]
public virtual ITemplate ProgressTemplate
{
get
{
return progressTemplate;
}
set
{
progressTemplate = value;
}
}
protected override void CreateChildControls()
{
ControlsClear();
contentContainer = new TemplateContainer();
progressContainer = new TemplateContainer();
contentContainerAttributes[onclick] = javascript:thisstyledisplay=none;documentgetElementById(progress)styledisplay=;;
contentContainerAttributes[id] = content;
progressContainerAttributes[id] = progress;
progressContainerAttributes[style] = display:none;
ITemplate temp = contentTempalte;
if (temp == null)
{
temp = new DefaultTemplate();
}
tempInstantiateIn(contentContainer);
temp = progressTemplate;
tempInstantiateIn(progressContainer);
thisControlsAdd(contentContainer);
thisControlsAdd(progressContainer);
}
}
[
ToolboxItem(false)
]
public class TemplateContainer : WebControl
{
}
DefaultTemplate
}
