.NET Core 又一殺器! Web Blazor框架橫空出世!
- 2019 年 11 月 7 日
- 筆記
多年來，Javascript（及其子框架）已在瀏覽器中運行DOM（文檔對象模型），並且掌握了腳本知識才能真正操作客戶端UI。大約2年前，所有這些都隨著Web Assembly的引入而發生了變化-Web Assembly允許在客戶端解釋已編譯的語言(相對Web Assembly更多了解請閱讀了解wasm的前世今身)，並且現在所有瀏覽器都完全支援它。微軟對此的回答是Blazor的創立。允許C＃開發人員在.NET（包括UI）中構建其整個堆棧是一個令人興奮的主張。一段時間以來，Blazor一直處於預覽狀態，但現在已包含在2019年9月23日的一般發行版以及.NET Core 3.0版的下一版中，當然想要品味Blazor的味道，再怎麼說也要用.VisualStudio 2019 且安裝.NET Core 3.0 + SDK。微軟已經就如何執行此操作編寫了一套給力的說明，並且該文檔已在Microsoft Docs中呈現。您可以選擇退出我的部落格選擇微軟官方，但與其對比，我的還算….其GitHub地址為： https://github.com/AdrienTorris/awesome-blazor
創建Blazor項目可以通過dotnetCli命令來創建項目， dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview1.19508.20 ，我們文章中就直接通過Visual Studio來創建，如下圖所示我們選擇。
創建項目成功，我們來分析一下Blazor中的項目初始文件都是些什麼？都有啥用？
- 依賴項，屬性和wwwroot文件夾與標準ASP.NET Core應用程式中的文件夾相同。
- 該網頁文件夾包含包括這個應用程式，就像網頁MVC應用程式一樣。
- 該共享文件夾包含適用於整個應用程式的布局頁。
- 該_ViewImports.cshtml文件用於導入命名空間為其它* .cshtml文件。
- 在Program.cs的文件用於創建ASP.NET核心託管環境。
- 該Startup.cs文件 不多解釋。
- 在_Imports.razor中我們直接全局引入庫
如果運行示例應用程式，則會得到一個如下所示的頁面：
隨後你會在暢遊在官方示例中，無盡遐想，這麼給力的框架！我改如何去駕馭它，使用它?好的，我們現在就開始！激動的時刻！
現在我們需要一個razor組件，注意現在是叫做組件，不是通常使用的*.cshtml了，將我已編寫好的程式碼來繼續我的演講，複製下面的程式碼。
<h3>Todo</h3> @page "/todo" @inject TodoItemService todoitemservice <table class="table"> <thead> <tr> <th>Date</th> <th>Description</th> </tr> </thead> <tbody> @foreach (var todoitem in todos) { <tr> <td>@todoitem.IsDone</td> <td>@todoitem.Title</td> </tr> } </tbody> </table> <input placeholder="Something todo" @bind="newTodo" /> <button @onclick="AddTodo">Add todo</button> @code { private IList<TodoItem> todos = new List<TodoItem>(); private string newTodo; private void AddTodo() { if (!string.IsNullOrWhiteSpace(newTodo)) { todos.Add(new TodoItem { Title = newTodo,id=Guid.NewGuid().ToString() }); newTodo = string.Empty; } } } @functions{ protected override async Task OnInitializedAsync() { todos = await todoitemservice.GetTodoItems(); } }
讓我們看看上面發生了什麼？我們從上到下一個一個來說。 @using BlazorDemo.Data; 是我的組件需要使用的實體，如果你仔細閱讀上文，您會知道在 _Imports.razor 中如果引用了該實體，那麼所有組件將無需多言。所以我在其中添加了該實體。
@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using BlazorDemo @using BlazorDemo.Shared @using BlazorDemo.Data;
@page 是一個指令，它告訴ASP.NET這是一個Razor頁面並設置默認路由。在我們的例子中，路線是相對路線“ / todo”。此參數接受相對和絕對路徑；後者類似於“〜/ Path / To / Page”。您可以@page為多個路由使用多個指令。隨後您可以在 NavMenu.razor 中添加該頁面的導航。
<li class="nav-item px-3"> <NavLink class="nav-link" href="todo"> <span class="oi oi-list-rich" aria-hidden="true"></span> Todo </NavLink> </li>
該@inject指令告訴Blazor使用依賴注入將一個類注入此頁面。在本例中，我們正在注入 TodoItemService ，以便我們可以從之前創建的樣本數據中讀取。其該服務的定義如下，它簡單的離譜。
public class TodoItemService { public Task<List<TodoItem>> GetTodoItems() { List<TodoItem> list = new List<TodoItem>(); list.Add(new TodoItem() { IsDone = false, Title = "zaranet",id = Guid.NewGuid().ToString() }); return Task.FromResult(list); } }
由於現在有了讀取和查看數據的方法，因此我們需要定義一種可以載入樣本數據的方法。為此，我們需要 @functions 指令。
@functions{ protected override async Task OnInitializedAsync() { todos = await todoitemservice.GetTodoItems(); } }
真正的魔術就是 OnInitializedAsync 方法。將頁面載入到瀏覽器時將觸發此方法。在我們的實現中，它所做的就是獲取JSON示例數據並將其轉換為我們新定義的ToDoItem類。現在我們可以運行該應用程式，並查看我們的頁面！看起來像這樣：
難以置信！我們有一個工作頁面！現在，我們可以擴展此頁面，以便我們可以刪除，這裡就不再提出更新，後期我在詳細說明我在Blazor中使用的UI。現在我們在表格中添加一列按鈕 用於觸發刪除的事件，看看我們該如何編寫？
<table class="table"> <thead> <tr> <th>Date</th> <th>Description</th> <th>Work</th> </tr> </thead> <tbody> @foreach (var todoitem in todos) { <tr> <td>@todoitem.IsDone</td> <td>@todoitem.Title</td> <td><button @onclick="(() => RemoveTodo(todoitem.id))"><i class="oi oi-trash"></i></button></td> </tr> } </tbody> </table>
請注意onclick綁定到HTML按鈕的事件。此事件綁定到C＃方法 RemoveTodo() ，如下所示：
@functions{ private void RemoveTodo(string id) { todos.Remove(todos.First(x => x.id == id)); } }
我們重新試著啟動程式~看看會發生什麼?是報錯？是編譯不成功?都有可能會發生？
Blazor是一個客戶端Web框架，使我們能夠在客戶端單頁應用程式中使用C＃。它的外觀與Razor Pages應用程式非常相似。這個示例項目使我們能夠從外部數據源獲取ToDo列表項，添加新項，刪除項。所有這些功能都發生在客戶端。
此時，我無法控制內心的喜悅 .NET Core這樣優秀的框架再配上宇宙第一的Visual Studio簡直是傳說中的人中呂布馬中赤兔！
該示例程式碼在 https://github.com/zaranetCore/dotNetCoreBlazor 中.
