Come posso confermare e quindi disabilitare un pulsante in asp.net/javascript

Question

Ho una pagina Web ASP.NET 2.0 standard con un pulsante Elimina su di essa. Ciò di cui ho bisogno e che non riesco a capire come farlo è quando l'utente preme il pulsante Elimina e conferma i popup di dialogo che chiedono all'utente & Quot; sei sicuro? & Quot ;. Se l'utente dice di sì, voglio disabilitare il pulsante Elimina ed eseguire un postback che eseguirà il codice lato server deleteButton_Click.

Ecco il tag:

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

Ecco il javascript (in jquery) per gestire il clic sul lato client:

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" ), "" );
    }
} );

La finestra di dialogo di conferma funziona come previsto e anche la disabilitazione funziona bene. Il modulo esegue correttamente il postback ma non esegue il gestore eventi deleteButton_Click. Il codice javascript __doPostBack esiste sulla pagina.

Potrei aggiungere UseSubmitBehavior = " false " al tag deleteButton, ma ignorerebbe la risposta della finestra di dialogo di conferma.

Quindi forse sto chiedendo troppo ASP.NET qui. Qualche idea su come farlo funzionare?

Grazie,

Craig

Answer 1

Grazie per il feedback, ma è stata una soluzione abbastanza semplice.

La riga javascript dovrebbe essere:

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

anziché:

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

Non mi ero reso conto che il " nome " L'attributo è quello che stava cercando il metodo 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

Dai un'occhiata a questa domanda StackOverflow che ho trovato molto utile:

Disabilita il pulsante sull'invio del modulo

Aggiungi la logica di conferma ... e dovresti essere impostato ...

Sono andato alla testa e ho scritto un metodo di estensione per te e anche per me :)

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());
}

appena aggiunto anche il controllo di convalida :)

Answer 4

Invece di fare un postback tramite javascript, puoi usare OnClientClick per ottenere lo stesso risultato.

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

O se vuoi eseguire più azioni tramite javascript che semplicemente disabilitare il pulsante, puoi dire qualcosa del genere:

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

Devi solo assicurarti di formularlo sotto forma di un'istruzione return in modo che quando non vuoi che la funzione ASP venga eseguita, l'istruzione alla fine dirà " return false; quot;.

Answer 5

Javascript:

deleteButton.disabled = true;

C #:

deleteButton.Enabled = false;

Answer 6

Probabilmente dovresti disabilitare il pulsante sul lato server nell'evento deleteButton_Click (perché eseguirai un postback, quindi ricreare la pagina).

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

E nel code-behind:

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

Answer 7

È un po 'strano che l'evento click non si attivi. Avrei immaginato che fosse dovuto alla disabilitazione del pulsante, ma di solito ciò accade solo quando il pulsante è disabilitato sul server, non solo sul client. Pur non essendo la soluzione ideale nella tua funzione Page_Load, puoi verificare la presenza di un postback e / o un postback asincrono e determinare la destinazione del postback (in questo caso è il tuo pulsante), quindi chiamare un metodo da lì. Puoi anche passare argomenti usando la funzione __doPostBack ().

Answer 8

Inizialmente, non ero sicuro se stavi parlando dell'evento clic sul lato client O dell'evento clic sul lato server. Penso che dovresti dichiarare esplicitamente che l'evento di clic sul lato server non si attiva.

Prova comunque <% @ Page EnableEventValidation = " false " % Gt &; sulla tua pagina ASPX e verifica se funziona (è impostato su true per impostazione predefinita). Non ricordo la nitidezza di questo attributo, ma questa funzionalità assicura che l'evento lato server venga generato solo in casi legittimi. Per esempio. supponiamo che la tua pagina abbia una vulnerabilità XSS e un hacker abbia inserito JavaScript per invocare il pulsante Elimina. Questo attributo aiuta a prevenire quegli attacchi.

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

Ho deciso di rendere questa una funzione JS che può essere chiamata da qualsiasi pulsante.

Ecco un esempio che funziona, tuttavia, sposterei JavaScript in un posto diverso come un file .js esistente o il tag head.

<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)" />