Blazor – .NET Core平台的SPA開發框架快速上手
- 2019 年 12 月 9 日
- 筆記
什麼是Blazor
隨著ASP.NET Core 3.0 Perview的更新，微軟發布了Blazor這一SPA的開發框架，官網的定義是「Full-stack web development with C# and WebAssembly」。雖然大家都是WebAssembly是一場針對Javascript的技術變革，在目前市場還沒完全接受之前，學習和了解也是一種不錯的選擇。
在Blazor的官網，能看到Blazor列出了這樣的標語：
- Build a Web UI with C#
- Full-stack .NET
- Runs in all browsers and implements .NET Standard
- Native performance with WebAssembly
- Native browser apps
- Simple and productive
可以看出，Blazor是微軟試圖推出一個拜託現有的ASP.NET WebForm,MVC這類混合開發模型下的，應對當前單頁WEB應用和前後端分離趨勢的一次嘗試。
看看結構
Blazor的整體項目結構類似於一個剝離了MVC的ASP.NET Core Web框架，由Pages和Shared來組成頁面，本質上還是一個ASP.NET Core Web應用程式。
Pages用來存放首頁和各類組件，作為一個SPA，組件這個概念是貫穿整個開發和使用流程的一個重要內容，頁面中的內容通常都是由各類型可服用的組件來構建和完成的。
看看程式碼
基礎頁面
以首頁index.cshtml的程式碼為例：
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" />
@page 「/」表明當前頁面為根頁面，而非組件。- 中間由html內容構成。
- SurveyPrompt 就是一個組件，參看上文目錄中，Shared文件夾中的，SurveyPrompt.cshtml
頁面的程式碼風格與Razor 風格的cshtml頁面類似，但是也使用了XML風格的標籤來作為組件的引用。
官方實例組件
官方默認的模板頁面提供了一個計數器的組件，我們來看看它的程式碼：
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" onclick="@IncrementCount">Click me</button> @functions { int currentCount = 0; void IncrementCount() { currentCount++; } }
@page 「/counter」表面組件名稱- html內容及按鈕
- functions事件包含在
@function中
同樣是與Razor的 cshtml頁面一脈相承，來看下效果圖。
簡單修改-添加參數
這裡參考官方文檔的方法，對Counter計數器進行修改
@functions { int currentCount = 0; [Parameter] int IncrementAmount { get; set; } = 1; void IncrementCount() { currentCount += IncrementAmount; } }
[Parameter] int IncrementAmount { get; set; } = 1;定義參數，參數類型為int，自動裝配，賦默認值
這樣在調用組件時就可以給其添加參數。
<Counter IncrementAmount="10"/>
這樣在每次使用計數器，點擊事件調用方法後，就會以參數值10來進行累加。
創建一個Todo組件
看完了官方實例，來動手實現一個 Todo組件。
創建頁面
首先在Pages文件夾下新建一個Todo.cshtml的新項目，不要新建Razor頁面。
@page "/todo" @model test.Pages.TodoModel @{ } <h1>Todo</h1>
添加到導航
將當前「頁面」添加到導航欄（NavMenu組件，即Shared/NavMenu.csthml）.
<li class="nav-item px-3"> <NavLink class="nav-link" href="todo"> <span class="oi oi-list-rich" aria-hidden="true"></span> Todo List </NavLink> </li>
按照前面的列表添加一行即可。
創建實體模型
新建一個 TodoItem類，並在todo.cshtml頁面引用。
public class TodoItem { public string Title { get; set; } public bool IsDone { get; set; } }
todo頁面：
@page "/todo" @using test.Models; <h1>Todo</h1> <ul> @foreach (var todo in todos) { <li>@todo.Title</li> } </ul> @functions { IList<TodoItem> todos = new List<TodoItem>(); }
添加Todo
添加點擊事件，並綁定數據：
@page "/todo" @using test.Models; <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1> <ul> @foreach (var todo in todos) { <li> <input type="checkbox" bind="@todo.IsDone" /> <input bind="@todo.Title" /> </li> } </ul> <input placeholder="Something todo" bind="@newTodo" /> <button onclick="@AddTodo">Add todo</button> @functions { IList<TodoItem> todos = new List<TodoItem>(); string newTodo; void AddTodo() { if (!string.IsNullOrWhiteSpace(newTodo)) { todos.Add(new TodoItem { Title = newTodo }); newTodo = string.Empty; } } }
void AddTodo()和html標籤中的onclick方法的@AddTodo進行綁定bind="@newTodo"bind屬性綁定指定的變數內容- functions中的方法使用C#的程式碼進行編寫實現
總結
使用 Blazor 可以快速的構建實現一個SPA應用，組件的高度可復用性的特點，也符合SPA的要求，並且Blazor採用的Razor語法已經依賴注入等特性，能使得開發者構建一個SPA變得十分簡單方便。
