知识大全 一步步打造防止重复提交按钮

Posted 知

篇首语：只要持续地努力，不懈地奋斗，就没有征服不了的东西。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 一步步打造防止重复提交按钮相关的知识，希望对你有一定的参考价值。

    首先说说防止重复提交按钮是啥东西     我们在访问有的网站 输入表单完成以后 单击提交按钮进行提交以后 提交按钮就会变为灰色 用户不能再单击第二次 直到重新加载页面或者跳转 这样 可以一定程度上防止用户重复提交导致应用程序上逻辑错误 有朋友说 这个按钮完全可以用js来做 是的 不过当你需要大量这种按钮时 是否为每一个都去编程而不封装一个呢？    另外 为了增加其功能性 我们除了让他有防止重复提交的功能以外 还可以给他弹出提示框 就像单击删除按钮时 用户会受到一个提示再次确认是否真的删除     好 接下来 第一步 知识储备     我们知道 要防止重复提交 要在客户端设法使用户单击一次以后按钮变灰 这种客户端行为显然只能借助js代码来完成 服务器端运行的ASP NET是做不到的 那要让客户端用户单击按钮后立即收到一条再次确认消息 在确认之前不会提交到服务器 也需要js代码 因此 我们基本的丝路就是在页面加载按钮时 一并把所需的js代码发送到客户端去 而该按钮都是适用js脚本 因此不影响服务器端行为     第二步 从Button继承     因为它是一个按钮 拥有按钮所需要的全部特征属性 因此我们就从System Web UI WebControls Button这个类继承 而防止重复提交按钮在按钮变成灰色以后 应该显示什么文本呢？新增一个AfterSubmitText属性来指示 采用一个Bool值 ShowMessageBox 属性来确定是否需要在客户端弹出提示 使用WarningText属性来指示客户端弹出提示的内容     第三步     现在 我们就来改写AddAttributesToRender方法 ASP NET在渲染该控件到输出时 会调用该方法我们所改写的方法 以达到将JS代码发送到客户端的目的 具体代码如下     protected override void AddAttributesToRender（HtmlTextWriter writer）        System Text StringBuilder ClientSideEventReference = new System Text StringBuilder（）     if （（（this Page != null） && this CausesValidation） && （this Page Validators Count > ））        ClientSideEventReference Append（ if （typeof（Page_ClientValidate） == function ）if （Page_ClientValidate（） == false）return false; ）         //ShowMessageBox?    if （this ShowMessageBox）        ClientSideEventReference Append（ if （！confirm（ + this WarningText + ））return false ）         ClientSideEventReference AppendFormat（ this value = ; （string）this ViewState[ afterSubmitText ]）     ClientSideEventReference Append（ this disabled = true; ）     ClientSideEventReference Append（this Page ClientScript GetPostBackEventReference（this string Empty））     writer AddAttribute（HtmlTextWriterAttribute Onclick ClientSideEventReference ToString（） true）     base AddAttributesToRender（writer）         我们把发送到客户端的js代码看作是一个字符串 为了提高性能 用StringBuilder来对象来构造这个字符串     首先根据页面对象存在且控件启用了验证（该属性从父继承） 且页面对象的验证器内计数大于 来决定输出一段引发验证的js代码     根据ShowMessageBox属性来决定输出一个弹出提示的代码 并且弹出提示的内容由WarningText属性给出     书写一个js脚本为按钮赋值为提交后文本 并且将按钮设置为禁用以变灰色     最后附加一段由ASP NET提供的用于影射回调事件引用的js脚本（this Page ClientScript GetPostBackEventReference（this string Empty）方法将返回一个回送事件引用的js脚本字符串）    将StringBuilder对象内构造的字符串用HtmlTextWriter对象的AddAttribute方法写入按钮的OnClick事件中     调用父类的AddAttributesToRender方法让父类有机会完成其他的配置等操作     完整的ClickOnceButton代码如下     using System;    using System Collections Generic;    using System ComponentModel;    using System Text;    using System Web;    using System Web UI;    using System Web UI WebControls;    namespace BlogLan Web Controls        /// <summary>    /// 表示一个防止重复提交的按钮 当用户单击按钮以后 该按钮变灰 不能再次单击 直到重新加载页面或者跳转     /// </summary>    [DefaultProperty（ Text ）]    [ToolboxData（ < :ClickOnceButton runat=server></ :ClickOnceButton> ）]    public class ClickOnceButton : System Web UI WebControls Button        /// <summary>    /// 默认的构造函数     /// </summary>    public ClickOnceButton（）        this ViewState[ afterSubmitText ] = 正在提交 请稍候… ;    base Text = ClickOnceButton ;    this ViewState[ showMessageBox ] = false;    this ViewState[ warningText ] = 确定要提交吗？ ;        /// <summary>    /// 获取或设置单击按钮后 按钮上所显示的文本     /// </summary>    [Bindable（true）     Category（ Appearance ）     DefaultValue（ 正在提交 请稍候… ）     Description（ 指示单击提交后 按钮上所显示的文本 ）]    public string AfterSubmitText        get        string afterSubmitText = （string）this ViewState[ afterSubmitText ];    if （afterSubmitText != null）        return afterSubmitText;        else        return string Empty;            set        this ViewState[ afterSubmitText ] = value;            [Bindable（true）     Category（ Appearance ）     DefaultValue（false）     Description（ 指示是否要显示一个提示框 ）]    public bool ShowMessageBox        get        return （bool）this ViewState[ showMessageBox ];        set        this ViewState[ showMessageBox ] = value;            [Bindable（true）     Category（ Appearance ）     DefaultValue（ 确定要提交吗？ ）     Description（ 指示提示框内所包含的内容 ）]    public string WarningText        get        return （string）this ViewState[ warningText ];        set        this ViewState[ warningText ] = value;            /// <summary>    /// AddAttributesToRender    /// </summary>    /// <param name= writer >HtmlTextWriter</param>    protected override void AddAttributesToRender（HtmlTextWriter writer）        System Text StringBuilder ClientSideEventReference = new System Text StringBuilder（）     if （（（this Page != null） && this CausesValidation） && （this Page Validators Count > ））        ClientSideEventReference Append（ if （typeof（Page_ClientValidate） == function ）if （Page_ClientValidate（） == false）return false; ）         //ShowMessageBox?    if （this ShowMessageBox）        ClientSideEventReference Append（ if （！confirm（ + this WarningText + ））return false ）         ClientSideEventReference AppendFormat（ this value = ; （string）this ViewState[ afterSubmitText ]）     ClientSideEventReference Append（ this disabled = true; ）     ClientSideEventReference Append（this Page ClientScript GetPostBackEventReference（this string Empty））     writer AddAttribute（HtmlTextWriterAttribute Onclick ClientSideEventReference ToString（） true）     base AddAttributesToRender（writer）                 你可以把它编译为dll 放置在工具箱中 随意拖放到网页上即可使用 因为继承了Button控件 它拥有Button的全部特性 并且自动继承了Button的设计时支持     后记     当我决定自己开发自定义控件时 这是我第一个想到的 因为明确它就是在一个Button控件基础上 并用JS代码来实现功能 因此 它应该是一个比较简单的东西了     代码贴出来 与各位分享 尽管现在新技术层出不穷 用AJAX也可以达到效果 不过假如你只是想要防止重复提交 也不用劳烦AJAX这个沉重的框架来完成 有点杀鸡用牛刀了     愿各位朋友举一反三 深入探讨 cha138/Article/program/net/201311/13917

相关参考

知识大全 防止ASP.NET按钮多次提交的办法

防止ASP.NET按钮多次提交的办法  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　网上查了很多

知识大全 php防止刷新页面重复提交

　　作为phper我们在开发和学习php过程中难免要经常的接受处理表单数据然而处理表单的时候总会有一个问题困扰大家刷新页面重复提交的问题如何防止刷新页面重复提交呢？　　其实在php学习中我们会有很多的

知识大全 解析php防止form重复提交的方法

本篇文章是对php防止form重复提交的方法进行了详细的分析介绍需要的朋友参考下 　　php防止表单重复提交实例复制代码代码如下:<?phpsession_start();$_SESS

知识大全 struts利用Token防止用户重复提交

struts利用Token防止用户重复提交  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 

知识大全 asp.net防止页面刷新或后退引起重复提交

　　项目中遇到刷新后重复的向数据库增加一条相同的记录引出错误归纳得出问题是　　怎样防止页面刷新或后退引起重复提交数据的问题　　其实防止刷新是开发中经常遇到的问题通常有多种方法来实现（下面是一些解决方案

知识大全 Struts2 国际化与防止刷新重复提交表单

Struts2国际化与防止刷新重复提交表单  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　本实例

知识大全 解决jsp重复提交

　　有几种方法在你的表单页里HEAD区加入这段代码:<METAHTTPEQUIV="pragma"CONTENT="nocache"><METAHTTPEQUIV="CacheCon

知识大全 使用HttpModule来禁用Web表单重复提交

使用HttpModule来禁用Web表单重复提交  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　

知识大全 用Struts的Token机制解决表单重复提交

用Struts的Token机制解决表单重复提交  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　S

知识大全 JSP、Struts避免Form重复提交的几种方案

JSP、Struts避免Form重复提交的几种方案  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！