MVC + EFCore 項目實戰 - 數倉管理系統8 - 數據源管理下--數據源預覽

上篇咱們完成了數據源保存功能，並順便看了保存後的數據源列表展現功能。

本篇咱們開始開發預覽功能，用戶預覽主要步驟：

一、點擊數據源卡片預覽按鈕

二、查看數據源包含的表

三、點擊表名，預覽表中數據

 

1、前端結構及樣式

效果以下圖（靜態html示意圖）：

左側是數據源及包含的表。

右上爲篩選條件（篩選條件功能先不開發，預留）。

右下爲點擊表以後顯示的預覽數據。

2、前端交互

先在DWController中新建Action及配套的視圖

 

咱們來開發視圖DBPreview.cshtml 的html結構：

對照效果圖，以2：10的比例分紅兩列：

 

展開代碼，左側數據源和表：

右上篩選條件：

右下是數據表格：

靜態的html結構就完成了，下面咱們來填充功能。

 

3、後臺邏輯

先來填充上圖方框中的值。

 

步驟：

一、頁面加載時接收一個DataSourceBase類型的對象，經過此對象獲取 數據源名稱 和 數據源類別。

二、前端根據 數據源類別 和 數據源名稱 動態查詢，獲取相關鏈接字符串。

三、以SQL SERVER爲例，根據鏈接字符串獲取相應數據庫下包含的表。

 

下面來依次完成。

打開 controller, 添加數據庫鏈接相關功能。

修改咱們的action, 完成步驟一、2，傳遞一個DataSourceBase類型的Model到View

* 用DataSourceBase而不用DSSQLServer，由於可能會有其餘類型的數據源，View不知道Action會傳什麼類型的數據源過去。

 

接着咱們在View中增長第3步，取得目標數據庫下包含的表。

 

說明一下，上圖中多了一個SQLHelper，後面由於會有比較複雜的多表操做，所以咱們新建個SQLHelper類，複雜的操做咱們直接用原生SQL來完成。

咱們簡單複習下ADO.NET操做數據庫的步驟。

一、用鏈接字符串初始化 SqlConnection 對象。

二、打開鏈接

三、執行語句，返回結果。

按操做類別分兩類：

查詢 返回個數據集合，咱們這裏用 DataTable；增刪改 返回受影響的行數。

按執行載體的形式分兩類：

執行文本SQL語句和執行存儲過程。

另外，爲了方便咱們通常還會將語句或存儲過程分爲帶參數和不帶參數兩種。

 

咱們用SQLHelper將這幾個步驟封裝，限於篇幅就不展開了，你們能夠去源碼中自行查看，有疑問能夠給我留言。下圖給出SQLHelper的結構概況。

 

回到數據源展現部分的html結構，咱們將原來的固定值替換。

下圖中方框處爲替換值，方框上面註釋代碼爲原來的值。

替換完後的展現效果：

 

總結

本次咱們先完成了查看數據源信息及數據源包含的表。

另外，咱們回顧了直接操做ADO.NET的基本步驟，並將步驟封裝成了SQLHelper.

雖然EFCore 能夠完成大部分數據庫的操做，但SQLHelper是一個很好的補充，能夠代替EFCore不擅長的部分。

 

限於篇幅，咱們在下一篇中完成點擊表名，預覽表中數據。

預覽表數據的主要問題是：表結構是動態的，咱們須要根據不一樣表的結構動態展現表字段及包含的數據，具體作法且聽下回分解。

 

歡迎在評論區留言打卡，happy coding ：）

 

 

P.S. 相關文章

MVC + EFCore 項目實戰 - 數倉管理系統7 - 數據源管理中--新增數據源

MVC + EFCore 項目實戰 - 數倉管理系統6 – 數據源管理上--使用view component完成卡片列表

MVC + EFCore 項目實戰 - 數倉管理系統5 – 菜單配置及里程碑劃分

MVC + EFCore 項目實戰 - 數倉管理系統4 – 需求分解

MVC + EFCore 項目實戰 - 數倉管理系統3 - 完成總體樣式風格配置

MVC + EFCore 項目實戰 - 數倉管理系統2- 搭建基本框架配置EFCore

MVC + EFCore 項目實戰 - 數倉管理系統1