Scenario: applicativo web con bottone che lancia un metodo di inserimento in un database. Tempi di risposta del sito lenti. L’utente, non vedendo una risposta in tempi rapidi, preme nuovamente il bottone. Risultato: abbiamo due inserimenti invece che uno.
Come evitarlo? How to prevent multiple clicks of a submit button in ASP.NET. Fate però ben attenzione all’update del post indicato, perchè le prime linee di codice riportare danno problemi se nella pagina si hanno dei validator.
Per completezza riporto il codice corretto:
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("if (typeof(Page_ClientValidate) == 'function') { ");
sb.Append("if (Page_ClientValidate() == false) { return false; }} ");
sb.Append("this.value = 'Please wait…';");
sb.Append("this.disabled = true;");
sb.Append(this.Page.GetPostBackEventReference(this.Button1));
sb.Append(";");
this.Button1.Attributes.Add("onclick", sb.ToString());
Se invece siamo su ASP.NET 2.0 il codice cambia leggermente, visto che this.Page.GetPostBackEventReference è deprecato.
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("if (typeof(Page_ClientValidate) == 'function') { ");
sb.Append("if (Page_ClientValidate() == false) { return false; }} ");
sb.Append("this.value = 'Attendere…';");
sb.Append("this.disabled = true;");
sb.Append(Page.ClientScript.GetPostBackEventReference(Button1, null));
sb.Append(";");
Button1.Attributes.Add("onclick", sb.ToString());
Giuliano ha anche preparato uno snippet per Visual Studio 2005, di cui allego il sorgente:
<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>
Prevent Multiple Click Snippet
</Title>
<Author>Giuliano Trifoglio</Author>
<Description>Evita il doppio click nei bottoni ASP.NET 2.0 mantenendo la validazione</Description>
<Shortcut>MultipleClickPrevent</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>TestoAttesa</ID>
<ToolTip>Testo che deve assumere il bottone in modalità attesa</ToolTip>
<Default>Attendere…</Default>
</Literal>
<Object>
<ID>Button</ID>
<Type>System.Web.UI.WebControls.Button</Type>
<ToolTip>Il bottone a cui associare il JS che evita il doppio click mantenendo la validazione</ToolTip>
<Default>Button1</Default>
</Object>
</Declarations>
<Code Language="CSharp">
<![CDATA[
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("if (typeof(Page_ClientValidate) == 'function') { ");
sb.Append("if (Page_ClientValidate() == false) { return false; }} ");
sb.Append("this.value = '$TestoAttesa$';");
sb.Append("this.disabled = true;");
sb.Append(Page.ClientScript.GetPostBackEventReference($Button$, null));
sb.Append(";");
$Button$.Attributes.Add("onclick", sb.ToString());
]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
ASP.NET, sviluppo, Visual Studio 2005, snippets, validators