.NET Core 又一殺器! Web Blazor框架橫空出世!-有解無憂

　　多年來，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=https://www.cnblogs.com/ZaraNet/p/"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中.

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/96223.html

標籤：.NET Core

上一篇：大家能幫我看看這公司靠不靠譜嗎

下一篇：c＃anchor屬性