如何将ASP.NET Core Razor Pages文章URL优化为友好格式？

目前我的文章URL格式如下：

http://localhost:5153/Content/Article?title=The%20Statistic%20Article

但我希望它们变为如下格式：

http://localhost:5153/Content/Article/the-statistic-article 或 http://localhost:5153/Content/the-statistic-article

文章内容存储在Article.cshtml中。

现有页面模型代码：

public async Task<IActionResult> OnGetArticleAsync(int id)
{
    Article = await _context.Articles
                            .FirstOrDefaultAsync(m => m.Id == id);

    if (Article == null)
    {
        return NotFound();
    }
        
    return new JsonResult(new { redirectToUrl = Url.Page("Article", new { title = Article.Title }), articleData = Article });
}

AJAX代码：

$.ajax({
        url: 'Article?handler=Article',
        type: 'GET',
        data: { id: id }, 
        success: function (response) {
            if (response.redirectToUrl) {

                localStorage.setItem('articleData', JSON.stringify(response.articleData));
                window.location.href = response.redirectToUrl;
            }
        },

        error: function (xhr, status, error) {
            // Handle errors here
            console.error(error);
        }
    });

1. 配置友好路由 #

先在项目的路由配置里添加规则，让系统能识别slug格式的URL：

.NET 6+（Program.cs） #

app.MapRazorPages();
// 匹配 /Content/Article/xxx 格式
app.MapRazorPage("/Content/Article/{slug}", "/Content/Article");
// 如果要实现 /Content/xxx 格式，再加这条
app.MapRazorPage("/Content/{slug}", "/Content/Article");

.NET 5及更早（Startup.cs） #

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...其他中间件代码
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        // 添加自定义路由规则
        endpoints.MapRazorPage("/Content/Article/{slug}", "/Content/Article");
        endpoints.MapRazorPage("/Content/{slug}", "/Content/Article");
    });
}

2. 给文章添加Slug字段并生成值 #

给Article实体新增Slug字段，用来存储格式化后的标题（比如the-statistic-article）。可以写个工具方法生成Slug，在创建文章时存入数据库：

生成Slug的工具方法 #

public static string GenerateSlug(string title)
{
    // 转小写、空格替换为连字符、清除特殊字符
    return title.ToLowerInvariant()
                .Replace(" ", "-")
                .Replace("[^a-z0-9-]", "");
}

创建文章时调用：

article.Slug = GenerateSlug(article.Title);
_context.Articles.Add(article);
await _context.SaveChangesAsync();

3. 修改页面模型逻辑 #

调整页面模型代码，让它支持通过Slug查询文章，同时修改重定向URL的生成逻辑：

// 处理带slug的URL请求
public async Task<IActionResult> OnGetAsync(string slug)
{
    Article = await _context.Articles
                            .FirstOrDefaultAsync(m => m.Slug == slug);

    if (Article == null)
    {
        return NotFound();
    }
        
    return Page();
}

// 保留原有的根据ID获取的接口，供AJAX调用
public async Task<IActionResult> OnGetArticleAsync(int id)
{
    Article = await _context.Articles
                            .FirstOrDefaultAsync(m => m.Id == id);

    if (Article == null)
    {
        return NotFound();
    }
    
    // 生成slug
    var slug = GenerateSlug(Article.Title);
    // 生成目标格式的URL，二选一即可
    var redirectUrl = Url.Page("Article", new { slug = slug });
    // 如果要/Content/{slug}格式，用这个：
    // var redirectUrl = Url.Page("/Content/Article", new { slug = slug }, protocol: Request.Scheme);
    
    return new JsonResult(new { redirectToUrl = redirectUrl, articleData = Article });
}

4. 调整Article页面的路由指令 #

在Article.cshtml顶部添加以下路由指令，让页面能匹配不同的URL格式：

@page "/Content/Article"
@page "/Content/Article/{slug}"
@page "/Content/{slug}"
@model YourNamespace.Content.ArticleModel

完成以上配置后，AJAX请求后重定向的URL就会变成你想要的slug格式了。

内容的提问来源于stack exchange，提问作者Mehmet Ali K.