基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身，让它跑起来
基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化，Swagger登场
基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先
基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查
基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API，包装返回模型
基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger，分组、描述、小绿锁
基于 abp vNext 和 .NET Core 开发博客项目 - 接入GitHub，用JWT保护你的API
基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录
基于 abp vNext 和 .NET Core 开发博客项目 - 使用Redis缓存数据
基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理
基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（一）
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（二）
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（三）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（一）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（四）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（五）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（一）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（三）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（四）
上一篇完成了分类标签友链的列表查询页面数据绑定，还剩下一个文章详情页的数据没有绑，现在简单的解决掉。
文章详情之前已经添加了四个参数：year、month、day、name，用来组成我们最终的URL，继续添加一个参数用来接收API返回的数据。
[Parameter] public int year { get; set; } [Parameter] public int month { get; set; } [Parameter] public int day { get; set; } [Parameter] public string name { get; set; } /// <summary> /// URL /// </summary> private string url => $"/{year}/{(month >= 10 ? month.ToString() : $"0{month}")}/{(day >= 10 ? day.ToString() : $"0{day}")}/{name}/"; /// <summary> /// 文章详情数据 /// </summary> private ServiceResult<PostDetailDto> post;然后在初始化方法OnInitializedAsync()中请求数据。
/// <summary> /// 初始化 /// </summary> protected override async Task OnInitializedAsync() { // 获取数据 post = await Http.GetFromJsonAsync<ServiceResult<PostDetailDto>>($"/blog/post?url={url}"); }现在拿到了post数据，然后在HTML中绑定即可。
@if (post == null) { <Loading /> } else { @if (post.Success) { var _post = post.Result; <article> <header> <h1>@_post.Title</h1> <div> Author: <a href="javascript:;">@_post.Author</a> <span> Date: <a href="javascript:;">@_post.CreationTime</a> </span> <span> Category:<a href="http://www.likecs.com/category/@_post.Category.DisplayName/">@_post.Category.CategoryName</a> </span> </div> </header> <div> @((MarkupString)_post.Html) </div> <section> <p> <span>Author:</span> <span>@_post.Author</span> </p> <p> <span>Permalink:</span> <span><a href="http://www.likecs.com/post@_post.Url">https://meowv.com/post@_post.Url</a></span> </p> <p> <span>License:</span> <span>本文采用<a target="_blank" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"> 知识共享 署名-非商业性使用-禁止演绎(CC BY-NC-ND)国际许可协议 </a>进行许可</span> </p> </section> <section> <div> <span>Tag(s):</span> <span> @if (_post.Tags.Any()) { @foreach (var tag in _post.Tags) { <a href="http://www.likecs.com/tag/@tag.DisplayName/"># @tag.TagName</a> } } </span> </div> <div> <a @onclick="async () => await Common.BaskAsync()">back</a> <span>· </span> <a href="http://www.likecs.com/">home</a> </div> </section> <section> @if (_post.Previous != null) { <a @onclick="@(async () => await Common.NavigateTo($"/post{_post.Previous.Url}, true))" href="http://www.likecs.com/post@_post.Previous.Url">@_post.Previous.Title</a> } @if (_post.Next != null) { <a @onclick="@(async () => await Common.NavigateTo($"/post{_post.Next.Url}", true))" href="http://www.likecs.com/post@_post.Next.Url"> @_post.Next.Title </a> } </section> </article> } else { <ErrorTip /> } }其中有几个地方需要注意一下：
我们从post对象中取到的文章内容HTML，直接显示是不行了，需要将其解析为HTML标签，需要用到MarkupString。