BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据

OneToOne 垂直扩展表字段是很常见的方法, 主表存商品资料, 分表存每个客户对应商品的备注和个性化的价格等等, 本文使用Blazor一步步实现这个简单的需求.

1. 基于实战 10分钟编写数据库维护项目建立项目 `b17tableII`

2. 数据实体类

One To One 关系：

在这里我们使用 [Navigate(nameof(SubCagetory3PK.Id))] 来导航, 在两个实体之间定义了一对一的关系,这里Cagetory3与SubCagetory3PK是一对一的关系。

/// <summary>

/// OneToOne, 两边都用 pk 作为关联，才是绝对的1v1, 否则是 ManyToOne

/// </summary>

class Cagetory3

{

    public Guid Id { get; set; }

    public string? Name { get; set; }

    [Column(IsIgnore = true)]

    public string SubName

    {

        get => subName ?? (Ext?.Remark ?? "");

        set

        {

            subName = value;

            Ext = Ext ?? new SubCagetory3PK() { Id = Id };

            Ext!.Remark = value;

        }

    }

    string? subName;

    /// <summary>

    /// 垂直分表,扩展字段

    /// </summary>

    [Navigate(nameof(SubCagetory3PK.Id))]

    public SubCagetory3PK? Ext { get; set; }

}

class SubCagetory3PK

{

    [Column(IsPrimary = true)]

    public Guid Id { get; set; }

    public virtual Cagetory3? Cagetory { get; set; }

    public string? Remark { get; set; }

}

3. 下面我们来建立初始示例数据

子表的Id一定要跟主表Id一致,才是OneToOne

    public static void GenDemoDatas(IFreeSql fsql)

    {

        var repo = fsql.GetRepository<Cagetory3>();

        if (repo.Select.Any()) return;

        repo.DbContextOptions.EnableCascadeSave = true;

        //OneToOne 关键点

        var uid = Guid.NewGuid();

        var uid2 = Guid.NewGuid();

        var cts = new[]

        {

            new Cagetory3

            {

                Id=uid, //OneToOne 关键点

                Name = "oto分类1",

                Ext = new SubCagetory3PK {Id=uid, Remark = "扩展备注1" }

            } ,

            new Cagetory3

            {

                Id=uid2, //OneToOne 关键点

                Name = "oto分类2",

                Ext = new SubCagetory3PK {Id=uid2, Remark = "扩展备注2" }

            } ,

        };

        repo.Insert(cts);

    }

4. 下一步我们需要注入带全功能的 FreeSqlDataService 数据服务:

在 Program.cs 添加以下语句:

builder.Services.AddSingleton(typeof(FreeSqlDataService<>));

5. 建立测试页面

新建文件FetchDataCagetory3.razor

<TablePollo TItem="Cagetory3"

            IncludeByPropertyNames="@IncludeByPropertyNames"

            ItemDetails="NullClass"

            ItemDetailsII="NullClass"

            EnableCascadeSave />

@code {

    // 由于使用了FreeSql ORM 数据服务,可以直接取对象

    [Inject] IFreeSql? fsql { get; set; }

    [Inject] ToastService? toastService { get; set; }

    List<string> IncludeByPropertyNames = new List<string> {

                nameof(Cagetory3.Ext) ,

            };

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            Cagetory3.GenDemoDatas(fsql!);

        }

    }

}

6. 运行

我们运行程序的时候,我们可以看到:数据库中已经自动创建了两张表了:

动图

源码

https://github.com/densen2014/Blazor100/tree/master/b17tableII

https://gitee.com/densen2014/Blazor100/tree/master/b17tableII

参考资料

FreeSql （十八）导航属性 https://www.cnblogs.com/FreeSql/p/11531352.html

多表查询 https://github.com/dotnetcore/FreeSql/wiki/多表查询

联级保存 https://github.com/dotnetcore/FreeSql/wiki/联级保存

BootstrapBlazor的FreeSql数据注入服务扩展包 https://github.com/densen2014/Densen.Freesql

BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据 - OneToOne的更多相关文章

[js开源组件开发]table表格组件
table表格组件表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...
使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染不同的按钮? 解决方法我们在vue2中,动态渲染html 使用的是 retu ...
封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
封装Vue Element的可编辑table表格组件
前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...
Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
Vue3学习（十一）之 table表格组件的使用
一.前言大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...
表格组件神器：bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
ElementUI的Table表格添加自定义头CheckBox多选框
在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...
封装Vue纵向表头左右结构的table表格
我们前端开发人员在使用表格的过程中,大概率碰到的都是表格头部在表格的最上边,然后呈一行展示,紧接着就是表格的每一行的每一个单元格来展示具体内容的场景,很少会遇到表格的头部呈纵向一行展示,也就是说表格的 ...
【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

随机推荐

css如何实现（animation）跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
关于*p++的执行顺序
不确定*p++哪个优先级高了,想偷懒到百度找找解释,发现高赞的评论下也骂声一片,还是回头自己试试. 1 #include <iostream> 2 using namespace std; ...
mysql自动生成时间
字段类型: DATETIME 默认值: CURRENT_TIMESTAMP
PHP、Navicat安装
一.PHPStudy小皮面板:https://public.xp.cn/upgrades/phpStudy_64.zip 下载完成后解压后双击点击立即安装安装完成启动MySQL,Nginx(my ...
Jmeter、Postman之RSA加密登录接口测试
方法1:直接用在线加密工具进行加密,得到密码参考地址 https://www.toolscat.com/decode/rsa 输入公钥和密码,直接加密即可方法2:postman工具步骤1:接 ...
作业三：CART回归树算法
作业三:CART回归树算法班级:20大数据(3)班学号:201613341 题目一表1为拖欠贷款人员训练样本数据集,使用CART算法基于该表数据构造决策树模型,并使用表2中测试样本集确定剪枝后的 ...
C# core 最简单的方式写入日志
System.IO.StreamWriter sw = System.IO.File.AppendText( LogPath + LogFielPrefix + "Error-" ...
CentOS 8.x 编译安装LNMP（Linux + Nginx + MySQL + PHP）架构部署动态网站环境
LNMP动态网站部署架构是一套由Linux + Nginx + MySQL + PHP组成的动态网站系统解决方案,具有免费.高效.扩展性强且资源消耗低等优良特性,目前正在被广泛使用. 前传: 1.Ce ...
PLC入门笔记9
梯形图电路之电机控制电机直接启动控制电路电机正反停控制电路我的图.. 但愿最后说的不要发生吧例如下错了程序导致... 最好外部电路互锁一下.. 电机故障判断电路我的图.. 电机故障转换电路 ...
React中的固定组件（随遇随记）
<React.StrictMode></React.StrictMode>对组件中使用严格模式 <React.Fragment></React.Fragmen ...

BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据 - OneToOne