Loading控件--防止用户反复提交 [源码+Demo]

 Web系统中经常会遇到这样的情况：页面提交很慢，用户耐心受到挑战就开始摧残页面上的按钮，反复点击反而搞得更慢。前两天就遇到这样一个问题，用户要进行大数据量的导出操作，这个服务器端需要比较长的时间处理，于是很容易出现用户等得不耐烦就反复点击导出按钮的情况。

       下面是页面代码的一个示例：

<a></a>

 1 &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;

 2 

 3 &lt;%@ Register Assembly="KingWebControlToolkit" Namespace="KingWebControlToolkit" TagPrefix="King" %&gt;

 4 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

 5 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

 6 &lt;head runat="server"&gt;

 7     &lt;title&gt;Untitled Page&lt;/title&gt;

 8 &lt;/head&gt;

 9 &lt;body&gt;

10     &lt;form id="form1" runat="server"&gt;

11         &lt;div&gt;

12             &lt;King:LoadingControl runat="server"&gt;

13                 &lt;ContentTemplate&gt;

14                     &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;

15                 &lt;/ContentTemplate&gt;

16                 &lt;ProgressTemplate&gt;

17                     &lt;img src="loader.gif" /&gt;Loading

18                 &lt;/ProgressTemplate&gt;

19             &lt;/King:LoadingControl&gt;

20         &lt;/div&gt;

21     &lt;/form&gt;

22 &lt;/body&gt;

23 &lt;/html&gt;

24 

       为了能看到Loading的效果我们在Page_Load中使用System.Threading.Thread.Sleep(3000);做延迟。

页面render出来的代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;&lt;title&gt;

    Untitled Page

&lt;/title&gt;&lt;/head&gt;

&lt;body&gt;

    &lt;form name="form1" method="post" action="default.aspx" id="form1"&gt;

&lt;div&gt;

&lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMTA5NTM4NzBkZLrTZqXsuouOmVoeCXorqE2igxmz" /&gt;

&lt;/div&gt;

        &lt;div&gt;

            &lt;span&gt;&lt;span onclick="javascript:this.style.display='none';document.getElementById('progress').style.display='';" id="content"&gt;

                    &lt;input type="submit" name="ctl02$Button1" value="Button" id="ctl02_Button1" /&gt;

                &lt;/span&gt;&lt;span id="progress" style="display:none"&gt;

                    &lt;img src="loader.gif" /&gt;Loading

                &lt;/span&gt;&lt;/span&gt;

        &lt;/div&gt;

    &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLd8PGLAgLbhbjtDTVN73GhBUNr1cM8hkjWUdhLBytV" /&gt;

&lt;/div&gt;&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;

控件实现

    其实就两个要点：

  控件要支持两个模板一个是ContentTemplate这个是要隐藏部分的模板，一个是Progress模板用来放Loading的提示信息

添加javascript脚本来实现隐藏，这个利用事件传递的原理可以方便的实现

这个控件超简单直接贴代码了，控件源代码如下：

  1

using System;

  2

using System.ComponentModel;

  3

using System.Drawing;

  4

using System.Security.Permissions;

  5

using System.Web;

  6

using System.Web.UI;

  7

using System.Web.UI.WebControls;

  8

  9

namespace KingWebControlToolkit

 10

{

 11

    [

 12

    AspNetHostingPermission(SecurityAction.InheritanceDemand,

 13

        Level = AspNetHostingPermissionLevel.Minimal),

 14

    AspNetHostingPermission(SecurityAction.Demand,

 15

 16

    ToolboxData(

 17

        "&lt;{0}:LoadingControl runat=\"server\"&gt; &lt;/{0}:LoadingControl&gt;"),

 18

    ]

 19

    public class LoadingControl : CompositeControl

 20

    {

 21

        private ITemplate contentTempalte;

 22

        private ITemplate progressTemplate;

 23

 24

        private TemplateContainer contentContainer;

 25

        private TemplateContainer progressContainer;

 26

        [

 27

        Browsable(false),

 28

        DesignerSerializationVisibility(

 29

            DesignerSerializationVisibility.Hidden)

 30

        ]

 31

        public TemplateContainer Owner

 32

        {

 33

            get

 34

            {

 35

                return contentContainer;

 36

            }

 37

        }

 38

 39

 40

 41

        PersistenceMode(PersistenceMode.InnerProperty),

 42

        DefaultValue(typeof(ITemplate), ""),

 43

        Description("Control template"),

 44

        TemplateContainer(typeof(LoadingControl ))

 45

 46

        public virtual ITemplate ContentTemplate

 47

 48

 49

 50

                return contentTempalte;

 51

 52

            set

 53

 54

                contentTempalte = value;

 55

 56

 57

 58

 59

 60

 61

 62

 63

        TemplateContainer(typeof(LoadingControl))

 64

 65

        public virtual ITemplate ProgressTemplate

 66

 67

 68

 69

                return progressTemplate;

 70

 71

 72

 73

                progressTemplate = value;

 74

 75

 76

 77

        protected override void CreateChildControls()

 78

 79

            Controls.Clear();

 80

            contentContainer = new TemplateContainer();

 81

            progressContainer = new TemplateContainer();

 82

            contentContainer.Attributes["onclick"] = "javascript:this.style.display='none';document.getElementById('progress').style.display='';";

 83

            contentContainer.Attributes["id"] = "content";

 84

            progressContainer.Attributes["id"] = "progress";

 85

            progressContainer.Attributes["style"] = "display:none";

 86

            ITemplate temp = contentTempalte;

 87

            if (temp == null)

 88

 89

                temp = new DefaultTemplate();

 90

 91

            temp.InstantiateIn(contentContainer);

 92

 93

            temp = progressTemplate;

 94

            temp.InstantiateIn(progressContainer);

 95

            this.Controls.Add(contentContainer);

 96

            this.Controls.Add(progressContainer);

 97

 98

    }

 99

100

101

    ToolboxItem(false)

102

103

    public class TemplateContainer : WebControl

104

105

106

107

    DefaultTemplate

117

}

118