在WebForm中实现发送验证码，点击按钮后按钮禁用60秒的效果

在实现代码之前，先思考一个问题：

同样点击一个按钮调用后台，WebForm与小程序有什么区别？

WebForm 是重量级的，服务器控件的Button，执行时会将整个页面提交到后台，执行完成之后，服务器会将整个页面再重新加载一次。

为什么我们看到重新加载的页面，控件的值没有变化？那只是因为在整个页面提交时，保存了控件的值，重新加载时，重新渲染出来了而已。

相当于：我们做菜，想买瓶酱油，出门时把锅碗瓢盆都带在身上，买完酱油，锅碗瓢盆重新放回原位。

所以：

第一，这个消耗是比较大的；

第二，点击按钮之后的页面，其实已经不是我们前面的页面，是重新加载出来的页面。

说完WebForm, 那小程序呢？

小程序其实相当于WebForm用 Ajax 方式来实现功能，没有"服务器控件"的概念，所以非常轻量，原理完全不同。

回到原来的需求上来：

在WebForm中实现发送验证码，点击按钮后按钮禁用60秒的效果

应该怎么做呢？

两种方式：

1、采用Ajax 方式实现，这个思路比较简单，但写代码要麻烦一点，需要写ajax 相关的代码。

2、采用WebForm原生的服务器控件来实现。

我们想实现的，是第2种方式。

第2种方式，禁用按钮60秒的效果应该在哪个阶段来实现呢？

如果采用类似 OnClientClick 的方式，来实现，则必须前端执行完，才可以执行后端。而且即使能实现，效果也不好。

如果60秒走完才执行后端，白白浪费了时间。

如果60秒没走完就执行了后端，60秒效果没有达到。

所以，必须换思路，在后端执行完之后再来执行60秒效果就可以了。

因为按钮点击完，页面会重新加载一次，我们在前端利用这个机会把60秒的效果展现出来就可以了。

思路清晰，要做就容易了：

.aspx 代码：

复制代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestSmsCode.aspx.cs" Inherits="SWSchool.Mobile.TestSmsCode" %>
 
<!DOCTYPE html>
 
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var seconds = parseInt($('#<%= hfSeconds.ClientID %>').val());
            if (seconds > 0) {
                startCountdown(seconds);
            }
            function startCountdown(seconds) {
                var btnSendSms = $('#<%= btnSendSms.ClientID %>');
                btnSendSms.prop('disabled', true);
                var interval = setInterval(function () {
                    if (seconds > 0) {
                        btnSendSms.val('重新发送(' + seconds + 's)');
                        seconds--;
                    } else {
                        clearInterval(interval);
                        btnSendSms.prop('disabled', false);
                        btnSendSms.val('发送验证码');
                        $('#<%= hfSeconds.ClientID %>').val('0');
                    }
                }, 1000);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtMobile" runat="server" Width="200px" MaxLength="11" placeholder="请输入手机号"></asp:TextBox>
            <asp:Button ID="btnSendSms" runat="server" Text="发送验证码" OnClick="btnSendSms_Click" />
            <asp:HiddenField ID="hfSeconds" runat="server" Value="0" />
            <br /><br />
            <asp:TextBox ID="txtSmsCode" runat="server" Width="200px" MaxLength="6" placeholder="请输入验证码"></asp:TextBox>
            <asp:Button ID="btnVerifySms" runat="server" Text="验证验证码" OnClick="btnVerifySms_Click" />
            <br /><br />
            <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
        </div>
    </form>
</body>
</html>

.aspx.cs 代码：

cs 复制代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace SWSchool.Mobile
{
    public partial class TestSmsCode : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void btnSendSms_Click(object sender, EventArgs e)
        {
            //todo : implement SMS sending logic here
            this.hfSeconds.Value = "60";
            Response.Write("<script>alert('SMS sent successfully!');</script>");
        }
 
        protected void btnVerifySms_Click(object sender, EventArgs e)
        {
 
        }
    }
}