.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="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 中.