将整个按钮链接到AJAX.ActionLink包含

Question

我正在使用以下代码实现排序：

<button type="button" class="btn btn-default @(Model.SortOrder.Trim().ToUpper().Equals("NAME") ? "active" : "")">
    @Ajax.ActionLink("Name", "Cause", "Search", new { query = Model.Query, category = Model.Category, pageNumber = 0, sortOrder = "NAME", sortDirection = "ASCENDING" }, new AjaxOptions() { UpdateTargetId = "SearchCauseSelfWidgetContent", InsertionMode = InsertionMode.Replace, OnSuccess = "PostAjaxLoad()" })
</button>

正如您可能期望的那样，当我在按钮中单击 text 时，它起作用了，但是如果我单击其他任何地方（按钮边界和文本之间的填充），它无能为力。p>由于Ajax方法似乎没有Url.助手，并且没有Ajax.ButtonLink，所以我在如何包装Ajax呼叫中的整个按钮上都丢失了一点。

Answer 1

我很厚。在这种情况下（带有bootstrap类），我只需要将按钮的class ES，"btn btn-default"添加到我的ActionLink'S @class：

@Ajax.ActionLink(
    "Name",
    "Cause",
    "Search",
    new { query = Model.Query, category = Model.Category, pageNumber = 0, sortOrder = "NAME", sortDirection = "ASCENDING" },
    new AjaxOptions() { UpdateTargetId = "SearchCauseSelfWidgetContent", InsertionMode = InsertionMode.Replace, OnSuccess = "PostAjaxLoad()"},
    new { @class = "btn btn-default" } // < -- added.
    )

Answer 2

将Ajax调用并将其绑在按钮

$('.btn-default').on('click', function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("Action", "Controller")',
        data: {
            query: '@Model.Query',
            category: '@Model.Category',
            etc...
        },
        cache: false,
        async: true,
        success: function (data) { 
            $('#SearchCauseSelfWidgetContent').html(data);
        }

    });
});