基于 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>- Categories -</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 />
标签列表