Generate anchor tag using Razor Pages - razor-pages

Question

I'm familiar with the CRUD examples of how to generate an anchor link using asp-page and asp-route-id.
There are a lot of these examples but how do I construct an anchor tag that looks like this and is on a regular page that a visitor (and not an admin(CRUD)) would visit - for instance on a list-of-blog-posts-page:
My first blog post
My first blog post
I'm looking to use Razor syntax, and not by concatenating strings - something like this:
<a asp-page="blog/#{seoblogtitle}" asp-route-id="#model.id">#item.Title</a>
Where #{seoblogtitle} is a route template and #model.id is a GUID.
TL;DR;
How do you contruct an anchor link like the one below using Razor in a Razor Page?
My first blog post

Answer 1

It's not entirely clear what you are after. You mention a Guid, but you don't feature it in the generated URL. I am working on the assumption that you need to pass the Guid along with the seo-friendly title. What you can do is construct a Dictionary<string, string> and pass that to the asp-all-route-values attribute of the Anchor tag helper.
Your Blog page has this template: #page "{title}/{id}"
Your model includes a List<BlogTitle> property (Links) where the BlogTitle class looks like this (at a minimum):
public class BlogLink
{
public string Title { get; set; }
public Guid Id { get; set; } = Guid.NewGuid();
}
In the content page, you would do this:
#foreach(var link in Model.Links)
{
var routeValues = new Dictionary<string, string>
{
{ "title", SeoFriendly(link.Title) },
{ "id", link.Id.ToString() }
};
<a asp-page="blog" asp-all-route-data="routeValues">#link.Title</a><br />
}
The SeoFriendly method is used to convert "My First Blog Title" etc to its seo-friendly version. It could even be defined in a #functions section in the page:
#functions{
public static string SeoFriendly(string s)
{
return s.Replace(" ", "-").ToLower(); // you need something more robust than this
}
}
See Note 1 here: https://www.learnrazorpages.com/razor-pages/tag-helpers/anchor-tag-helper
Note: if you want to keep the dictionary generation code out of the content page, add a Dictionary<string, string> property to your BlogTitle class and generate the values in the PageModel.