新建 view component 框架

因為前面多次出現過 view component 的使用，分三步：建立類檔案（WidgetTableViewComponent.cs）、建立檢視檔案、呼叫。詳細步驟不再展開。

詳解

1、類檔案WidgetTableViewComponent.cs

我們接收兩個引數，一個是連線字串，一個是要查詢的表名。

核心功能就是要產生一個資料集的 json 字串。

json格式的字串比較容易在前後端傳遞、解析，推薦使用。

2、view component 渲染檢視

檢視的核心功能就是解析接收的json字串，拼接成表格的html.

整體的結構如下：

下面重點看如何拼接。

先對資料做個預處理，表格歸根到底就是個二維表，為了更方便處理，我們將json字串轉為二維陣列，如下。

處理前的字串類似這樣：

[{"DepartmentGroupKey":1,"ParentDepartmentGroupKey":null,"DepartmentGroupName":"Corporate"},

{"DepartmentGroupKey":2,"ParentDepartmentGroupKey":1,"DepartmentGroupName":"Executive General and Administration"},

{"DepartmentGroupKey":3,"ParentDepartmentGroupKey":1,"DepartmentGroupName":"Inventory Management"}]

即 [{標題：資料，標題：資料。。。}，。。。，{標題：資料，標題：資料。。。}] 這樣的格式。

處理後類似這樣：

[ [標題，標題],[資料，資料],[資料，資料]。。。[資料，資料] ]

這樣我們拼接html時只要把第一行遍歷作為標題，後面遍歷作為資料，不斷的append就可以了。

這樣我們的動態表格就構建好了，最後我們在DBPreview呼叫一下即可：

@await Component.InvokeAsync("WidgetTable", new { connStr = @connStr, tbName ="DimAccount" })

* 說明：tbName這個引數實際沒有用到（因為測試後發現不能將表名作為SqlParameter引數），直接改成了通過 Request.Query["curTb"] 來接收表名。

效果如圖，我們點選表名傳入不同的表名引數，就可以獲取相應表的資料預覽。

1、本次我們完成了資料來源管理最核心的部分，表格資料的動態展現。

資料來源管理的核心功能就全部完成了，相信你可以根據自己的需要擴充套件這個系統。

最後提供一點擴充套件思路拋磚引玉，僅供參考：

將表格元件抽象出來作為一個元件（事實上我命名時已經可以看出來），類似的可以擴充出各種各樣的圖形元件。

圖是根據表資料產生的，我們可以按照：

資料à抽象出資料來源 à 元件展示（表顯示、圖顯示、KPI展示、地圖展示等）分離出資料應用的三個層次。(可以參考tableau, 開發出一個微型的tableau出來。)

2、現在正在大力提倡國產化軟體，大家可以嘗試做一些產品化的東西，不要單純的做流程化的業務系統。

資料來源管理這個模組到這裡就全部結束了，其他非核心的（右上區域功能：動態產生篩選條件）以及其它UI等大家可自行優化。

因為時間問題，我們整個的實戰專案就開發到這。後面兩個模組整個的開發過程類似，作為課後作業，大家可自行完成：）

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