Question

我这里有一个按钮。

<button type="button">@item.StepsToList steps to list</button>

我希望按钮转到与下面的操作类似的页面。

/ ManageSpaces / ID /概述

我试图通过将此操作链接放在按钮内来实现此目的。

@Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new {controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId })

如何使上面的操作链接在button标记内工作？

Answer 1

按钮不适用于导航。这就是超链接的用途。将非锚<a>置于<button>内也无效。如果您专注于按钮的外观，则可以选择

使用按钮。捕获click事件并使用window.location或
使用超链接。添加一个CSS框架，如Bootstrap或Foundation，并应用其中一种按钮样式。

假设你完全熟悉jQuery，那么这样的东西适用于前一点：

<button class="link-button" data-url="/some/url">I navigate somewhere</button>

<script>
    $('.link-button').on('click', function(e) {
        window.location = $(this).data('url');
    });
</script>

对于后一点，Bootstrap和Foundation都有专门的样式，可以使任何东西看起来像“按钮”：

Bootstrap

<a href="/some/url" class="btn btn-default">I navigate somewhere</a>

Foundation

<a href="#" class="button">I navigate somewhere</a>

Answer 2

目前还不清楚你想要实现的目标。您想简单地导航到新页面吗？如果是这样，您应该使用Html.ActionLink本身而不是<button> - 这就是他们的目的。您可以将生成的<a>元素设置为看起来像按钮。如果您要将表单发布到新的操作方法，则应在调用Html.BeginForm时指定该表单，然后单击该按钮时该按钮将自动提交给该操作。

Answer 3

@Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new { controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId }, new { @class = "btn btn-default " })

导航到按钮单击时的页面

3 个答案:

Bootstrap

Foundation