mvc ajax.actionlink avec confirmation de dialogue jquery

Question

J'ai une table avec quelques lignes de données. Pour chaque ligne, il y aura des liens d'action qui appellent certaines méthodes (suppression de données, changement de statut, etc ...)

Avant chaque utilisateur clique sur le bouton je veux qu'une boîte de dialogue jquery apparaisse et donne à l'utilisateur un dialogue avec quelques informations, un bouton OK et Annuler.

quelques exemples de code de la Ajax.ActionLink qui appellera la méthode ChangeStatus:

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%> 

Ceci est la fonction jquery qui est appelé:

function StartChangeStatus(e) { 
      $('#dialog-confirm').dialog({ 
       resizable: false, 
       height: 200, 
       modal: true, 
       buttons: { 
        'Continue': function() { 
         $(this).dialog('close'); 
         $('#Loading-Div').show('slow'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
         e.preventDefault(); 
        } 
       } 
      }); 
     } 

Les fonctions ActionLink et jquery travail. Mais le problème est que je ne peux pas mettre en pause/arrêter l'action en cours lorsque l'actionlink est cliqué. Lorsque le bouton est cliqué, le processus de trou est en cours et le bouton de confirmation de la boîte de dialogue est ignoré. Donc, ma question est de savoir comment changer l'actionlink ou la fonction jquery pour travailler comme voulu avec une confirmation de dialogue avant de continuer?

Answer 1

J'ai également essayé votre code, obtenant le même comportement. J'ai modifié votre code pour afficher la case de confirmation.

<%= Ajax.ActionLink("Link", 
        "ChangeStatus", 
        new { id = 3 }, 
        new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
             HttpMethod = "Post", 
             Confirm = "confirmClick" }, 
             new { @class = "StatusBtn" } 
        ) 
%> 

et il affiche la confirmation javascript. Besoin de trouver la raison pour laquelle cela ne fonctionne pas.

Answer 2

De my website:

Maintenant, Ajax.ActionLink est vraiment utile, et la AjaxOption Confirmer est encore plus ... encore, qui veut que ceux merdiques Javascript d'alerte de nos jours? Je développe une application avec Ms MVC 2 et j'utilise la fantastique bibliothèque JQueryUI pour personnaliser les visuels de tous mes éléments. Une des meilleures choses que JQueryUI a, ce sont les fenêtres de dialogue ... celles comme "Etes-vous sûr de supprimer ce fichier? Oui/Non" ... et JE VEUX LES UTILISER DANS MON Ajax.ActionLink!

Comme je n'ai pas trouvé de réponse sur le net, j'ai cherché un moyen simple de le faire ... et maintenant je l'affiche ici.

Première: lire et mettre en œuvre sur votre page le tutoriel bien écrit par Ricardo Covo: "ASP MVC Supprimer confirmation avec Ajax & jQuery UI Dialog" (il suffit de Google)

J'ai fait des modifications simples à son code Javascript, en utilisant simplement remove() au lieu de hide ('fast') et en appliquant une classe "item" au tr à supprimer.

deleteLinkObj.closest("tr").hide('fast') 

devient

deleteLinkObj.closest("tr.item").remove(); 

Maintenant, après avoir suivi le tutoriel précédent, vous êtes prêt à remplacer le

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%> 

ligne avec

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" }) %> 

Vous pouvez utiliser le Post méthode si vous aimez t o, la chose importante est l'option OnBegin ici, qui appelle un javascript qui empêche l'action du serveur à appeler avant jQueryUI Dialog Confirmation:

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script> 

Placez le javascript sur la page. Alors, maintenant, que se passe-t-il? Lorsque vous cliquez sur le bouton Supprimer, JQueryUI s'ouvre en appelant la fonction OnBegin (qui annule l'action de publication normale). Dans le cas de "Confirmer", le code de Ricardo Covo déclenchera l'action côté serveur, et dans le code javascript de Confirmation de Ricardo Covo, vous pourrez exécuter toutes les actions en cas de succès (comme masquer la suppression de ligne).

Pay Attention: Avec cette méthode, vous devez gérer les fonctions de réussite/échec dans le code javascript de Ricardo Covo, depuis le OnSuccess et OnComplete AjaxOptions ne seront pas tiré du tout (probablement écrasé par un code).