カスタムButton重複コミット防止
2873 ワード
ネットの速度の問題のため、ユーザーはいつも待ちきれないほど何度も提出ボタンをクリックして、それによって何度も提出します.この問題は、Buttonコントロールをカスタマイズして解決します.
原理:ボタンをクリックした後、disabled属性をtrueに設定することで目的を達成します.
カスタムButtonコントロールのコアコード:
カスタム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" />
ソースのダウンロード