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接口

iceoryx源码阅读（八）——IPC通信机制

Jmeter-线程组下篇

密码安全：PBKDF2-SHA算法的应用与优缺点分析

自定义Lua解析器管理器-------演化脚本V0.5

使用微型pe工具箱注入驱动程序详细步骤

宝小鸡庄园6月19日正确答案及问答题解析

构造照亮世界——快速沃尔什变换 (FWT)

LLaMA 3 源码解读-大语言模型5

Rusty's Retirement一修大师修改器下载地址

【OpenVINO™】使用OpenVINO™ C# API 部署 YOLO-World实现实时开放词汇对象检测

Danger Dudes

土豪帝国

麻薯猫收藏正版

崩坏星穹铁道国际服官网版