BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据 - OneToOne
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 ...
随机推荐
- 「DIARY」PKUSC 2021 游记
冬令营没了但是还有夏令营 (完蛋,前两天忘写游记了,完全没想起来--最后一天补一补) 试题分析在另外一篇博客上 # Day 0 早上去机场的时候把手机落在出租车上了 (还好之后找回来了),导致我前两天 ...
- D. Steps to One
题意 初始有一个空数组\(a\),接下来每次操作会这么做: 在\([1,n]\)中选择一个数,将其拼接在数组\(a\)后. 计算数组\(a\)的\(\gcd\). 如果结果是\(1\),退出. 否则, ...
- linux 第一节(基本命令)
RPM 红帽软件管理器,(源代码+安装规则打包) YUM 软件仓库yum源,打包了大量的软件. yum repolist all //列出所有仓库 ...
- <小李飞刀>系列 随笔
1.多情剑客无情剑 古龙的作品在电视上只看过电影版的陆小凤传奇,对古龙的作品也没有过系统的了解,初读时听到了李寻欢的名字,突然感觉可惜.觉得如此早就读到这种级别的小说有些暴殄天物,不过也算是以白纸状态 ...
- Typora初学
Markdown学习 TYPORA操作 Ctrl+Home 返回Typora顶部 Ctrl+End 返回Typora底部 Ctrl+T 创建表格 Ctrl+H 搜索并替换 Ctrl+Shift+M 公 ...
- HTML复习(17.表格样式)
重点 掌握caption-side(表格标题位置) 掌握border-collapse(表格边框合并) 掌握border-spacing(表格边框间距) 表格标题位置在CSS中,我们可以使用capti ...
- bzoj 2115
线性基好题 首先,如果一条路径被经过了两次,那么这条路径上的权值等于没有(废话) 基于这一点,我们其实已经找到了解决问题的方法了! 首先,由于可以反复经过一条边,因此我们可以把一条合法的路径看成这样的 ...
- elementUI table 第一列值相等合并
效果如下: 首先:在table上加:span-method="spanMethod" 其次: methods中加两个方法 dataPretreatment() { //表格数据列合 ...
- MySQL innodb存储引擎的数据存储结构
InnoDB存储引擎的数据存储结构 B+ 树 为什么选择B+树? 因为B+树的叶子节点存储了所有的data,所以它的非叶子节点可以存储更多的key,使得树更矮:树的高度几乎就是I/O的次数,所以选择更 ...
- DE 算法的变体python实现
上演化计算课的时候老师讲了一种DE算法的改进算法CoDE,于是看了下CoDE的论文中的算法步骤: 算法中使用的三种交叉策略: 根据不同的交叉策略采取不同的变异策略: 超参数的三种不同组合(一一对应): ...