カスタムButton重複コミット防止

2873 ワード

ネットの速度の問題のため、ユーザーはいつも待ちきれないほど何度も提出ボタンをクリックして、それによって何度も提出します.この問題は、Buttonコントロールをカスタマイズして解決します.
原理:ボタンをクリックした後、disabled属性をtrueに設定することで目的を達成します.
カスタムButtonコントロールのコアコード:
protected override void AddAttributesToRender(HtmlTextWriter writer)

{

    System.Text.StringBuilder ClientSideEventReference = new System.Text.StringBuilder();



    // 

    if (((this.Page != null) && this.CausesValidation) && (this.Page.Validators.Count > 0))

    {

        ClientSideEventReference.Append("if (typeof(Page_ClientValidate) == 'function'){if (Page_ClientValidate() == false){return false;}}");

    }



    // 

    if (this.ShowMessageBox)

    {

        ClientSideEventReference.Append("if (!confirm('" + this.WarningText + "')){return false}");

    }



    // Button OnClientClick js 

    if (this.OnClientClick != "")

    {

        ClientSideEventReference.Append("if(!"+ OnClientClick +") { return false;}");

    }



    ClientSideEventReference.AppendFormat("this.value = '{0}';", (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);

}

カスタムButtonサンプルコアコードを使用するには、次の手順に従います.
<script type="text/javascript">

        function Validate()

        {

            var txt = document.getElementById('<%=txtContext.ClientID %>');

            if(txt.value == "")

            {

                alert(' !');

                txt.focus();

                return false;

            }

            

            return true;

        }

</script>

<cc1:ClickOnceButton ID="btnAdd" runat="server" Text=" " OnClick="btnAdd_Click" OnClientClick="Validate()" />

:OnClientClickプロパティを して する 、OnClientClickプロパティに するプロパティ は、js に 「;」を けることはできません.Example:エラー :OnClientClick="Validate();" しい き :OnClientClick=“Validate()”
:ページのソースコードを すると、2つのonclickイベント( )が され、OnClientClickプロパティに するonclickイベントは しません. りすがりの が を することを みます!  
<input onclick="if(!Validate()) { return false;}this.value = ' , ...';this.disabled = true;__doPostBack('btnAdd','')" type="submit" name="btnAdd" value=" " onclick="Validate();" id="btnAdd" />


ソースのダウンロード