Making a pretty URL in ASP.NET Core with Razor Pages

In my example I use a model called Article.

Model

public class Article
{
    [Key]
    public int Id { get; set; }
    public string Heading { get; set; }
    public string URLHeading { get; set; }
    public string SubHeading { get; set; }
    public string BodyText { get; set; }
    public string ImagePath { get; set; }
}

The main thing to look at is that the Article model have a URLHeading (you can call it whatever you want. SEOHeading, ExtraHeading or something else…). The important thing is that this is the column in the database for the text that is going to be displayed in the URL exactly as you type it. Usually we want a lowercase string and the special characters to be gone and spaces to be either dashes or underscores. So like this article that is called:

Making a pretty URL in ASP.NET Core with Razor Pages

I change it to:

making-a-pretty-url-in-asp-net-core-with-razor-pages

We could just make a method that was doing these things for us, but I would rather prefer the URLHeading column to have even more control over every articles URL, so it can be customized 100% the way you want it. If you make a UI for your website where you fill out the article instead of directly in the database, then this way of doing it could come in handy. For the UI you just make a method that “translate” your heading to a URLHeading and edit it if it doesn’t look like you want it before pushing the article to the database.

However lets look at how this would look in the code when linking from one page to another. I have a frontpage called Index.cshtml, and then another page called Articles/Index.cshtml. The Index inside the articles folder will be the template for every articles on the website. So on the frontpage we would link like this:

Index.cshtml

<a asp-page="/Articles/Index" asp-route-id="@Model.FirstArticle.Id" asp-route-article="@Model.FirstArticle.URLHeading">
Link to article template page
</a>

By doing it this way, we tell that asp-page should be /Articles/Index which is our article-template-page we are linking to. Beside that we send an id and a article value to the page with asp-route-id and asp-route-article. Whatever you put behind the asp-route-{somthing} will be the variable name when actually going to the article-template. In this case we have a URLHeading, so we just use that to send with the article variable.

In the Articles/Index page we will then write this at the top of the page:

Articles/Index.cshtml

@page "/blog/{id}/{article}"

So in our case the URL will look like this, where id is the articles id in the database and article will be our custom made URLHeading:

www.domain.com/blog/3/making-a-pretty-url-in-asp-net-core-with-razor-pages