上篇我们完成了数据源保存功能,并顺便看了保存后的数据源列表展示功能。

本篇我们开始开发预览功能,用户预览主要步骤:

1、点击数据源卡片预览按钮

2、查看数据源包含的表

3、点击表名,预览表中数据

 

一、前端结构及样式

效果如下图(静态html示意图):

左侧是数据源及包含的表。

右上为筛选条件(筛选条件功能先不开发,预留)。

右下为点击表之后显示的预览数据。

二、前端交互

先在DWController中新建Action及配套的视图

 

我们来开发视图DBPreview.cshtml 的html结构:

对照效果图,以2:10的比例分成两列:

 

展开代码,左侧数据源和表:

右上筛选条件:

右下是数据表格:

静态的html结构就完成了,下面我们来填充功能。

 

三、后台逻辑

先来填充上图方框中的值。

 

步骤:

1、页面加载时接收一个DataSourceBase类型的对象,通过此对象获取 数据源名称 和 数据源类别。

2、前端根据 数据源类别 和 数据源名称 动态查询,获取相关连接字符串。

3、以SQL SERVER为例,根据连接字符串获取相应数据库下包含的表。

 

下面来依次完成。

打开 controller, 添加数据库连接相关功能。

修改我们的action, 完成步骤1、2,传递一个DataSourceBase类型的Model到View

* 用DataSourceBase而不用DSSQLServer,因为可能会有其他类型的数据源,View不知道Action会传什么类型的数据源过去。

 

接着我们在View中增加第3步,取得目标数据库下包含的表。

 

说明一下,上图中多了一个SQLHelper,后面因为会有比较复杂的多表操作,因此我们新建个SQLHelper类,复杂的操作我们直接用原生SQL来完成。

我们简单复习下ADO.NET操作数据库的步骤。

1、用连接字符串初始化 SqlConnection 对象。

2、打开连接

3、执行语句,返回结果。

按操作类别分两类:

查询 返回个数据集合,我们这里用 DataTable;增删改 返回受影响的行数。

按执行载体的形式分两类:

执行文本SQL语句和执行存储过程。

另外,为了方便我们一般还会将语句或存储过程分为带参数和不带参数两种。

 

我们用SQLHelper将这几个步骤封装,限于篇幅就不展开了,大家可以去源码中自行查看,有疑问可以给我留言。下图给出SQLHelper的结构概况。

 

回到数据源展示部分的html结构,我们将原来的固定值替换。

下图中方框处为替换值,方框上面注释代码为原来的值。

替换完后的展示效果:

 

总结

本次我们先完成了查看数据源信息及数据源包含的表。

另外,我们回顾了直接操作ADO.NET的基本步骤,并将步骤封装成了SQLHelper.

虽然EFCore 可以完成大部分数据库的操作,但SQLHelper是一个很好的补充,可以代替EFCore不擅长的部分。

 

限于篇幅,我们在下一篇中完成点击表名,预览表中数据。

预览表数据的主要问题是:表结构是动态的,我们需要根据不同表的结构动态展示表字段及包含的数据,具体做法且听下回分解。

 

欢迎在评论区留言打卡,happy coding :)

 

MVC + EFCore 项目实战 - 数仓管理系统8 - 数据源管理下--数据源预览的更多相关文章

  1. MVC+EFCore 项目实战-数仓管理系统1

    项目背景及需求说明 这是一个数据管理"工具类"的系统,计划有三个核心功能: 1.通过界面配置相关连接字符串,查询数据库的表数据. 2.配置相关模板,生成数据库表. 可以界面填报或通 ...

  2. MVC + EFCore 项目实战 - 数仓管理系统9 - 数据源管理完结篇

    我们完成数据源管理的剩余部分:点击表名,预览表中数据. 我们需要完成的是下图的方框部分. 考虑到这块以后可能复用,我们将她独立出来,做成 view component. 新建 view compone ...

  3. MVC + EFCore 项目实战 - 数仓管理系统4 – 需求分解

    上次课程我们完成了项目基本的UI风格配置. 现在就开始进入我们的需求开发,我们先捋一下需求. 一.总体需求说明 项目背景第一篇文章已有介绍,我们回顾一下. 这是一个数据管理"工具类" ...

  4. MVC + EFCore 项目实战 - 数仓管理系统5 – 菜单配置及里程碑划分

    上次课程我们完成了需求的梳理. 我们根据梳理的需求把菜单配好,另外我们把项目里程碑也配置在系统中,开发和管理都在系统中,形成无文档化管理. 一.菜单配置 根据我们的归纳图,我们先将菜单配置好. 我们遵 ...

  5. MVC + EFCore 项目实战 - 数仓管理系统7 - 数据源管理中--新增数据源

    上篇我们完成了数据源列表展示功能(还未测试). 本篇我们来新增数据源,并查看列表展示功能.   接上篇: 二.数据源管理功能开发 2.新增数据源 我们用模态对话框来完成数据源的新增,效果如下图: 我们 ...

  6. MVC + EFCore 项目实战 - 数仓管理系统2- 搭建基本框架配置EFCore

    本次课程就正式进入开发部分. 首先我们先搭建项目框架,还是和之前渐进式风格保持一致,除必备组件外,尽量使用原生功能以方便大家理解. 开发工具:vs 2019 或以上 数据库:SQL SERVER 20 ...

  7. MVC + EFCore 项目实战 - 数仓管理系统3 - 完成整体样式风格配置

    上次课程我们新建了管理员的模板页. 本次我们就完善这个模板页,顺便加入样式和一些基本的组件,配置好整个项目的UI风格.   一.引入 共用的css和js文件 后端库用nuget, 前端库用libman ...

  8. MVC + EFCore 项目实战 - 数仓管理系统6 – 数据源管理上--使用view component完成卡片列表

    上次课程我们完成了菜单的配置和开发里程碑的划定. 按照计划,我们先来开发数据仓库管理中的数据源管理(对应菜单为:数据仓库管理 / 数据源),首批支持的数据源是SQL SERVER数据库. 一.数据源管 ...

  9. Asp.Net Core 项目实战之权限管理系统(6) 功能管理

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

随机推荐

  1. Centos7-Docker1.12开启守护进程(远程调用)

    本文讲述了Docker1.12.6在Linux下开启守护进程(远程调用),理论上来说其他版本也是一样的改法,博主参考很多都是巨坑,综合自己实战分享给大家,如有错误请留言; - 修改配置 1.修改 do ...

  2. escape sequence "\c"

    #include <stdio.h> int main() { printf("Hello World !\c"); return ; } [::@wjshan0808 ...

  3. Nginx 介绍和安装(centos7)

    本文是作者原创,版权归作者所有.若要转载,请注明出处 什么是 nginx ? Nginx 是高性能的 HTTP 和反向代理的服务器,处理高并发能力是十分强大的,能经受高负 载的考验,有报告表明能支持高 ...

  4. CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容

    css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明,例如: -moz- :F ...

  5. Instrction Arrangement UDH 4109 拓扑排序 or 最长路

    题目描述 Ali has taken the Computer Organization and Architecture course this term. He learned that ther ...

  6. POJ3262贪心

    题意:FJ去砍树,然后和平时一样留了 N (2 ≤ N ≤ 100,000)头牛吃草.当他回来的时候,他发现奶牛们正在津津有味地吃着FJ种的美丽的花!为了减少后续伤害,FJ决定立即采取行动:运输每头牛 ...

  7. Xshell如何连接

    Xshell如何连接

  8. day11 本日作业+周末作业

    目录 一.今日作业 1.编写文件copy工具 2.编写登录程序,账号密码来自于文件 3.编写注册程序,账号密码来存入文件 二.周末综合作业: 1.编写用户登录接口 2.编写程序实现用户注册后,可以登录 ...

  9. 方正璞华Java面试总结(武汉)

    方正璞华Java面试总结(武汉) 现在社会急缺复合型人才,计算机与日语的结合,具备这两种能力的人不愁工作,最后他们大多到的也是日企,甚至到日本去工作.至今为止接触的日企有光庭.方正璞华.先锋·商泰.英 ...

  10. 数据可视化基础专题(七):Pandas基础(六) 数据增删改以及相关操作

    首先第一部还是导入 Pandas 与 NumPy ,并且要生成一个 DataFrame ,这里小编就简单的使用随机数的形式进行生成,代码如下: import numpy as np import pa ...