Замените Ajax.ActionLink той же функциональностью с помощью jQuery.

Question

С помощью asp.net mvc мы можем сделать ajax-вызов, подобный этому:

@{
    var ajaxOpts = new AjaxOptions { UpdateTargetId = "main-content", OnBegin = "fctTabLoading", OnComplete = "fctTabLoaded", InsertionMode = InsertionMode.Replace };
}

@Ajax.ActionLink("my link text", "MyAction", "MyController", new { id = Model.RequestID }, ajaxOpts)

, который выдаст следующий html:

<a data-ajax="true" data-ajax-begin="fctTabLoading" data-ajax-complete="fctTabLoaded" data-ajax-mode="replace" data-ajax-update="#main-content" href="/MyController/MyAction/19">my link text</a>

Теперь я хотел бы выполнить тот же ajaxзвоните, но из jQuery, и я не знаю, как действовать!

Я хотел бы что-то вроде:

                    $.ajax({
                        type: "Post",
                        url: myURL,
                        begin: fctTabLoading,
                        complete: fctTabLoaded,
                        mode: "replace",
                        update: "#main-content",
                        cache: false,
                        success: function () { alert('success'); }
                    });

Я знаю, что вышеупомянутый скрипт ajax не будет работать, потому что 'mode' и«обновление» не распознается.Так что я заблокирован.

Это сводит меня с ума :(

Почему я не могу использовать MVC ActionLink? Потому что мне сначала нужно показать диалоговое окно jquery, чтобы пользователь мог подтвердить только тогдасделайте вызов ajax, чтобы обновить определенный div на моей странице.

Любая помощь очень ценится.

Спасибо.

Answer 1

Вы можете начать с замены ссылки Ajax обычной ссылкой:

@Html.ActionLink(
    "my link text",                   // linkText
    "MyAction",                       // actionName
    "MyController",                   // controllerName
    new { id = Model.RequestID },     // routeValues
    new { id = "mylink" }             // htmlAttributes
)

, которая будет производить следующую разметку:

<a href="/MyController/MyAction/12345" id="mylink">my link text</a>

и затем в отдельном js-файле незаметно AJAXify it:

$(function() {
    $('#mylink').click(function() {
        $.ajax({
            url: this.href,
            type: 'POST',
            beforeSend: fctTabLoading,   // corresponds to your OnBegin callback
            complete: fctTabLoaded,      // corresponds to your OnComplete callback
            success: function(result) {
                $('#main-content').html(result);
            }
        });

        return false;
    });
});

Answer 2

Как вы знаете, Ajax.ActionLink использует jquery.unobtrusive-ajax.js для выполнения ссылок ajax.

Если вы посмотрите на этот файл, вы увидите, что обработчики событий используют привязку живых событий jquery,Это связывает слушатель события с объектом документа.Итак, если вы хотите подтвердить, прежде чем это событие было запущено, вы можете привязать непосредственно к элементу, как показано ниже:

$('#YOUR_ELEMENT').click(function () {
    var confirmed = confirm("CONFIRM_MESSAGE");
    if (!confirmed ) {
        return false;
    }
    return true;
});

Чтобы использовать диалог jquery, вы можете сделать следующее:

function confirmDialog () {
   $('#YOUR_DIALOG').dialog(
       { buttons: { "Ok": function() { return true; },
                  { "Cancel": function() {return false;}
       }
   });

}

, а затем вы установите подтверждение в предыдущей функции для подтвержденияДиалог ().*** Параметры диалогового окна могут быть не совсем такими, как вы хотите, но это должно помочь вам.