如何创建单击时将转到剃刀页面的按钮（dotnet core 2中的“剃刀页面”）答案

【问题标题】：How to create a button that will go to a razor page when clicked ("Razor page" in dotnet core 2)如何创建单击时将转到剃刀页面的按钮（dotnet core 2中的“剃刀页面”）
【发布时间】：2018-08-07 09:37:05
【问题描述】：

我可以使用锚标记助手转到不同的剃须刀页面（从现有的剃须刀页面），例如这行得通：

<a asp-page="./EditReport" asp-route-id="@report.IntegrityReportId" class="btn fa fa-edit"></a>

我怎样才能让类似的东西工作，但使用一个按钮。我试过了：

<button type="button" asp-route-data="@report.IntegrityReportId" asp-route="EditReport">EditReport</button>

但是页面永远不会加载。我还尝试使用具有不同变体的页面处理程序：

<input type="button" asp-page-handler="EditReport" asp-route="@report.IntegrityReportId"/>

并关联（在页面cs文件中）：

public ActionResult OnEditReport(int id)
        {
            return RedirectToPage("./EditReport", id);
        }

但是这个方法永远不会被调用（我也尝试过命名方法 OnPostEditReport 但同样的问题。

如果有帮助，我原来的非 dotnet 核心应用可以正常工作：

<button type="button" title="Edit report" class="btn btn-datatable fa fa-edit" onclick="location.href = '@Url.Action("EditReport", "Home", new {id = report.IntegrityReportID})'"></button>

任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： asp.net-core asp.net-core-2.0 razor-pages

【解决方案1】：

我设法通过使用下面的锚获得了我需要的效果 - 所以它看起来像一个按钮..

<a asp-page="./EditReport" asp-route-id="@report.IntegrityReportId" class="btn btn-default"><i class="fa fa-edit"></i></a>

【讨论】：

【解决方案2】：

您不能只使用一个按钮，该按钮会在没有 javascript 的情况下重定向到其他剃须刀页面。您可以使用表单标签内的提交按钮来重定向到其他剃须刀页面。以下示例演示了如何进行 GET 重定向，该重定向将重定向到 About 页面：

<form method="get">
    <button type="submit" asp-page="./About">Click me to go to the About page</button>
</form>

如果您需要 POST 请求，请使用以下代码：

<form method="post">
    <button type="submit" asp-page="./About">Click me to go to the About page</button>
</form>

在这两种情况下，您都可以定义路由值或处理程序以满足需求。

希望对你有帮助。

【讨论】：

感谢pitaridis，但我仍然无法让它工作。该页面看起来确实在做某事，但随后原始页面再次出现。你会如何在javascript中做到这一点？你知道为什么我们需要在 javascript 中执行此操作和/或为什么这与我可以使用 formaction 的标准 MVC 不同吗？非常感谢

【解决方案3】：

以下解决方案适用于我的 ASP.NET Core 3.1 项目：

<a class="btn btn-primary btn-sm" asp-page="./Edit" asp-route-id="@item.Id"><i class="fas fa-user"></i> Edit</a>

上面突出显示的代码都在一行中，就像堆栈溢出给出答案的方式一样。注意我选择在按钮中的文本之前显示图标，然后我在按钮标签“编辑”之前添加了一个单独的 chazr 空格，这样按钮看起来更好一点。

【讨论】：

【解决方案4】：

我知道它晚了一年，但你必须删除 'type="button"'，也尝试删除 '.'来自 asp-page="./EditReport"。 BR。

【讨论】：

【解决方案5】：

这适用于 ASPNET Core 3.1。

<form method="get" action="/myRazorPage">
    <button type="submit">Join Now</button>
</form>

【讨论】：

【解决方案6】：

使用按钮：

<button type="button" class="btn" onclick="window.location.href = '/YourPage'">Button Title</button>

【讨论】：