爱学记
防止请求重复提交 Loading控件：防止用户反复提交
Loading控件：防止用户反复提交
Web系统中经常会遇到这样的情况 页面提交很慢 用户耐心受到挑战就开始摧残页面上的按钮 反复点击反而搞得更慢 前两天就遇到这样一个问题 用户要进行大数据量的导出操作 这个服务器端需要比较长的时间处理 于是很容易出现用户等得不耐烦就反复点击导出按钮的情况
比较简单的解决方法就是在用户进行了点击操作将按钮之类的东西隐藏掉 国外的一位同行写了一个对button的扩展 pleasewaitButton 源文档 <; 就是实现了这个效果 但是这个控件是有局限的 有时候要隐藏的不只是按钮 我觉得可以学习UpdatePanel的 包起来 一个区域的方式以获得更大的灵活性
下面是页面代码的一个示例 <%@ Page Language= C# AutoEventWireup= true CodeFile= Default aspx cs Inherits= _Default %> <%@ Register Assembly= KingWebControlToolkit Namespace= KingWebControlToolkit TagPrefix= King %> <!DOCTYPE PUBLIC //W C//DTD XHTML Transitional//EN transitional dtd > < 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= loader gif />Loading </ProgressTemplate> </King:LoadingControl> </div> </form> </body> </>
为了能看到Loading的效果我们在Page_Load中使用System Threading Thread Sleep( );做延迟
页面render出来的代码如下 <!DOCTYPE PUBLIC //W C//DTD XHTML Transitional//EN transitional dtd > < xmlns= > <head><title> Untitled Page </title></head> <body> <form name= form method= post action= default aspx id= form > <div> <input type= hidden name= __VIEWSTATE id= __VIEWSTATE value= /wEPDwULLTEzMTA NTM NzBkZLrTZqXsuouOmVoeCXorqE igxmz /> </div> <div> <span><span onclick= javascript:this style display= none ;document getElementById( progress ) style display= ; id= content > <input type= submit name= ctl $Button value= Button id= ctl _Button /> </span><span id= progress > <img src= loader gif />Loading </span></span> </div> <div> <input type= hidden name= __EVENTVALIDATION id= __EVENTVALIDATION value= /wEWAgLd PGLAgLbhbjtDTVN GhBUNr cM jWUdhLBytV /> </div></form> </body> </>
控件实现
其实就两个要点
控件要支持两个模板一个是ContentTemplate这个是要隐藏部分的模板 一个是Progress模板用来放Loading的提示信息添加javascript脚本来实现隐藏 这个利用事件传递的原理可以方便的实现这个控件超简单直接贴代码了 控件源代码如下
using System; using System ComponentModel; using System Drawing; using System Security Permissions; using System Web; using System Web UI; using System Web UI WebControls; namespace KingWebControlToolkit { [ AspNetHostingPermission(SecurityAction InheritanceDemand Level = AspNetHostingPermissionLevel Minimal) AspNetHostingPermission(SecurityAction Demand Level = AspNetHostingPermissionLevel Minimal) ToolboxData( <{ }:LoadingControl runat= server > </{ }:LoadingControl> ) ] public class LoadingControl : CompositeControl { private ITemplate contentTempalte; private ITemplate progressTemplate; private TemplateContainer contentContainer; private TemplateContainer progressContainer; [ Browsable(false) DesignerSerializationVisibility( DesignerSerializationVisibility Hidden) ] public TemplateContainer Owner { get { return contentContainer; } } [ Browsable(false) PersistenceMode(PersistenceMode InnerProperty) DefaultValue(typeof(ITemplate) ) Description( Control template ) TemplateContainer(typeof(LoadingControl )) ] public virtual ITemplate ContentTemplate { get { return contentTempalte; } set { contentTempalte = value; } } [ Browsable(false) PersistenceMode(PersistenceMode InnerProperty) DefaultValue(typeof(ITemplate) ) Description( Control template ) TemplateContainer(typeof(LoadingControl)) ] public virtual ITemplate ProgressTemplate { get { return progressTemplate; } set { progressTemplate = value; } } protected override void CreateChildControls() { Controls Clear(); contentContainer = new TemplateContainer(); progressContainer = new TemplateContainer(); contentContainer Attributes[ onclick ] = javascript:this style display= none ;document getElementById( progress ) style display= ; ; contentContainer Attributes[ id ] = content ; progressContainer Attributes[ id ] = progress ; progressContainer Attributes[ style ] = display:none ; ITemplate temp = contentTempalte; if (temp == null) { temp = new DefaultTemplate(); } temp InstantiateIn(contentContainer); temp = progressTemplate; temp InstantiateIn(progressContainer); this Controls Add(contentContainer); this Controls Add(progressContainer); } } [ ToolboxItem(false) ] public class TemplateContainer : WebControl { } DefaultTemplate }
lishixinzhi/Article/program/net/201311/13979
微信收款码
支付宝收款码