學習ASP.NET Core Blazor編程系列一——綜述

来源:https://www.cnblogs.com/chillsrc/archive/2022/08/27/16631567.html
-Advertisement-
Play Games

概述 本文描述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 組件,並將其呈現到視圖或頁面中,從而提高應用的感知載入時間。
  • 使用組件標記幫助程式將交互性添加到現有視圖或頁面。

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近有許多打工人都在吐槽打工好難 每天都是執行許多重覆的任務 例如閱讀新聞、發郵件、查看天氣、打開書簽、清理文件夾等等, 使用自動化腳本,就無需手動一次又一次地完成這些任務, 非常方便啊有木有?! 而在某種程度上,Python 就是自動化的代名詞。 今天就來和大家一起學習一下, 用8個python自 ...
  • 1. 基礎函數 序號 函數 說明 1 print() 列印 2 input() 輸入 3 int() 轉化為整形 4 float() 轉化為浮點型 5 str() 轉化為字元串 6 type() 返回對象類型 7 isinstance() 判斷對象類型(返回布爾值) 2. 流程式控制制 序號 函數 說明 ...
  • 目錄 一.OpenGL ES 圖像亮度調節 1.原始圖片 2.效果演示 二.OpenGL ES 圖像亮度調節源碼下載 三.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL ES 學習路線推薦 : OpenGL ...
  • 前言 今天想聊一聊冪等相關的知識,以及實現一個冪等公共組件需要重點涉及和思考的點。 概念 首先,什麼是冪等,在實際代碼生產過程中有什麼作用呢? 在編程中一個冪等操作的特點是其任意多次執行所產生的影響均與一次執行的影響相同。 舉個例子,假如有個方法,用於修改一個訂單的狀態為已完成,只改一個狀態欄位,要 ...
  • 摘要:本文主要講解灰度線性變換。 本文分享自華為雲社區《[Python圖像處理] 十五.圖像的灰度線性變換》,作者:eastmount。 一.圖像灰度線性變換原理 圖像的灰度線性變換是通過建立灰度映射來調整原始圖像的灰度,從而改善圖像的質量,凸顯圖像的細節,提高圖像的對比度。灰度線性變換的計算公式如 ...
  • JSP概述 什麼是 jsp JSP(全稱 Java Server Pages)是由 Sun 公司專門為瞭解決動態生成 HTML 文檔的技術。 Servlet 程式輸出 html 頁面 在 jsp 技術之前,如果我們要往客戶端輸出一個頁面。我們可以使用 Servlet 程式來實現。具體的代碼如下: p ...
  • 一、事件背景 大家好,我是馬哥python說。 演員張天愛於2022.8.25號在網上爆出一段音頻 "慣犯,希望所以女孩擦亮眼睛。" 至今已有2.5億次觀看量,瞬間衝上熱搜。 二、微熱點分析 以下數據來源:微熱點 從輿情分析網站上來看,從熱度指數的變化趨勢來看,"張天愛"的熱度在08月25日22時達 ...
  • 參考自 https://www.cnblogs.com/leoxjy/p/10201046.html#5095270 Centos報這個問題,Asp.NetCore 3.1 HttpClient 請求 Https 報錯的SSL證書異常的問題,請使用以下方法解決。 export DOTNET_SYST ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...