Razor pages - anchor tag not properly generaed for area page

Question

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?

Answer 1

Hi @Vladislav Naydenov ,

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:
2. Use the _ViewImports.cshtml page and _ViewStart.cshtml page. In the Admin/Pages folder, add the _ViewImports.cshtml page and _ViewStart.cshtml page, 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:

---

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