Home > OS >  Create href to subpage in Blazor
Create href to subpage in Blazor

Time:05-18

My page has this directive @page "/sales/reports" so it loads at https://localhost/sales/reports route.

I want to create link <a href="">Report 1</a> that will lead to a sub-page /sales/reports/{id} - for example https://localhost/sales/reports/8c5b8c1c-12b5-43ee-92c9-8d3bcb8644a4 but not sure what do I put in href of my anchor. When I simply put <a href="@myGuid">Report 1</a> link has a form of https://localhost/8c5b8c1c-12b5-43ee-92c9-8d3bcb8644a4. Do I need to hard-code <a href="sales/reports/@myGuid">Report 1</a> or there is a smarter way?

CodePudding user response:

The term 'subpage' does not really exist.

There are just 'pages' and they have 'routes'. Sometimes the route appears nested, as in your example, but this does not make it a 'subpage'.

The answer to your question is that, yes, you need to include the route to the 'page' you want to go to.

<a href=@($"sales/reports/{@myGuid}")>Report 1</a>

That doesn't necessarily mean hardcoding in the page itself. You might create a helper class that does that for you. For example:

class ReportPathCreator
{
    public static string ReportRouteFor(Guid reportGuid) => $"sales/reports/{reportGuid}";
}

Then use:

<a href=@(ReportPathCreator.ReportRouteFor(myGuid))>Report 1</a>

Then, if you choose to change the route where reports are hosted, you only need to change it in the helper class and all anchor elements in your site will automatically pick up that new route.

UPDATE

You can also use the static class to generate a template for you to use instead of @page directive:

class ReportPathCreator
{
    public static string ReportRouteFor(Guid reportGuid) => $"sales/reports/{reportGuid}";

    public static string ReportTemplate = "sales/reports/{reportGuid:guid}";
}

And then, instead of @page directive, use:

@attribute [Route(ReportPathCreator.ReportTemplate)]
  • Related