question

VladislavNaydenov-0219 avatar image
0 Votes"
VladislavNaydenov-0219 asked VladislavNaydenov-0219 commented

Razor pages - anchor tag not properly generaed for area page

Hello,

I'm working on an ASP.NET 5 Razor Pages project and I'm facing an issue with an anchor tag for a page in an area having empty href attribute. The structure of the project is as follows:

 Project
        Areas
               Admin
                     Pages
                           PhotoSession
                               List
                               Edit

In the List page and want to have a link for each photo session pointing to its Edit page. The Edit page is defined as

 @page "photosession/edit/{id:int}"

The anchor tag is defined as

 <a asp-page="/PhotoSession/Edit" asp-route-id="photoSession.Id" class="btn bg-green btn-flat">Edit photo session</a>

But the generated html is:

 <a class="btn bg-green btn-flat" href="">Edit photo session</a>


Adding asp-area="Admin" doesn't help. What could be the issue?


dotnet-aspnet-core-razor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered VladislavNaydenov-0219 commented

Hi @VladislavNaydenov-0219,

First, please check the photoSession.Id, make sure it contains value.

Then, to use Asp.net core tag helper, we need to add the `@addTagHelper` directive. The @addTagHelper directive makes Tag Helpers available to the view.

By default, in asp.net core application, the @addTagHelper directive has already added this directive in the _ViewImports.cshtml page and _Layout page, and if we use it, we could use the tag helper.

But for the Areas page, since they are not adding the @addTagHelper directive, the tag helper will not work.

To solve it, you can refer the following method to add the @addTagHelper directive:

  1. Directly add the @addTagHelper directive in the View:

    Code as below

      @page
         @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
         @model Core5_0.Areas.Admin.Pages.PhotoSession.ListModel
     
         <h2>List Page</h2>
         <br />
         <a class="nav-link text-dark" asp-area="Admin" asp-page="/PhotoSession/Edit" asp-route-id="1001">Edit photo session</a>
    

    Code in the Edit page:

      @page "/photosession/edit/{id:int}"
         @model Core5_0.Areas.Admin.Pages.PhotoSession.EditModel
    
         <h2>Edit Page</h2>
    

    [Note] For the @page directive, if we use /photosession/edit/{id:int}, the request url is https://localhost:44382/photosession/edit/1001,
    if we use photosession/edit/{id:int}, the request url should like this: https://localhost:44382/Admin/PhotoSession/Edit/photosession/edit/1001.

    The result as below:

    143412-3.gif

  2. Use the _ViewImports.cshtml page and _ViewStart.cshtml page.

    In the Admin/Pages folder, add the _ViewImports.cshtml page and _ViewStart.cshtml page,

    143339-image.png

    The _ViewImports.cshtml page content (change the application name (Core5_0) to yours):

      @using Core5_0
         @namespace Core5_0.Areas.Admin.Pages
         @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    

    The _ViewStart.cshtml page:

      @{
             Layout = "_Layout";
         }
    

    Then, in the list page, add the layout page:

      @page 
         @{ 
             Layout = "_Layout";
         }
    
         @model Core5_0.Areas.Admin.Pages.PhotoSession.ListModel
     
         <h2>List Page</h2>
         <br />
         <a class="nav-link text-dark" asp-area="Admin" asp-page="/PhotoSession/Edit" asp-route-id="1001">Edit photo session</a>
    

    The result as below:

    143310-2.gif


If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion



3.gif (397.1 KiB)
image.png (16.0 KiB)
2.gif (365.1 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hello @ZhiLv-MSFT,

Thank you very much for your detailed answer.

I do have a _ViewImports.cshtml file with the addTagHelper directive. It turns out the page name has to be in the format ".Edit". Now I'm getting the anchor element with properly populated href attribute:

143583-anchor-def.png


143584-anchor-element.png


0 Votes 0 ·
anchor-def.png (19.3 KiB)
anchor-element.png (20.3 KiB)