Blazor班级管理页面编写和接口对接详解

来源：网络更新时间：2024-04-25 09:33:26

上一章节我们已经使用BootstrapBlazor UI组件完成了EasySQLite后台界面的基本搭建。本章节将重点介绍Blazor班级管理页面的编写和接口对接。

七天.NET 8 操作 SQLite 入门到实战详细教程：

第一天 SQLite 简介
第二天在 Windows 上配置 SQLite 环境
第三天 SQLite 快速入门
第四天 EasySQLite 前后端项目框架搭建
第五天引入 SQLite-net ORM 并封装常用方法
第六天后端班级管理相关接口完善和Swagger自定义配置
第七天BootstrapBlazor UI组件库引入（1）

EasySQLite 项目源码地址

GitHub 地址： https://github.com/YSGStudyHards/EasySQLite

Blazor简介和快速入门

不熟悉Blazor的同学可以先看这篇文章大概了解一下。

全面的ASP.NET Core Blazor简介和快速入门

前端Table页面和接口对接代码

主要是常见Table的数据展示、数据添加、数据删除、数据修改等操作。

@page "/SchoolClass"
@using Entity
@using WebUI.Common
@inject HttpClient _httpClient;

       AutoGenerateColumns="true"
       ShowToolbar="true"
       IsMultipleSelect="true"
       OnSaveAsync="@OnSaveAsync"
       OnQueryAsync="@OnQueryAsync"
       OnDeleteAsync="@OnDeleteAsync"
       IsStriped="true"
       IsBordered="true"
       ShowSearch="true"
       IsPagination="true"
       ShowSearchText="true">


        
    


@code {
    /// 
    /// 数据查询
    /// 

    /// options
    /// 
    private async Task> OnQueryAsync(QueryPageOptions options)
    {
        var getClass = new List();
        var getResults = await _httpClient.GetFromJsonAsync>>("api/SchoolClass/GetClass").ConfigureAwait(false);
        if (getResults.Success)
        {
            // 数据模糊过滤筛选
            if (!string.IsNullOrWhiteSpace(options.SearchText))
            {
                getClass = getResults.Data.Where(x => x.ClassName.Contains(options.SearchText)).ToList();
            }
            else
            {
                getClass = getResults.Data.ToList();
            }
        }

        //假分页
        return await Task.FromResult(new QueryData()
            {
                Items = getClass.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList(),
                TotalCount = getClass.Count()
            });
    }

    /// 
    /// 模拟数据增加和修改操作
    /// 

    /// studentInfo
    /// changedType
    /// 
    public async Task OnSaveAsync(SchoolClass studentInfo, ItemChangedType changedType)
    {
        if (changedType.ToString() == "Update")
        {
            var addResult = await _httpClient.PutAsJsonAsync($"api/SchoolClass/UpdateClass/{studentInfo.ClassID}", studentInfo).ConfigureAwait(false);
            if (UtilityBusiness.CheckResponse(addResult))
            {
                return await Task.FromResult(true);
            }
            else
            {
                return await Task.FromResult(false);
            }
        }
        else if (changedType.ToString() == "Add")
        {
            var addResult = await _httpClient.PostAsJsonAsync("api/SchoolClass/CreateClass", studentInfo).ConfigureAwait(false);
            if (UtilityBusiness.CheckResponse(addResult))
            {
                return await Task.FromResult(true);
            }
            else
            {
                return await Task.FromResult(false);
            }
        }

        return await Task.FromResult(true);
    }

    /// 
    /// 数据删除
    /// 

    /// items
    /// 
    private async Task OnDeleteAsync(IEnumerable items)
    {
        var deleteSuccessNum = 0;
        var schoolClassList = items.ToList();
        foreach (var item in schoolClassList)
        {
            var delResult = await _httpClient.DeleteAsync($"api/SchoolClass/DeleteClass/{item.ClassID}").ConfigureAwait(false);
            if (UtilityBusiness.CheckResponse(delResult))
            {
                deleteSuccessNum++;
            }
        }

        if (deleteSuccessNum > 0)
        {
            return await Task.FromResult(true);
        }
        else
        {
            return await Task.FromResult(false);
        }

    }
}

Blazor班级管理页面编写和接口对接详解

EasySQLite 项目源码地址

Blazor简介和快速入门

前端Table页面和接口对接代码

后端API接口

使用博客自动发布工具实现在oschina的自动发布

All in One：Prometheus 多实例数据统一管理最佳实践

窗函数在语音信号处理中的应用

分享一个GitHub Go语言2D游戏引擎及自制生存游戏

面试官：这就是你理解的Java多线程基础？

C#.NET体系图文概述—2024最全总结

架构师的生存法则：如何确定正确的架构目标

深入学习和理解Django模板层：构建动态页面

自定义Lua解析方式

Eureka的负载均衡

碧海苍云录内置菜单

定制虚拟偶像最新版

迷失的矿工中文版

文字密室逃脱