¿Cómo puedo confirmar y luego deshabilitar un botón en asp.net/javascript

Question

Tengo una página web estándar ASP.NET 2.0 con un botón Eliminar. Lo que necesito y no puedo entender cómo lograrlo es cuando el usuario presiona el botón Eliminar y aparece un cuadro de diálogo emergente de confirmación que le pregunta al usuario & Quot; ¿estás seguro? & Quot ;. Si el usuario dice que sí, entonces quiero deshabilitar el botón Eliminar y realizar una devolución que ejecutará el código del lado del servidor deleteButton_Click.

Aquí está la etiqueta:

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" />

Aquí está el javascript (en jquery) para manejar el clic del lado del cliente:

var deleteButton = $(input.eq(0));
deleteButton.click( function()
{
    var a = confirm( "Are you sure you want to delete this item?" );
    if ( a == false )
    {
        return false;
    }
    else
    {
        deleteButton.attr( "disabled", "disabled" );
        __doPostBack( deleteButton.attr( "id" ), "" );
    }
} );

El diálogo de confirmación funciona como se esperaba y la desactivación también funciona bien. El formulario funciona bien pero no ejecuta el controlador de eventos deleteButton_Click. El código JavaScript __doPostBack existe en la página.

Podría agregar UseSubmitBehavior = " false " a la etiqueta deleteButton pero luego ignoraría la respuesta del diálogo de confirmación.

Entonces, tal vez le pido demasiado a ASP.NET aquí. ¿Alguna idea de cómo hacer que esto funcione?

Gracias,

Craig

Answer 1

Gracias por los comentarios, pero fue una solución bastante simple.

La línea javascript debe ser:

__doPostBack( deleteButton.attr( "name" ), "" );

en lugar de:

__doPostBack( deleteButton.attr( "id" ), "" );

No me di cuenta de que el " nombre " El atributo es el que estaba buscando el método doPostBack.

Answer 2

btnSubmit.Attributes.Add("onclick", "if(confirm(\"Are you sure you want to delete this item?\" ){this.disabled=true;" + ClientScript.GetPostBackEventReference(btnSubmit, "").ToString() + "}else{return false;}");

Answer 3

Eche un vistazo a esta pregunta de StackOverflow. Me pareció muy útil:

Desactivar botón al enviar formulario

Agregue la lógica de confirmación ... y debería estar configurado ...

Fui cabeza y escribí un método de extensión para ti y para mí también :)

public static void ConfirmThenDisableButtonOnClick(this Button buttonControl, string confirmMessage, string clientFunction)
{
    StringBuilder sb = new StringBuilder();

    // If the page has ASP.NET validators on it, this code ensures the
    // page validates before continuing.
    if (buttonControl.CausesValidation && !String.IsNullOrEmpty(buttonControl.ValidationGroup))
    {
        sb.Append("if ( typeof( Page_ClientValidate ) == 'function' ) { ");
        sb.AppendFormat(@"if ( ! Page_ClientValidate('{0}') ) {{ return false; }} }} ", buttonControl.ValidationGroup);
    }

    //pop confirm, if confirm==true, disable button
    sb.AppendFormat("if(confirm('{0}\')){{this.disabled=true;", confirmMessage.Replace("\"","").Replace("'",""));

    // If a secondary JavaScript function has been provided, and if it can be found,
    // call it. Note the name of the JavaScript function to call should be passed without
    // parens.
    if (!String.IsNullOrEmpty(clientFunction))
    {
        sb.AppendFormat("if ( typeof( {0} ) == 'function' ) {{ {0}() }};", clientFunction);
    }

    // GetPostBackEventReference() obtains a reference to a client-side script function 
    // that causes the server to post back to the page (ie this causes the server-side part 
    // of the "click" to be performed).
    sb.Append(buttonControl.Page.ClientScript.GetPostBackEventReference(buttonControl, ""));

    // if confirm==false do nothing
    sb.Append(";}else{return false;}");

    // Add the JavaScript created a code to be executed when the button is clicked.
    buttonControl.Attributes.Add("onclick", sb.ToString());
}

también agregó la verificación de validación :)

Answer 4

En lugar de hacer una devolución de datos a través de JavaScript, puede usar OnClientClick para lograr lo mismo.

<asp:Button OnClientClick="if (confirm('Are you sure?')) {this.disabled = true;} else {return false;}" />

O si desea realizar más acciones a través de javascript que simplemente deshabilitar el botón, puede decir algo como esto:

<asp:Button OnClientClick="return DisableOnConfirm();" />

Solo necesita asegurarse de que está redactado en forma de una declaración de devolución para que cuando no desee que se ejecute la función ASP, la declaración diga en última instancia " return false; quot ;.

Answer 5

Javascript:

deleteButton.disabled = true;

C #:

deleteButton.Enabled = false;

Answer 6

Probablemente deberías deshabilitar el botón en el lado del servidor en el evento deleteButton_Click (porque harás una devolución de datos, para volver a crear la página).

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" OnClientClick="javascript:return confirm('are you sure blah blah blah ...')" />

Y en el código subyacente:

private void deleteButton_Click(object sender, EventArgs e) {
    deleteButton.Enabled = false;
    // and the rest of event handling ...
}

Answer 7

Es un poco extraño que el evento click no se active. Supuse que se debía a que el botón estaba deshabilitado, pero generalmente eso solo ocurre cuando el botón está deshabilitado en el servidor, no solo en el cliente. Si bien no es la solución ideal en su función Page_Load, puede verificar una devolución de datos y / o una devolución de datos asíncrona y determinar el objetivo de la devolución de datos (en este caso es su botón), y luego llamar a algún método desde allí. También puede pasar argumentos utilizando la función __doPostBack ().

Answer 8

Inicialmente, no estaba seguro si estaba hablando del evento de clic del lado del cliente O del evento de clic del lado del servidor. Creo que debería indicar explícitamente que el evento de clic del lado del servidor no se está activando.

De todos modos, intente <% @ Page EnableEventValidation = " false " % > en su página ASPX y vea si funciona (está configurado en verdadero de forma predeterminada). No recuerdo lo esencial de este atributo, pero esta característica asegura que el evento del lado del servidor se active solo en casos legítimos. P.ej. Digamos que su página tenía vulnerabilidad XSS y un hacker inyectó JavaScript para invocar el botón Eliminar. Este atributo ayuda a prevenir esos ataques.

Answer 9

$(":submit").click(function ()
{
    $(this).attr("disabled", true); // disable input

    if (confirm("Press OK to submit"))
    {
        __doPostBack(this.id, ""); // if user presses OK; submit
    }
    else
    {
        // If user presses cancel; enable input and stop submit
        $(this).attr("disabled", false);

        return false;
    }
});

Answer 10

Decidí hacer de esta una función JS que se podía llamar desde cualquier botón.

Aquí hay una muestra que funciona, sin embargo, movería el JavaScript a un lugar diferente, como un archivo .js existente o la etiqueta de cabecera.

<script>
    function confirmPostback(button) {
        if (confirm('Are you sure?')) {
            button.disabled = true;
            __doPostBack(button.name, '')
            return true;
        } else {
            return false;
        }
    }
</script>

<asp:Button ID="TestPostback" runat="server" Text="Test Postback"
        UseSubmitBehavior="false" OnClientClick="return confirmPostback(this)" />