Transmission des données à un dialogue de l’interface utilisateur de jQuery

Question

Je suis l'élaboration d'un ASP.Net MVC site et sur ce j'ai une liste de certains des réservations à partir d'une requête de base de données dans une table avec un ActionLink d'annuler la réservation sur une ligne spécifique avec un certain BookingId comme ceci:

Mes réservations

<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>      
            <td></td>              
            <td></td>
        </tr>
    </thead>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">13:00 - 14:00</td>
        <td style="width: 100px;">2</td>
        <td style="width: 60px;"><a href="http://stackoverflow.com/Booking.aspx/Cancel/15">cancel</a></td>
        <td style="width: 80px;"><a href="http://stackoverflow.com/Booking.aspx/Change/15">change</a></td>
    </tr>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="http://stackoverflow.com/Booking.aspx/Cancel/10">cancel</a></td>
        <td style="width: 80px;"><a href="http://stackoverflow.com/Booking.aspx/Change/10">change</a></td>
    </tr>  
</table>

Ce serait bien si je pouvais utiliser le jQuery boîte de Dialogue affichera un message vous demandant si l'utilisateur est sûr qu'il veut annuler la réservation. J'ai essayé d'obtenir que cela fonctionne, mais je continue à faire des bloque sur la façon de créer une fonction jQuery qui accepte les paramètres de sorte que je peux remplacer l' <a href="http://stackoverflow.com/Booking.aspx/Cancel/10">cancel</a> avec <a href="#" onclick="ShowDialog(10)">cancel</a>. ShowDialog fonction serait alors ouvrir la boîte de dialogue et aussi passer le paramètre 10 à la boîte de dialogue de sorte que si l'utilisateur clique sur oui, alors Il affichera le href: /Réservation.aspx/Modifier/10

J'ai créé le jQuery Dialogue dans un script comme ceci:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        buttons: {
            "Yes": function() {
                alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
            "No": function() {$(this).dialog("close");}
        },
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
});

et le dialogue lui-même:

   <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>

Donc finalement à ma question: Comment puis-je y arriver? ou est-il une meilleure façon de le faire?

Answer 1

jQuery fournit une méthode qui stockent des données pour vous, pas besoin d’utiliser un attribut factice ou de trouver la solution à votre problème.

Lier l’événement click :

Et votre boîte de dialogue :

Answer 2

Vous pourriez faire comme ceci:

• marque de l' <a> avec une classe, dites "annuler"

• configurer la boîte de dialogue, en agissant sur tous les éléments class="annuler":

  $('a.cancel').click(function() { 
    var a = this; 
    $('#myDialog').dialog({
  	buttons: {
  	  "Yes": function() {
  		 window.location = a.href; 
  	  }
  	}
    }); 
    return false;
  });
  

(en plus de vos autres options)

Les points clés sont ici:

• la rendre la plus discrète possible
• si vous avez besoin de l'URL, vous l'avez déjà dans le href.

Cependant, je vous recommande de faire ce POST au lieu de GET, depuis une action d'annulation a des effets secondaires et donc ne respecte pas OBTENIR de la sémantique...

Answer 3

En termes de ce que vous faites avec jQuery, ma compréhension est que vous pouvez enchaîner les fonctions que vous avez et les internes ont accès à des variables à partir de l'extérieur. Ainsi, votre ShowDialog(x) de la fonction contient ces autres fonctions, vous pouvez ré-utiliser la variable x, et il sera pris comme référence pour le paramètre de la fonction externe.

Je suis d'accord avec mausch, vous devriez vraiment regarder à l'aide de POST de ces actions, qui va ajouter une <form> balise autour de chaque élément, mais rendre les chances d'un script automatisé ou d'un outil de déclenchement de l'annulation de l'événement beaucoup moins probable. L'action sur le Changement peut rester comme il est, car il (sans doute ouvre simplement un formulaire d'édition).

Answer 4

Après plusieurs heures de try/catch, que j’ai fini avec cet exemple de travail, son travail sur AJAX POST avec les nouvelles lignes ajoute à la TABLE à la volée (c’était mon vrai problème) :

Tha magie accompagne ce lien :

C’est le travail final avec AJAX POST et dialogue Jquery :

Answer 5

Maintenant, j'ai essayé de vos suggestions et constaté que ça fonctionne,

1. La boîte de dialogue div est alsways écrit en clair dans le texte
2. Avec le $.post version il fonctionne en fait en des termes que le contrôleur est appelé et fait annule la réservation, mais le dialogue reste ouvert et la page n'a pas d'actualisation. Avec la obtenir la version la fenêtre.emplacement = h.ref fonctionne très bien.

Se mon "nouveau" script ci-dessous:

$('a.cancel').click(function() {
        var a = this;               
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);                     
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

Des indices?

oh, et mon lien d'Action ressemble maintenant à ceci:

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>