剃刀中的锚标记助手答案

【问题标题】：Anchor tag helper in razor剃刀中的锚标记助手
【发布时间】：2019-08-01 23:17:18
【问题描述】：

我正在尝试导航到剃须刀应用上当前目录之外的详细信息页面。如果我使用这个静态标签，它可以正常工作

<a href="/campdet/create/@Model.Camp.IdCamp">Details</a>

但是，如果我尝试使用其中一个标签助手，它会在 href 部分产生一个空字符串

<a asp-route="/campdet/create/1" class="btn btn-info"><i class="material-icons">zoom_in</i> </a>
<a asp-page="/campdet/create/1" class="btn btn-info"><i class="material-icons">zoom_in</i> </a><a href="/campdet/create/@Model.Camp.IdCamp">Details</a>

目标页面（campdet\create）像这样被限制

@page "{id:int}"

我在启动时没有任何特殊的路由配置。我做错了什么？

【问题讨论】：

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

【解决方案1】：

asp-page属性指定页面名称，asp-route-id属性指定路由：例如：

&lt;a asp-page="/campdet/create" asp-route-id="@Model.Camp.IdCamp"&gt;zoom_in&lt;/a&gt;

【讨论】：

【解决方案2】：

anchor 标记助手以 HTML 锚 () 标记为目标，该标记用于从传递给各种自定义属性的值生成相对链接。它还可用于生成外部资源的绝对 URL。锚标记助手的作用是根据传递给其自定义属性的参数值生成一个 (href ) 属性。

格式：

@Html.ActionLink("Some link text", "MyAction", "MyController", protocol: null, hostName: null, fragment: "MyAnchor", routeValues: null, htmlAttributes: null)

示例 1（“详细信息”页面上的元素，带有一个点击链接，该链接将重定向到“编辑”页面的特定部分，（例如，“编辑”页面的底部））：

<span style="float:right;">@Html.ActionLink(linkText: "Edit Notes", actionName: "Edit", controllerName: "Form", protocol: null, hostName: null, fragment: "anchor", routeValues: new { id = Model.FormId }, htmlAttributes: new { @class = "badge badge-pill badge-warning" })</span>

示例 2（“编辑”页面上的元素在最顶部的标记中带有“name='anchor'”和“id = 'anchor'”）

<div name="anchor" id="anchor"class="form-group">
                                <div class="col-md-12">
                                    <span>@Html.Label("ReviewStatusNotes", "Notes (280 char max):", new { style = "font-weight:500" })</span>
                                    <span>@Html.TextAreaFor(model => model.ReviewStatusNotes, new { @class = "form-control", rows = "5" })</span>
                                    @Html.ValidationMessageFor(model => model.ReviewStatusNotes, "", new { @class = "text-danger" })
                                </div>
                            </div>

输出：

.../Form/Edit/8#anchor

【讨论】：