Javascript confirme sans code dans le code derrière

Question

J'ai une page avec des boutons d'image ajoutés dynamiquement, et je veux qu'ils envoient une confirmation lorsque vous cliquez dessus (pour la suppression).

Comme ils sont dynamiques, je ne peux rien coder dans un événement .click.

Comment la meilleure façon de procéder? vérifier si vrai ou faux, puis l'envoyer à une fonction de suppression dans le code derrière avec le contrôle en tant que paramètre? ou de toute autre manière?

Merci

Answer 1

Si vous souhaitez pouvoir annuler la soumission, définissez la propriété OnClientClick sur la chaîne "Return" et le nom de la fonction. Le script client peut alors annuler la soumission en renvoyant false.

Vérifiez la propriété imagebutton clientclick.

void Button1_Click(Object sender, EventArgs e) 
     Label1.Text = "Server click handler called."; 
    End Sub 

votre dynamique générée ImageButton devrait être un peu comme ceci: Créer un événement commman Hadler pour tous imagebuttons et régler la id de ces ImageButton à la valeur de clé primaire.

check Respond to Button Web Server Control Events in Client Script pour plus de détails:

Vous pouvez créer un usercontrol ImageButton personnalisé qui fournira la fonctionnalité de suppression sur l'événement de clic. Sur les événements ItemRowCreated ou GridView RowCreated, un hadler d'événement est affecté à ce contrôle ajouté dynamiquement.

S'ils ne sont pas dans un contrôle de la base de données, alors affectez simplement leurs propriétés à l'exécution.

protected void Page_Init(object sender, EventArgs e) 
    { 
     ImageButton btn = new ImageButton(); 
     btn.ID = "1"; 
     btn.ImageUrl = "http://icons.iconarchive.com/icons/deleket/button/256/Button-Fast-Forward-icon.png"; 
     btn.OnClientClick = "return confirm('Ready to submit.')"; 
     btn.Click += new ImageClickEventHandler(btn_Click); 
     this.form1.Controls.Add(btn); 
    } 

vérifiez l'ID de contrôle dans le gestionnaire d'événements.

private void btn_Click(object sender, ImageClickEventArgs e) 
     { 
      ImageButton btn = (ImageButton)sender; 
      Response.Write("<script>alert('Image button with id = " + btn.ID + "clicked');</script>"); 
     } 

puis perfom opération de suppression

Answer 2

Il est facile à faire avec jQuery (un framework javascript), même si vous voulez faire avec JavaScript pur, vous devez ajouter une classe à tous vos bouton Supprimer l'image et ajouter un gestionnaire à ce

en utilisant jQuery, il suffit d'utiliser ceci:

$(".deleteImageButton").bind("click", function() { 
    var res = confirm("Are you sure you want to delete?"); 
    return res; 
}); 

Answer 3

Events bulle le DOM, par exemple. ils seront déclenchés pour l'élément sur lequel il est arrivé, ainsi que pour tous ses parents (jusqu'au nœud de document lui-même). Cela facilite la résolution de votre problème: attachez simplement un gestionnaire de clic au conteneur des boutons. jQuery rend encore plus facile de le faire grâce à sa fonction de délégué, voici quelques exemples de code:

$('#buttons').delegate('.delete_control', 'click', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); // maybe you don't need these 2, you can remove them if so 

    if (confirm('Are you sure you want to delete that element?')) { 
     // make an ajax request to delete the image. alternatively you can submit 
     // a hidden form, with the controlid in an input, but this is way simpler. 
     $.post('/url/to/delete/control/by/id/' + e.target.id, function() { 
      $(e.target).remove(); // to delete the button when the request is done. 
     }); 
    } 
}); 

Et voici une page jsFiddle montrant l'ensemble de travail chose: http://jsfiddle.net/8d7D4/

Answer 4

objets que le feu .click et d'autres fonctions sont " collecté "au chargement, si vous ajoutez des éléments après cela, vous devez utiliser .delegate ou .bind pour que les nouveaux éléments déclenchent également un événement.