javascript - 如何从其 OnBegin 函数中引用已单击的 ActionLink `a` 元素？

Question

如何从 OnBegin 函数中引用被点击的 Ajax.ActionLink？

cshtml

@Ajax.ActionLink(
    typeName,
    "OrderQueueRows",
    new 
    {
        typeNames = Model.Name,
        includeDerivedTypes = ViewBag.IncludeDerivedTypes,
        excludeCompletedOrders = ViewBag.ExcludeCompletedOrders
    },
    new AjaxOptions {
        LoadingElementId="ajax-loading",
        OnBegin = "highlightFilter",
        UpdateTargetId = "order-queue-body"
    },
    new { @class = "show-exclusively" })

javascript

function highlightFilter() {
    $link = $(this);
    $link.css('color', 'red');
    $link.siblings().not($link).css('color', '');
}

Answer 1

您无法使用开箱即用的 Ajax.* 帮助程序实现此目的，因为它们不会将元素传递给 onBeforeSend 回调。 Microsoft 实现它的方式是传递 xhr 对象而不是被单击的 element。因此，一种可能性是修改 jquery.unobtrusive-ajax.js 脚本，以便将此信息传递给回调。在第 85 行，您将在 beforeSend 回调中看到以下内容:

result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments);

你所要做的就是像这样修改它:

result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);

如果您需要在 OnBegin 回调中同时拥有元素和 xhr 对象:

result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply({ xhr: this, element: element }, arguments);

现在，您的代码将开始工作，this 将代表元素:

function highlightFilter() {
    $link = $(this);
    $link.css('color', 'red');
    $link.siblings().not($link).css('color', '');
}

另一种可能是简单地将Ajax.ActionLink 替换为标准的Html.ActionLink，然后编写相应的jQuery 代码来订阅.click 事件并触发AJAX 请求。就个人而言，这可能是我会做的。