概述 本文描述WPF的拖放功能(Drag and Drop)。 拖放功能涉及到兩個功能,一個就是拖,一個是放。拖放可以發生在兩個控制項之間,也可以在一個控制項自己內部拖放。假設界面上有兩個控制項,一個TreeView,一個ListView,那麼可能發生的拖動有以下幾種情況: 1、TreeView -> L ...
一、NET 6概述
.NET 6 是微軟統一.Net Core與.Net Framework 兩大框架的第二個版本,微軟在 .NET 5 中開始進行這兩大框架的統一之路。
.NET 6 將作為長期支持 (LTS) 版本得到三年的支持,NET 6是2021年發佈的,微軟支持到2024年。只有Visual Studio 2022(以及更高版本)支持 .NET 6。Visual Studio 2017/2019等版本都不支持.NET 6。
.NET 6可以生成運行在Linux、 Windows 和 macOS 上的單個文件的應用程式,這個應用程式是一個單文件二進位文件。單文件應用程式不再將任何核心運行時程式集提取到臨時目錄。
.NET 6 在移動、桌面、IoT 和雲應用之間統一了SDK、基礎庫和運行時。除了這方面的統一以外,.NET 6生態系統還提供了以下功能:
- 簡化開發:輕鬆入門。 C# 10中的新語言功能可減少需要編寫的代碼量。 利用Web堆棧和最小API的原則,可以輕鬆地快速編寫更小、更快速的微服務。
- 更佳的性能:.NET 6是最快的最完整的Web框架,如果在雲上運行,則會降低計算成本。
- 更高的工作效率:.Net 6和Visual Studio 2022提供熱重載、新的git工具、智能代碼編輯、可靠的診斷和測試工具以及更好的團隊協作。
二、ASP.NET Core 6 的優點
- 生成Web UI和Web API的統一場景。
- 針對可測試性進行構建。
- 集成新式客戶端框架和開發工作流。
- 基於環境的雲就緒配置系統。
- 內置依賴項註入。
- 輕型的高性能模塊化 HTTP 請求管道。
- 能夠在IIS、Kestrel、HTTP.sys、Nginx、Apache、Docker 上進行托管或在自己的進程中進行自托管。
- 並行版本控制。
- 簡化新式Web開發的工具。
- 能夠在 Windows、macOS 和 Linux 進行生成和運行。
- Razor Pages 可以使基於頁面的編碼方式更簡單高效。
- Blazor 允許在瀏覽器中使用 C# 和 JavaScript。 共用全部使用 .NET 編寫的伺服器端和客戶端應用邏輯。
- 支持使用 gRPC 托管遠程過程調用 (RPC)。
- 開放源代碼和以社區為中心。
三、 ASP.NET Core 6 WebUI介紹
ASP.NET Core 6 提供一套完整的Web UI框架。主要區分為伺服器UI和客戶端UI。在ASP.NET Core 6中可以使用三種方法來構建新的Web UI。
三種方式如下:
1)使用伺服器UI來構建應用。
2)使用客戶端UI在瀏覽器中構建應用。
3)伺服器UI和客戶端UI混合使用的方式來構建應用。 例如,大多數Web UI使用伺服器UI,運行在伺服器上,並會根據需要來添加客戶端UI組件,運行在客戶端的瀏覽器中。
四、伺服器 UI
使用伺服器 Web UI,ASP.NET Core 6構建的應用會在伺服器上動態生成頁面的 HTML和CSS,以響應瀏覽器發過來的請求。頁面在到達客戶端時已準備以何種樣式顯示給用戶看了。
優點:
- 客戶端的性能要求最少,因為是主要由伺服器執行邏輯和頁面生成工作:
- 非常適用於低端設備和低帶寬連接。
- 允許在客戶端上使用各種版本的瀏覽器。
- 快速載入初始頁面。
- 儘可能少地使用或不使用JavaScript腳本文件。
- 靈活地訪問受保護的伺服器資源:
- 對資料庫的訪問。
- 對機密數據或介面的訪問。
- 靜態站點分析優點,例如搜索引擎優化。
常見的使用伺服器Web UI的應用場景如下:
- 動態站點,例如提供個性化頁面、數據和窗體的站點。
- 顯示只讀數據,如數據列表。
- 顯示靜態博客頁面。
- 面向公眾的內容管理系統。
缺點:
- 計算和記憶體使用的成本都集中在伺服器上,而不是分攤到每個客戶端。
- 用戶交互需要往返伺服器才能生成新的UI界面。
五、客戶端 UI
客戶端UI是指ASP.NET Core 6開發的應用在客戶端上動態地呈現Web UI,根據需求直接更新瀏覽器頁面中的DOM,從而改變頁面中的數據及頁面。
優點:
- 可以實現幾乎即時的用戶交互,無需往返伺服器。 UI事件處理和邏輯在用戶的設備上運行,延遲最小。
- 支持增量更新,保存部分完成的窗體或文檔,用戶無需點擊提交按鈕,提交窗體。
- 可設計為在斷開連接模式下運行。重建連接後,針對客戶端模型的更新最終會同步到伺服器。
- 降低了伺服器的負載和成本,將一部分工作負荷轉移到客戶端。許多客戶端呈現的應用也可以作為靜態網站進行托管。
- 利用用戶的設備的一些性能與功能。
客戶端 Web UI 的使用場景如下:
- 互動式儀錶板。
- 具有拖放功能的應用
- 響應式協作社交應用。
缺點:
- 必須在客戶端下載和執行邏輯的代碼,這增加了初始載入時間。
- 對於客戶端的設備和瀏覽器的版本有較高要求,可能不包含那些低端設備、較舊版本的瀏覽器或低帶寬連接的用戶。
六、伺服器ASP.NET Core Web UI 介紹
伺服器ASP.NET Core Web UI主要有ASP.NET Core Razor Pages 和 ASP.NET Core MVC 組成,這是.NET 6中基於伺服器的ASP.NET Core框架,用於創建Web應用。
1、ASP.NET Core Razor Pages
Razor Pages是一個基於頁面的Web開發框架。Web UI和業務邏輯關註點保持分離狀態,但都在頁面內。Razor Pages入門比ASP.NET Core MVC要簡單一些。
Razor Pages的優點:
- 快速構建和更新UI。頁面的代碼與頁面一起保存,同時保持UI和業務邏輯關註點相互分離。
- 可進行測試並縮放到大型應用。
- 使用 ASP.NET Core Razor Page頁面,比使用ASP.NET MVC更簡單:
- 視圖的具體邏輯和視圖模型可以一起保存在它們自己的命名空間和目錄中。
- 相關頁面的組可以保存在各自的命名空間和目錄中。
2、ASP.NET Core MVC
ASP.NET MVC 在伺服器上呈現 UI的一個開發框架,是用於創建基於 MVC(模型-視圖-控制器結構模式)的Web 應用的Web開發框架。 MVC模式將應用分成三組主要組件:模型、視圖和控制器。用戶請求被路由到控制器。控制器負責使用模型來執行用戶操作或檢索查詢結果。控制器選擇要顯示給用戶的視圖,併為其提供所需的任何模型數據。對Razor Pages的支持是建立在ASP.NET Core MVC基礎之上的。
ASP.NET Core MVC的優點:
- 基於可縮放且成熟的模型生成大型Web應用。
- 明確分離關註點以獲得最大的靈活性。
- 模型-視圖-控制器的責任分離,確保了業務模型的發展,而不會與底層的實現細節緊密相連。
七、客戶端 ASP.NET Core Web UI
Blazor和Javascripot客戶端框架是ASP.NET Core 6中所使用的用於在客戶端構建Web應用的Web UI模型。
1、Blazor
Blazor是一個使用Blazor生成互動式客戶端的Web UI框架,使用C#代替JavaScript來創建信息豐富的互動式UI,允許使用共用代碼和庫。使用 C#、HTML 和 CSS 實現的可重用的Web UI組件。將 UI 呈現為 HTML 和 CSS,以支持眾多瀏覽器,其中包括移動瀏覽器。Blazor 組件非正式地稱為 Blazor 組件,正式可以稱Razor組件,Razor組件類通常以 Razor 標記頁(文件擴展名為 .razor)的形式編寫。
Razor組件的優點:
- 使用C#而不是JavaScript構建互動式 Web UI。對前端和後端代碼使用同一語言,可以:
- 加快應用開發。
- 降低生成管道的複雜性。
- 簡化維護。
- 利用現有的.NET庫生態系統。
- 讓開發人員瞭解和處理客戶端和伺服器端代碼。
- 創建可重用且可共用的UI組件。
- 使用Blazor提供的 Blazor可重用UI組件,提高工作效率。
- 適用於所有新版的Web瀏覽器,包括移動瀏覽器。Blazor使用Web開方標準,沒有插件或代碼轉譯。
- 可以使用Blazor Server或Blazor WebAssembly托管Razor組件,以利用伺服器或客戶端呈現的優勢。
2. JavaScript框架(例如Angular和React)
使用JavaScript前端框架(如 Angular 或 React)生成基於ASP.NET Core的應用程式的客戶端頁面。ASP.NET Core為 Angular和React提供了項目模板,當然也可以用其他的JavaScript框架(例如Vue,EasyUI,Extjs)。
將ASP.NET Core SPA與JavaScript框架結合使用的優點:
- JavaScript運行時環境已隨瀏覽器提供。
- 大型社區和成熟的生態系統。
- 使用熱門的JS框架(如Angular和React)構建適用於ASP.NET Core 應用的客戶端邏輯。
缺點:
- 需要使用多種編程語言、框架和工具。
- 難以共用代碼,因此一些邏輯可能會重覆。
八、ASP.NET Core MVC或Razor Pages與Blazor結合使用
MVC、Razor Pages和Blazor都是ASP.NET Core框架的一部分,微軟在設計時,就已經設計為可以結合使用。Razor組件可以通過Blazor WebAssembly或Blazor Server集成到Razor Pages和MVC應用程式中。呈現視圖或頁面時,可以同時預呈現組件。
在MVC或Razor Pages的優點基礎上,MVC或Razor Pages與Blazor結合使用的優點如下:
- 預呈現會在伺服器上執行 Razor 組件,並將其呈現到視圖或頁面中,從而提高應用的感知載入時間。
- 使用組件標記幫助程式將交互性添加到現有視圖或頁面。