《進擊吧!Blazor!》第一章 2.Hello Blazor

第二次寫專欄,開頭還是不知道說什麼,所以……先來段廣告😁
《進擊吧!Blazor!》是本人與張善友老師合作的Blazor零基礎入門系列視頻,此系列能讓一個從未接觸過Blazor的程序員掌握開發Blazor應用的能力。
視頻地址://space.bilibili.com/483888821/channel/detail?cid=151273
本系列文章是基於《進擊吧!Blazor!》直播內容編寫,升級.Net5,改進問題,講解更全面。

每一個教程的第一個Demo都是Hello,巧了,Blazor的默認模板就是一個現成的Hello Blazor,我們就從他的默認模板開始。

環境介紹

IDE:Visual Studio 16.8

創建項目

 

  1. 選擇Blazor應用
    在這裡插入圖片描述
  2. 設置項目名稱,這裡我取名「BlazorToDo」是因為接下來第一個完整Demo是一個待辦事項小程序。
    在這裡插入圖片描述
  3. 選擇Blazor應用模式,我們接下來開發主要以Blazor WebAssembly App進行。
    ASP.NET Core hosted選項用於控制是否生成帶有託管Blazor程序的ASP.NET Core服務端程序,我們勾上。
    在這裡插入圖片描述
  4. 我們將BlazorToDo.Server設為啟動項,然後啟動,應該能看到Hello, world!
    在這裡插入圖片描述
    到這裡Hello Blazor項目創建完畢😀

項目結構

下圖是項目結構
在這裡插入圖片描述

BlazorToDo.Client

Blazor項目,本身就是一個Asp.Net Core項目,如果只做前端,就可以直接拿這個項目進行發佈和部署。之後我們的分享就圍繞着這個項目進行。

Program.cs

程序入口,這裡與Web項目的差異就是Builder使用了WebAssemblyHostBuilder。

1 public static async Task Main(string[] args)
2 {
3     var builder = WebAssemblyHostBuilder.CreateDefault(args);
4     builder.RootComponents.Add<App>("#app");
5     builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
6     await builder.Build().RunAsync();
7 }

 

_Imports.razor

全局導入配置,在這裡使用using引入後,相當於在所有razor文件中都進行了引入。

App.razor

Blazor的根組件,通過Program.cs中的builder.RootComponents.Add<App>進行映射。

wwwroot

靜態文件存放位置,用途和Aps.net core相同,裏面的index.html文件就是主頁

<!--index.html-->
<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

 

Program.cs文件中builder.RootComponents.Add<App>("#app");中的選擇器#app必須能在index.html中找到正確的元素,不然程序無法正常顯示。

Pages

業務組件存放位置,Blazor都是由組件組成的,頁面就是含有路由配置的組件。組件文件擴展名razor,自然使用的是Razor語法,以Index.razor文件為例,代碼如下

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

 

Razor語法的使用方法在後續分享中重點介紹,此處就不展開了。

Shared

共享組件存放位置。

BlazorToDo.Server

服務端程序,也是一個Asp.Net Core項目,可以用他給前端提供WebAPI,並且承載了Client編譯的靜態文件,如果我們前後端部署在一起,那麼直接發佈他即可,這也是結構最簡單部署方式。

BlazorToDo.Shared

共享項目,這就是Blazor相對於其他前端開發解決方案的最大的優勢,Blazor的前後端使用了相同的語言、相同的框架和語言規範。因此我們可以把前後端共享的代碼放入此項目,比如Dto,常用組件庫,相同的業務等

代碼解析

Counter.razor

點擊按鈕後數字跳動,效果如下
在這裡插入圖片描述
下面是Counter.razor的代碼

@page "/counter"
<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

代碼很簡潔,意思如下

  1. 聲明了變量currentCount,要在頁面上顯示可以使用@currentCount,這裡使用@符號從HTML轉換為c#。
  2. html元素button中我們使用@onclick捕獲事件,讓他觸發IncrementCount函數,這個函數中累加currentCount變量。

關於razor語法將來後續分享中重點介紹

次回預告

我將通過一個ToDo示例介紹路由的工作原理,Blazor組件的頁面製作方法。