Comment puis-je confirmer puis désactiver un bouton dans asp.net/javascript

Question

J'ai une page Web ASP.NET 2.0 standard avec un bouton Supprimer. Ce dont j'ai besoin et que je ne peux pas comprendre, c'est quand l'utilisateur appuie sur le bouton Supprimer une boîte de dialogue de confirmation demandant à l'utilisateur & "Etes-vous sûr? &"; Si l'utilisateur dit oui, je souhaite désactiver le bouton Supprimer et effectuer une publication qui exécutera le code côté serveur deleteButton_Click.

Voici le tag:

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

Voici le javascript (en jquery) permettant de gérer le clic côté 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 boîte de dialogue de confirmation fonctionne comme prévu et la désactivation fonctionne également. La forme est correctement postée mais elle n'exécute pas le gestionnaire d'événements deleteButton_Click. Le code javascript __doPostBack existe sur la page.

Je pourrais ajouter UseSubmitBehavior = " false " à la balise deleteButton, mais il ignore alors la réponse de la boîte de dialogue de confirmation.

Alors peut-être que je demande trop d’ASP.NET ici. Des idées comment faire ce travail?

Merci,

Craig

Answer 1

Merci pour le retour mais c'était une solution assez simple.

La ligne javascript doit être:

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

au lieu de:

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

Je ne savais pas que le " nom " attribut est celui que la méthode doPostBack recherchait.

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

Jetez un coup d'œil à cette question de StackOverflow que je trouve très utile:

bouton de désactivation lors de la soumission du formulaire

Ajoutez la logique de confirmation ... et vous devriez être configuré ...

Je suis allé à la tête et j'ai écrit une méthode d'extension pour vous et moi aussi:)

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

vient d'ajouter la vérification de validation:)

Answer 4

Plutôt que de faire une publication via JavaScript, vous pouvez utiliser OnClientClick pour accomplir la même chose.

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

Si vous souhaitez effectuer davantage d'actions via le javascript que la simple désactivation du bouton, vous pouvez dire quelque chose comme ceci:

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

Vous devez simplement vous assurer de le formuler sous la forme d'une instruction return afin que, lorsque vous ne voulez pas que la fonction ASP s'exécute, l'instruction indique finalement & "return false; ";

Answer 5

Javascript:

deleteButton.disabled = true;

C #:

deleteButton.Enabled = false;

Answer 6

Vous devriez probablement désactiver le bouton côté serveur dans l'événement deleteButton_Click (car vous allez créer une publication afin de recréer la page).

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

Et dans le code-behind:

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

Answer 7

Il est un peu étrange que l'événement de clic ne se déclenche pas. J'aurais deviné que cela était dû au fait que le bouton était désactivé, mais cela ne se produit généralement que lorsque le bouton est désactivé sur le serveur, pas seulement le client. Bien que ce ne soit pas la solution idéale dans votre fonction Page_Load, vous pouvez rechercher une publication et / ou une publication asynchrone et déterminer la cible de la publication (dans ce cas, c’est votre bouton), puis appeler une méthode à partir de là. Vous pouvez également transmettre des arguments à l'aide de la fonction __doPostBack ().

Answer 8

Au départ, je ne savais pas si vous parliez de l'événement de clic côté client OU de l'événement de clic côté serveur. Je pense que vous devriez indiquer explicitement que l'événement de clic côté serveur ne se déclenche pas.

Quoi qu'il en soit, essayez <% @ Page EnableEventValidation = & "false &"; % > sur votre page ASPX et voyez si cela fonctionne (il est défini sur true par défaut). Je ne me souviens pas de la pertinence de cet attribut mais cette fonctionnalité garantit que l'événement côté serveur est déclenché uniquement dans des cas légitimes. Par exemple. Supposons que votre page présente une vulnérabilité XSS et qu'un pirate informatique injecte du JavaScript dans l'invocation du bouton de suppression. Cet attribut aide à prévenir ces attaques.

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

J'ai décidé d'en faire une fonction JS pouvant être appelée à partir de n'importe quel bouton.

Voici un exemple qui fonctionne. Toutefois, je déplacerais le code JavaScript vers un autre emplacement, tel qu'un fichier .js existant ou la balise 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)" />