CODEWITHSUNDEEP
asp.net-corerazorroutesrazor-pages
Leonardo Perez
Leonardo Perez

Reputation: 73

Anchor tag helper in razor

I´m trying to navigate to a details page outside of my current directory on a razor app. If i use this static tag it works ok

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

however if i try to use one of the tag helpers it produces an empty string in the href portion

<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>

The destination page (campdet\create) its constrained like this

@page "{id:int}"

I don´t have any special routing config on the startup. What am i doing wrong ?

Upvotes: 2

Views: 5090

Answers (2)

Max Jackson
Max Jackson

Reputation: 11

The anchor tag helper targets the HTML anchor () tag which is used to generate relative links from the values passed to various custom attributes. It can also be used to generate absolute URLs to external resources. The anchor tag helper's role is to generate an (href )attribute from the parameter values passed to its custom attributes.

Format:

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

Example 1 (element on the 'Details' page with a link to click that will redirect to a specific section of the 'Edit' page, (e.g., bottom of 'Edit' page)):

<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>

Example 2 (element on the 'Edit' page with " name='anchor' " and " id = 'anchor' " in the topmost tag)

<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>

OUTPUT:

.../Form/Edit/8#anchor

Upvotes: 1

Slava Logos
Slava Logos

Reputation: 351

Specify the page name in asp-page attribute and specify the route in asp-route-id attribute: EG: 

<a asp-page="/campdet/create" asp-route-id="@Model.Camp.IdCamp">zoom_in</a>

Upvotes: 1

Related Questions