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>

现在我想从jQuery执行相同的ajax调用，我不知道如何继续！

我想要像：

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

我知道上面的ajax脚本不起作用，因为'mode'和'update'无法识别。所以我被封锁了。

它让我发疯:(

为什么我不能使用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文件中不引人注意地AJAX化它：

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

}

然后你将在上一个函数中设置确认以确认对话框（）。 ***对话框选项可能不是您想要的，但这应该可以帮助您。

使用与jQuery相同的功能替换Ajax.ActionLink

2 个答案: