c# - ASP.Net haga doble clic en el problema
javascript onclick (6)
El enfoque general es doble.
Serverside :
- Al cargar la página, genere un token (utilizando
System.Random), guárdelo en la sesión y escríbalo en un campo de formulario oculto - Al enviar, verifique que el campo de formulario oculto sea igual a la variable de sesión ( antes de volver a configurarlo)
- Hacer trabajo
Lado del cliente :
Similar a lo que tiene, pero probablemente solo oculte el botón, y reemplácelo con algún texto como ''enviar''.
Lo importante a tener en cuenta, desde el lado del cliente, es que el usuario puede cancelar la publicación presionando ''escape'', por lo que debe considerar qué hacer aquí (dependiendo de qué tan avanzado está el token no se usará, por lo que '' Necesitaré que el botón vuelva a estar desactivado / oculto).
El ejemplo completo sigue:
C # (incluye código para verlo en acción):
<html>
<head runat="server">
<title>double-click test</title>
<script language="c#" runat="server">
private Random
random = new Random();
private static int
TEST = 0;
public void Page_Load (object sender, EventArgs ea)
{
SetToken();
}
private void btnTest_Click (object sender, EventArgs ea)
{
if( IsTokenValid() ){
DoWork();
} else {
// double click
ltlResult.Text = "double click!";
}
}
private bool IsTokenValid ()
{
bool result = double.Parse(hidToken.Value) == ((double) Session["NextToken"]);
SetToken();
return result;
}
private void SetToken ()
{
double next = random.Next();
hidToken.Value = next + "";
Session["NextToken"] = next;
}
private void DoWork ()
{
TEST++;
ltlResult.Text = "DoWork(): " + TEST + ".";
}
</script>
</head>
<body>
<script language="javascript">
var last = null;
function f (obj)
{
obj.src = "http://www.gravatar.com/avatar/4659883ec420f39723c3df6ed99971b9?s=32&d=identicon&r=PG";
// Note: Disabling it here produced strange results. More investigation required.
last = obj;
setTimeout("reset()", 1 * 1000);
return true;
}
function reset ()
{
last.src = "http://www.gravatar.com/avatar/495ce8981a5127a9fd24bd72e7e3664a?s=32&d=identicon&r=PG";
last.disabled = "false";
}
</script>
<form id="form1" runat="server">
<asp:HiddenField runat="server" ID="hidToken" />
<asp:ImageButton runat="server" ID="btnTest"
OnClientClick="return f(this);"
ImageUrl="http://www.gravatar.com/avatar/495ce8981a5127a9fd24bd72e7e3664a?s=32&d=identicon&r=PG" OnClick="btnTest_Click" />
<pre>Result: <asp:Literal runat="server" ID="ltlResult" /></pre>
</form>
</body>
</html>
Tener un pequeño problema con una página ASP.net mía. Si un usuario hiciera doble clic en un botón "enviar", escribirá dos veces en la base de datos (es decir, llevará a cabo el método ''onclick'' en el botón de imagen dos veces)
¿Cómo puedo hacer que, si un usuario hace clic en el botón de imagen, solo se deshabilita el botón de imagen?
He intentado:
<asp:ImageButton
runat="server"
ID="VerifyStepContinue"
ImageUrl=image src
ToolTip="Go"
TabIndex="98"
CausesValidation="true"
OnClick="methodName"
OnClientClick="this.disabled = true;" />
¡Pero esta propiedad OnClientClick detiene completamente el envío de la página! ¿Alguna ayuda?
Lo siento, sí, tengo controles de validación ... de ahí el problema.
Trabajando en esto todavía, hasta este punto ahora:
Código ASP:
<asp:TextBox ID="hidToken" runat="server" Visible="False" Enabled="False"></asp:TextBox>
...
<asp:ImageButton runat="server" ID="InputStepContinue" Name="InputStepContinue" ImageUrl="imagesrc" ToolTip="Go" TabIndex="98" CausesValidation="true" OnClick="SubmitMethod" OnClientClick="document.getElementById(''InputStepContinue'').style.visibility=''hidden'';" />
Código C #:
private Random
random = new Random();
protected void Page_Load(object sender, EventArgs e)
{
//Use a Token to make sure it has only been clicked once.
if (Page.IsPostBack)
{
if (double.Parse(hidToken.Text) == ((double)Session["NextToken"]))
{
InputMethod();
}
else
{
// double click
}
}
double next = random.Next();
hidToken.Text = next + "";
Session["NextToken"] = next;
En realidad ... esto casi funciona. El problema del doble clic está bastante solucionado (¡yay!) La imagen aún no está oculta.
La función de doble clic es una implementación del lado del servidor para evitar el procesamiento de la misma solicitud que se puede implementar en el lado del cliente a través de JavaScript. El propósito principal de la función es evitar procesar la misma solicitud dos veces. La implementación del lado del servidor hace esto identificando la solicitud repetida; sin embargo, la solución ideal es evitar que esto ocurra en el lado del cliente.
En el contenido HTML enviado al cliente que les permite enviar solicitudes, se puede usar un pequeño JavaScript de validación para verificar si la solicitud ya se ha enviado y, de ser así, evitar que el comprador en línea envíe la solicitud nuevamente. Esta función de validación de JavaScript verificará el indicador global para ver si la solicitud se ha enviado y, en caso afirmativo; No vuelve a enviar la solicitud. Si la función de doble clic está deshabilitada en el servidor, se recomienda encarecidamente que las páginas JSP y HTML implementen esta prevención de JavaScript.
El siguiente ejemplo evita que el formulario se envíe más de una vez utilizando la acción onSubmit () del objeto de formulario:
...
<script>
var requestSubmitted = false;
function submitRequest() {
if (!requestSubmitted ) {
requestSubmitted = true;
return true;
}
return false;
}
</script>
...
<FORM method="POST" action="Logon" onSubmit="javascript:submitRequest()">
......
</FORM>
Resolví esto configurando un campo oculto en el clic del cliente antes de llegar al servidor.
Luego, en el servidor, reviso el campo oculto y si el valor es, por ejemplo, algo "FALSO" que podría significar que puedo o no puedo de la acción.
Si tiene validación en la página, deshabilitar el lado del cliente del botón se vuelve un poco complicado. Si la validación falla, no desea desactivar el botón. Aquí hay un fragmento que agrega el controlador de eventos del lado del cliente:
private void BuildClickOnceButton(WebControl ctl)
{
System.Text.StringBuilder sbValid = new System.Text.StringBuilder();
sbValid.Append("if (typeof(Page_ClientValidate) == ''function'') { ");
sbValid.Append("if (Page_ClientValidate() == false) { return false; }} ");
sbValid.Append(ctl.ClientID + ".value = ''Please wait...'';");
sbValid.Append(ctl.ClientID + ".disabled = true;");
// GetPostBackEventReference obtains a reference to a client-side script
// function that causes the server to post back to the page.
sbValid.Append(ClientScript.GetPostBackEventReference(ctl, ""));
sbValid.Append(";");
ctl.Attributes.Add("onclick", sbValid.ToString());
}
Vea este hilo de asp.net para más información.
Actualización : el código anterior se usaría para agregar el controlador OnClientClick en el código que está detrás. También puede escribir el javascript en su marca de aspx así:
<script type="text/javascript">
function disableButton(button)
{
// if there are client validators on the page
if (typeof(Page_ClientValidate) == ''function'')
{
// if validation failed return false
// this will cancel the click event
if (Page_ClientValidate() == false)
{
return false;
}
}
// change the button text (does not apply to an ImageButton)
//button.value = "Please wait ...";
// disable the button
button.disabled = true;
// fire postback
__doPostBack(button.id, '''');
}
</script>
<asp:ImageButton runat="server" ID="VerifyStepContinue" ImageUrl="button.png"
ToolTip="Go" TabIndex="98" CausesValidation="true" OnClick="methodName"
OnClientClick="return disableButton(this);" />
Similar a la respuesta del lado del cliente de Silky, normalmente hago dos botones que se parecen, excepto que el segundo botón está deshabilitado y oculto. Al hacer clic en el botón normal, se intercambian los estilos de visualización de los dos botones para que se oculte el botón normal y se muestre el botón desactivado.
para aquellos que solo quieren hacer una solución rápida, simplemente escóndalo y muestre otro botón que no tiene eventos
<asp:Button ID="RedeemSubmitButton" runat="server" Text="Submit to Redeem" OnClick="RedeemSubmitButton_Click" OnClientClick="hideit();" />
<asp:Button ID="RedeemSubmitButtonDisabled" style="display:none;" runat="server" Text="please wait" OnClientClick="javascript:alert(''please wait, processing'');" />
<script>
function hideit() {
var btn = $get(''<%= this.RedeemSubmitButton.ClientID %>'');
var btn2 = $get(''<%= this.RedeemSubmitButtonDisabled.ClientID %>'');
if (btn != null)
{
btn.style.display = ''none'';
btn2.style.display = ''block''
}
}
</script>