MVC 3 Ajax.ActionLink avec la boîte de dialog de confirmation de l’interface utilisateur JQuery

J’ai un @ Ajax.ActionLink qui appelle une action de suppression. Maintenant, je souhaite utiliser la boîte de dialog JQuery UI Dialog pour confirmer l’atsortingbut “Confirmer” habituel du lien Ajax. J’accroche l’événement à Ajax.ActionLink à l’aide du javaScript non intrusif. Mais l’action est soumise et e.preventDefault (); grâce à une erreur. Quelqu’un peut-il me dire pourquoi cela se produit?

Voici mon code jQuery:

$("[data-dialog-confirm]").click(function (e) { e.preventDefault(); var theHREF = $(this).attr("href"); $("#dialog-confirm").dialog('option', 'buttons', { "Delete this item": function () { window.location.href = theHREF; $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }); $("#dialog-confirm").dialog("open"); }); 

Voici mon code MVC:

  @Ajax.ActionLink("Delete", "DeleteConfirmed", new { id = item.Id }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "refreshList" }, new {data_dialog_confirm="true" } ) 

Voici comment j’ai implémenté la fonctionnalité de confirmation avec l’interface utilisateur de jquery:

 $(document).ready( function () { $("#dialog-confirm").dialog({ autoOpen: false, modal: true, resizable: false, height:180, }); $(".deleteLink").click(function(e) { e.preventDefault(); var targetUrl = $(this).attr("href"); $("#dialog-confirm").dialog({ buttons : { "Confirm" : function() { window.location.href = targetUrl; }, "Cancel" : function() { $(this).dialog("close"); } } }); $("#dialog-confirm").dialog("open"); }); } ); 

et dans votre html, vous pouvez append le dialog div

 

This item will be deleted. Are you sure?

votre lien d’action devrait ressembler à ceci

 @Html.ActionLink("Delete", "UpdateDelete", new { id = item.Id }, new { @class = "deleteLink" }) 

J’ai fini par faire ceci: Remplacez Ajax.ActionLink par Html.ActionLink et dans mon code JavaScript, j’appelle $.get(theHREF, null, function () { refreshList() });

Voici le code:

  $("#dialog-confirm").dialog({ autoOpen: false, resizable: false, width: 500, modal: true, buttons: { "Delete this item": function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); } } }); $("[data-dialog-confirm]").click(function (e) { e.preventDefault(); var theHREF = $(this).attr("href"); $("#dialog-confirm").dialog('option', 'buttons', { "Yes": function () { $.get(theHREF, null, function () { refreshList() }); $(this).dialog("close"); }, "No": function () { $(this).dialog("close"); } }); $("#dialog-confirm").dialog("open"); }); 

Voici le MVC 3 ActionLink

  @Html.ActionLink("Delete", "DeleteConfirmed", "Category", new { id = item.Id }, new { data_dialog_confirm = "true" }) 

Vous pouvez utiliser la propriété OnBegin place de OnSuccess , ceci est juste un exemple simple mais il pourrait vous aider, Ajax.ActionLink comment je déclare mon lien Ajax.ActionLink :

 @Ajax.ActionLink("Delete", "DeletePeriod", "ConfigPeriod", new { area = "Budget", id = Model.Id }, new AjaxOptions { HttpMethod = "Post", OnBegin = "confirmDeletion" }) 

Et cela pourrait être une implémentation très simple de la fonction confirmDeletion :

  

Cordialement.

Essayez ceci à la place:

 $("[data-dialog-confirm]").click(function (e) { var theHREF = $(this).attr("href"); $("#dialog-confirm").dialog('option', 'buttons', { "Delete this item": function () { window.location.href = theHREF; $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }); $("#dialog-confirm").dialog("open"); return false }); 

Je vous encourage également vivement à envisager d’utiliser le verbe HttpDelete avec toute méthode de postback MVC ou Ajax.

Peut-être pourriez-vous essayer d’appeler une fonction de confirmation à partir de l’événement OnBegin de Ajax.ActionLink? De cette façon, vous pouvez continuer à utiliser Ajax.ActionLink. OnBegin even est marqué en tant qu’atsortingbut data-ajax-begin . Vous devez donc jquery affecter “renvoyer YourConfirmationFunction ()” à cet atsortingbut et tout devrait bien se passer. Voici un exemple d’utilisation de OnBegin pour la boîte de dialog de confirmation sans jquery.

J’ai trouvé qu’il était beaucoup plus facile de faire cela en utilisant un formulaire séparé, contenant les données de publication, et un bouton qui affiche la boîte de dialog puis soumet le formulaire.

cshtml (Razor):

 using (Ajax.BeginForm("Deactivate", "Admin", new AjaxOptions { OnComplete = "ReloadList();" }, new {@id = "deactive-form-" + user.Id })) {  }  

javascripts (avec la boîte de dialog jQuery UI ):

 function ShowConfirmDlgThenSubmitForm(dialogId, formId) { $('#' + dialogId).dialog({ resizable: false, height: 180, modal: true, buttons: { "Okay": function () { $(this).dialog("close"); $('#' + formId).submit(); }, Cancel: function () { $(this).dialog("close"); } } }); return false; }