MVC 3 Ajax.ActionLink с диалогом подтверждения JQuery UI

Question

У меня есть @ Ajax.ActionLink, который вызывает действие удаления.Теперь я хочу использовать диалог подтверждения JQuery UI вместо обычного атрибута «Подтверждение» ссылки Ajax.Я подключаю событие к Ajax.ActionLink, используя ненавязчивый javaScript.Но действие передается и e.preventDefault ();через ошибку.Может кто-нибудь сказать мне, почему это происходит?

Вот мой код 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");
    });

---

Вот мой код MVC:

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

Answer 1

Вот как я реализовал функцию подтверждения с помощью jquery UI:

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

} );

и в своем html вы можете добавить диалог div

<div id="dialog-confirm" title="Delete the item?" > 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p> 
</div> 

ваша ссылка действия должна выглядеть такэто

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

Answer 2

Я закончил тем, что сделал это: измените Ajax.ActionLink на Html.ActionLink и в своем коде JavaScript я звоню $.get(theHREF, null, function () { refreshList() });

Вот код:

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

ВотMVC 3 ActionLink

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

Answer 3

Вы используете OnBegin свойство вместо OnSuccess, это простой пример, но он может помочь вам, вот как я объявляю свою ссылку Ajax.ActionLink:

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

И этоможет быть очень простой реализацией функции confirmDeletion:

<script>
    function confirmDeletion (e) {
        // Do something or validate inputs...
        e.preventDefault(); // This should prevent the event to fire...
    };
</script>

С уважением.

Answer 4

Я обнаружил, что сделать это намного проще, используя отдельную форму, содержащую данные публикации, и кнопку, которая показывает диалоговое окно и затем отправляет форму.

cshtml (бритва):

using (Ajax.BeginForm("Deactivate", "Admin", 
    new AjaxOptions { OnComplete = "ReloadList();" }, 
    new {@id = "deactive-form-" + user.Id }))
{
<input type="hidden" name="id" value="@user.Id" />
}
<input type="button" class="btn" value="Deactivate" 
    onclick="return ShowConfirmDlgThenSubmitForm('dialog-deactivate', 'deactive-form-@user.Id');" />

JavaScript (с jQuery UI Dialog ):

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

Answer 5

Может быть, вы можете попробовать вызвать функцию подтверждения из события OnBegin Ajax.ActionLink?Таким образом, вы можете продолжать использовать Ajax.ActionLink.OnBegin даже помечен как атрибут data-ajax-begin, поэтому jquery присваивает «return YourConfirmationFunction ()» этому атрибуту, и все будет в порядке.Вот пример использования OnBegin для диалога подтверждения без jquery.

Answer 6

Попробуйте вместо этого:

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

Я также настоятельно рекомендую вам рассмотреть возможность использования глагола HttpDelete с любым методом обратной передачи MVC или Ajax.