将整个按钮链接到它包含的 Ajax.ActionLink答案

【问题标题】：Make whole button link to the Ajax.ActionLink it contains将整个按钮链接到它包含的 Ajax.ActionLink
【发布时间】：2014-04-12 04:42:15
【问题描述】：

我正在使用下面的代码来实现排序：

<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 时，它可以工作，但如果我点击其他任何地方（按钮边界和文本之间的填充），它就不会做任何事情。

由于 ajax 方法似乎没有 Url. 帮助器，也没有 Ajax.ButtonLink ，所以我对如何在这个 ajax 调用中包装整个按钮有点迷茫。

【问题讨论】：

标签： ajax asp.net-mvc-4 asp.net-ajax asp.net-mvc-5

【解决方案1】：

我很厚。在这种情况下（使用 Bootstrap 类），我只需要将按钮的 classes、"btn btn-default" 添加到我的 ActionLink 的 @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.
    )

【讨论】：

但我想在我的按钮中有一个跨度和一些内容。那怎么样？

【解决方案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);
        }


    });
});

【讨论】：