基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四)

基于 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 实战系列(三)

上一篇完成了博客的分页查询文章列表页面的数据绑定和分页功能,本篇将继续完成剩下的几个页面。

在开始主题之前重新解决上一篇的最后一个问题,当点击了头部组件的/posts链接时直接强制刷新了页面,经过查看文档和实践有了更好的解决方案。

先将头部组件Header.razor中的NavLink恢复成<NavLink href="http://www.likecs.com/posts">Posts</NavLink>,不需要点击事件了。

然后在Posts.razor中添加生命周期函数OnParametersSetAsync(),在初始化完成后执行。

/// <summary> /// 初始化完成后执行 /// </summary> /// <returns></returns> protected override async Task OnParametersSetAsync() { if (!page.HasValue) { page = 1; await RenderPage(page); } }

判断当前page参数是否有值,有值的话说明请求肯定是来自于翻页,当page没有值的时候就说明是头部的菜单点进来的。那么此时给page赋值为1,调用API加载数据即可。

分类列表

Categories.razor是分类列表页面,上篇文章已经实现了从API获取数据的方法,所以这里就很简单了,指定接受类型,然后在生命周期初始化OnInitializedAsync()中去获取数据。

@code{ /// <summary> /// categories /// </summary> private ServiceResult<IEnumerable<QueryCategoryDto>> categories; /// <summary> /// 初始化 /// </summary> protected override async Task OnInitializedAsync() { // 获取数据 categories = await Http.GetFromJsonAsync<ServiceResult<IEnumerable<QueryCategoryDto>>>($"/blog/categories"); } }

当获取到数据的时候进行绑定,没有数据的时候还是显示加载中的组件<Loading />让他转圈圈。

@if (categories == null) { <Loading /> } else { <div> <div> <h2>-&nbsp;Categories&nbsp;-</h2> <div> @if (categories.Success && categories.Result.Any()) { @foreach (var item in categories.Result) { <div> <div> <a href="http://www.likecs.com/category/@item.DisplayName/"> <h3> <i></i> @item.CategoryName </h3> <small>(@item.Count)</small> </a> </div> </div> } } else { <ErrorTip /> } </div> </div> </div> }

直接循环返回的数据列表categories.Result,绑定数据就好,当获取失败或者没有返回数据的时候显示错误提示组件<ErrorTip />

1

标签列表

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxwpf.html