學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式(中)

来源:https://www.cnblogs.com/chillsrc/archive/2022/09/04/16655909.html
-Advertisement-
Play Games

【問題】為什麼 System.Timers.Timer 更改間隔時間後的第一次觸發時間是設定時間的三倍? 獨立觀察員 2022 年 9 月 4 日 在編寫 “Wifi 固定器 [1]” 程式時,按如下方式使用了定時器: //聲明; private Timer _Timer = new Timer() ...


學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式(上)

四、創建一個Blazor應用程式

1. 第一種創建Blazor應用程式的方式。在Visual Studio 2022啟動界面中選擇“創建新項目”,如下圖。

 

圖2-5

2. 第二種創建Blazor應用程式的方式是。在Visual Studio 2022啟動界面中選擇“繼續但無需代碼”,然後在Visual Studio 2022的主界面中選擇菜單-->文件-->新建-->項目。如下圖。

 

     圖2-6

3.  在彈出的“創建新項目”的對話框中做如下選擇。

  • 在最左邊的下拉框中,選擇 “Blazor: ,如下圖中1處
  • 在中間的下拉框中,選擇 “所有平臺”。
  • 在最右邊的下拉框中,選擇“所有語言”。
  • 在下圖中2處,選擇“Blazor Server 應用”模板,點擊“下一步”按鈕。    

圖2-7

4.在彈出的“配置新項目”的對話框中,如下圖,在“項目名稱”輸入框中,輸入“BlazorAppDemo”。然後使用滑鼠點擊“下一步”按鈕。

圖2-8

5. 在彈出的“其他信息”的對話框,如下圖。在“框架”下拉框中,選擇“NET 6.0(長期支持)”。其他值選擇預設值即可。然後使用滑鼠點擊“創建”按鈕。

 圖2-9

6. Visual Studio  20222使用預設模板創建了一個ASP.NET  Core  Blazor項目。我們剛纔通過輸入一個項目名稱並選擇了幾個選項,創建了一個Web應用程式。這是一個簡單的入門項目,項目結構如下圖。       

圖2-10

7. 我們打開“解決方案資源管理器”,可以發現Blazor項目跟之前的ASP.NET  Core Mvc或Razor Page項目的結構差不多。下麵來分別介紹一下主要的幾個文件與目錄。

1)   Data 文件夾:包含 WeatherForecast 類和 WeatherForecastService 的實現,它們嚮應用的FetchData組件提供示例天氣數據。

2)   Pages文件夾:包含構成Blazor應用的各種路由組件/頁面(.razor)和 Blazor Server 應用的根Razor頁面。每個頁面的路由由頁面中頂部的 @page指令來指定。該目錄下包括以下組件:

  • _Host.cshtml:實現Razor頁面應用的根頁面:_Layout.cshtml:Host.cshtml根頁面的佈局頁。文件中包含通用的HTML元素(腳本和樣式表)。
    • 最初請求應用的任何頁面,都會在響應中返回此頁面進行呈現。
    • 此主機頁面指定根App組件 (App.razor)的呈現位置。
  • Counter 組件 (Counter.razor):“計數器”頁面。
  • Error 組件 (Error.razor):當應用中發生未經處理的異常時調用此組件。
  • FetchData組件(FetchData.razor):“數據列表”頁面。
  • Index 組件 (Index.razor):Blazor模板所創建的Blazor應用的預設首頁。

3)   Shared 文件夾:包含以下共用組件和樣式表:

  • MainLayout 組件 (MainLayout.razor):應用的佈局組件。
  • MainLayout.razor.css:應用主佈局的樣式表。
  • NavMenu 組件 (NavMenu.razor):實現側邊欄導航。 包括 NavLink 組件,該組件可向其他Razor組件呈現導航菜單。NavLink 組件會在系統載入其組件時自動指示選定狀態,這有助於用戶瞭解當前選中的菜單名稱及所顯示的頁面。
  • NavMenu.razor.css:應用導航菜單的樣式表。
  • SurveyPrompt 組件 (SurveyPrompt.razor):Blazor 調查組件。

4)   wwwroot:存放靜態文件的文件夾,包含應用程式的公共靜態文件,這些文件包括網站使用的CSS樣式表、圖像和JavaScript 文件

5)   _Imports.razor:包括要包含在應用組件 (.razor) 中的常見 Razor 指令,如用於命名空間的 @using 指令。

6)   App.razor:是Blazor應用程式的根組件,使用Router組件來設置客戶端路由。Router組件會截獲瀏覽器所發出的請求,並導航到相匹配的地址頁面。

7)   appsettings.json 和環境應用設置文件:用於應用程式範圍的配置設置。

8)   Program.cs:是啟動伺服器的應用程式的入口點,用於設置 ASP.NET Core 主機並包含應用的啟動邏輯,其中包括配置應用程式服務和請求處理管道配置:

  • 指定應用程式的依賴項註入(DI)服務。通過調用 AddServerSideBlazor添加服務,將 WeatherForecastService 添加到服務容器以供示例 FetchData 組件使用。
  • 配置應用的請求處理管道,用於處理所有對應用程式請求:
    • 調用 MapBlazorHub方法可以為瀏覽器的實時連接設置終結點。 使用SignalR創建連接,用於嚮應用程式添加實時 Web功能。
    • 調用MapFallbackToPage("/_Host")以設置應用程式的根頁面(Pages/_Host.cshtml)並啟用導航。

 9)BlazorAppDemo.csproj文件定義了應用程式項目及其依賴項,可以通過雙擊解決方案資源管理器中的BlazorAppDemo項目節點來查看。

10)Properties目錄中的launchSettings.json文件為本地開發環境定義了不同的配置文件設置。在項目創建時自動分配的埠號就保存在此文件中。

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:24757",
      "sslPort": 44336
    }
  },
  "profiles": {
    "BlazorAppDemo": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7110;http://localhost:5110",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

 


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

-Advertisement-
Play Games
更多相關文章
  • 以下內容為本人的著作,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://www.cnblogs.com/englyf/p/16656222.html 大小端存儲的劃分是為瞭解決長度大於一個位元組的數據類型內容在存儲地址上以不同順序分佈的問題。 比如16位的short整形,32位的i ...
  • 線程基礎02 3.繼承Thread和實現Runnable的區別 從java的設計來看,通過繼承Thread或者實現Runnable介面本身來創建線程本質上沒有區別,從jdk幫助文檔我們可以看到Thread類本身就實現了Runnable介面 實現Runnable介面方式更加適合多個線程共用一個資源的情 ...
  • 內置函數 # 1.abs函數 print(abs(-1)) # 絕對值方法 # 2.all函數 print(all([1,'aaa',''])) # false print(all([])) # true #all方法裡面是一個可迭代對象,all會自動將這個對象for迴圈一下,如果所有的值為true ...
  • 簡介 本項目是在newbee-mall項目的基礎上改造而來, 使用mybatis-plus,集成RedisSearch作為商城搜索中間件,商城首頁集成tianai-captcha作為滑塊驗證碼,還添加了高級秒殺、優惠劵以及完善可用的後臺全部功能,喜歡的話麻煩給我個star 商城集成RedisSear ...
  • 目錄 一.OpenGL ES圖像對比度調節 1.原始圖片 2.效果演示 二.OpenGL ES 圖像對比度調節源碼下載 三.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL ES 學習路線推薦 : OpenGL ...
  • 函數 定義 # 定義函數 def fn(): print("這是函數內部") # 調用 fn() fn() # 區分 fn: 這是真正意義上的函數本身 fn(): 這是調用函數 參數 形參 實參 函數參數可有可無,要看具體使用 形參是定義函數的參數 實參就是調用函數時需要傳遞的參數,函數有多少個形參 ...
  • 一、結論 首先說結論:深拷貝出來的對象就是完完全全的新對象,不管是對象本身(id),還是對象中包含的子對象,都和原始對象不一樣; 淺拷貝出來的對象就是外新內舊的對象,對象本身(id)和原始對象完全不同,但是子對象和原始對象的子對象是一樣的。 再補充說下賦值,賦值來的對象就是完完全全的原始對象,只是叫 ...
  • 鑒於有些小伙伴在尋找博客園遷移到個人博客的方案,本人針對博客園實現了一個自動備份腳本,可以快速將博客園中自己的文章備份成Markdown格式的獨立文件,備份後的md文件可以直接放入到hexo博客中,快速生成自己的站點,而不需要自己逐篇文章遷移,提高了備份文章的效率。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...