參考：
Blazor 教程 - 生成首個應用
https://dotnet.microsoft.com/zh-cn/learn/aspnet/blazor-tutorial/intro

Blazor基礎知識：Visual Studio 2022 中的Blazor開發入門_vs2022 blazor webassembly-CSDN博客
https://blog.csdn.net/mzl87/article/details/135543830

[問題解決][edge]你現在無法訪問 XXX.com，因為網站使用的是 HSTS。網絡錯誤和攻擊通常是暫時的，因此該頁面以后可能會恢復正常。_因為網站使用的是 hsts。網絡錯誤和攻擊通常是暫時的,因此該頁面以后可能會恢復正-CSDN博客
https://blog.csdn.net/ted_guangda/article/details/129010030

本地環境：win10, visual studio 2022 community

---

Blazor 使用 .NET 和 C# 構建全棧web應用，無需編寫JavaScript。

創建項目

創建過程全部選默認，改動2處：

• 框架選了.Net 6.0
• 去掉了https配置（后面解釋）
  
  如果找不到上圖的話裝一下：
  
  然后點擊生成，運行：
  

報錯

ResolvePackageAssets任務意外失敗… NuGet unable to find fallback package folder xxx

這個很簡單，去紅線所指的位置新建文件夾即可。

啟動后網頁顯示隱私錯誤 NET::ERR_CERT_INVALID

一個辦法是直接在鍵盤輸入 this is unsafe （不用打回車，就這幾個字符就行）即可進入網頁：

這個算個后門吧，不過因為我只是在測試，直接關掉https配置即可（前面創建項目時）。

搜解決辦法的時候還有人說換火狐瀏覽器可以，我沒有測試。我這里edge和chrome都不行。

目錄說明

詳細說明

布局

整個網頁的布局寫在Shared/MainLayout.razor，如下。其中：

• @inherits LayoutComponentBase表示將從LayoutComponentBase類繼承所有功能和屬性，用戶可以重寫以定制注入導航欄、側邊欄等組件
• <NavMenu />實際是自定義的blazor組件，參見Shared/NavMenurazor
• <article>是一個HTML標簽，通常包裹一個獨立的內容塊
• @Body指明了主體內容在哪里。Pages下那些獨立的頁面會顯示在這個位置
• 相關的css寫在同名.css文件中
  

@inherits LayoutComponentBase<PageTitle>BlazorApp1</PageTitle><div class="page"><div class="sidebar"><NavMenu /></div><main><div class="top-row px-4"><a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a></div><article class="content px-4">@Body</article></main>
</div>

再看一下NavMenu元件。

<div class="top-row ps-3 navbar navbar-dark"><div class="container-fluid"><a class="navbar-brand" href="">BlazorApp1</a><button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"><span class="navbar-toggler-icon"></span></button></div>
</div><div class="@NavMenuCssClass" @onclick="ToggleNavMenu"><nav class="flex-column"><div class="nav-item px-3"><NavLink class="nav-link" href="" Match="NavLinkMatch.All"><span class="oi oi-home" aria-hidden="true"></span> Home</NavLink></div><div class="nav-item px-3"><NavLink class="nav-link" href="counter"><span class="oi oi-plus" aria-hidden="true"></span> Counter</NavLink></div><div class="nav-item px-3"><NavLink class="nav-link" href="fetchdata"><span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data</NavLink></div></nav>
</div>@code {private bool collapseNavMenu = true;private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;private void ToggleNavMenu(){collapseNavMenu = !collapseNavMenu;}
}

前面html不用看，重點看一下這句：

private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

這句表示：如果collapseNavMenu為true，則將NavMenuCssClass設置為"collapse"；否則設為null。NavMenuCssClass是側邊欄主體部分的屬性，在同名.css文件中是：

@media (min-width: 641px) {.navbar-toggler {display: none;}.collapse {/* Never collapse the sidebar for wide screens */display: block;}
}

也就是說，當窗口寬度大于641px時，通過設置.display: block; 實現了保持導航欄折疊按鈕隱藏的效果，并確保側邊欄保持展開狀態，以適應較寬屏幕設備的顯示效果。

網頁

index

紅圈部分對應的是：Pages/Index.razor，內容是：

@page "/"<PageTitle>Index</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" />

說明：

• @開頭的屬于c#代碼，@page指明了當前頁的路徑
• <PageTitle>是blazor定義的一個組件，其實就是顯示在標題欄的名字，也就是上圖藍圈的文字
• <SurveyPrompt>是自定義的一個組件，放在Shared/SurveyPrompt.razor，內容是：

  	<div class="alert alert-secondary mt-4"><span class="oi oi-pencil me-2" aria-hidden="true"></span><strong>@Title</strong><span class="text-nowrap">Please take our<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2149017">brief survey</a></span>and tell us what you think.
  </div>@code {// Demonstrates how a parent component can supply parameters[Parameter]public string? Title { get; set; }
  }

Counter

Counter頁面多加了一個按鈕，點擊這個按鈕，Current count: 后會更新點擊次數：

@page "/counter"<PageTitle>Counter</PageTitle><h1>Counter</h1><p role="status">Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

說明：

• @code表示后面的花括號里包含的是c#代碼
• 頁面上使用@ + 變量名就可以使用變量值
• @onclick直接使用@code定義的函數

FetchData

這是一個帶數據模型的頁面，先看 FetchData.razor ：

@page "/fetchdata"<PageTitle>Weather forecast</PageTitle>@using BlazorApp1.Data
@inject WeatherForecastService ForecastService<h1>Weather forecast</h1><p>This component demonstrates fetching data from a service.</p>@if (forecasts == null)
{<p><em>Loading...</em></p>
}
else
{<table class="table"><thead><tr><th>Date</th><th>Temp. (C)</th><th>Temp. (F)</th><th>Summary</th></tr></thead><tbody>@foreach (var forecast in forecasts){<tr><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.TemperatureF</td><td>@forecast.Summary</td></tr>}</tbody></table>
}@code {private WeatherForecast[]? forecasts;protected override async Task OnInitializedAsync(){forecasts = await ForecastService.GetForecastAsync(DateTime.Now);}
}

說明：

• @using BlazorApp1.Data是使用這個命名空間

  // Data/WeatherForecast.cs
  namespace BlazorApp1.Data
  {public class WeatherForecast{public DateTime Date { get; set; }public int TemperatureC { get; set; }public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);public string? Summary { get; set; }}
  }
  

• inject是注入服務

  	// Data/ WeatherForecastService.cs
  namespace BlazorApp1.Data
  {public class WeatherForecastService{private static readonly string[] Summaries = new[]{"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"};public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate){return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast{Date = startDate.AddDays(index),TemperatureC = Random.Shared.Next(-20, 55),Summary = Summaries[Random.Shared.Next(Summaries.Length)]}).ToArray());}}
  }
  

• @if中@表示是c#代碼，直接用就行，后面@foreach也是類似