.NET Core 又一杀器! Web Blazor框架横空出世!
多年來，Javascript（及其子框架）已在瀏覽器中運行DOM（文檔對象模型），并且掌握了腳本知識才能真正操作客戶端UI。大約2年前，所有這些都隨著Web Assembly的引入而發(fā)生了變化-Web Assembly允許在客戶端解釋已編譯的語言(相對Web Assembly更多了解請閱讀了解wasm的前世今身)，并且現(xiàn)在所有瀏覽器都完全支持它。微軟對此的回答是Blazor的創(chuàng)立。允許C＃開發(fā)人員在.NET（包括UI）中構(gòu)建其整個堆棧是一個令人興奮的主張。一段時間以來，Blazor一直處于預(yù)覽狀態(tài)，但現(xiàn)在已包含在2019年9月23日的一般發(fā)行版以及.NET Core 3.0版的下一版中，當(dāng)然想要品味Blazor的味道，再怎么說也要用.VisualStudio 2019 且安裝.NET Core 3.0 + SDK。微軟已經(jīng)就如何執(zhí)行此操作編寫了一套給力的說明，并且該文檔已在Microsoft Docs中呈現(xiàn)。您可以選擇退出我的博客選擇微軟官方，但與其對比，我的還算....其GitHub地址為：?https://github.com/AdrienTorris/awesome-blazor?
創(chuàng)建Blazor項目可以通過dotnetCli命令來創(chuàng)建項目，?dotnet?new?-i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview1.19508.20?，我們文章中就直接通過Visual Studio來創(chuàng)建，如下圖所示我們選擇。
創(chuàng)建項目成功，我們來分析一下Blazor中的項目初始文件都是些什么？都有啥用？
依賴項，屬性和wwwroot文件夾與標(biāo)準(zhǔn)ASP.NET Core應(yīng)用程序中的文件夾相同。?
該網(wǎng)頁文件夾包含包括這個應(yīng)用程序，就像網(wǎng)頁MVC應(yīng)用程序一樣。
該共享文件夾包含適用于整個應(yīng)用程序的布局頁。
該_ViewImports.cshtml文件用于導(dǎo)入命名空間為其它* .cshtml文件。?
在Program.cs的文件用于創(chuàng)建ASP.NET核心托管環(huán)境。
該Startup.cs文件 不多解釋。
在_Imports.razor中我們直接全局引入庫
?如果運行示例應(yīng)用程序，則會得到一個如下所示的頁面：
隨后你會在暢游在官方示例中，無盡遐想，這么給力的框架！我改如何去駕馭它，使用它?好的，我們現(xiàn)在就開始！激動的時刻！
現(xiàn)在我們需要一個razor組件，注意現(xiàn)在是叫做組件，不是通常使用的*.cshtml了，將我已編寫好的代碼來繼續(xù)我的演講，復(fù)制下面的代碼。
<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 @οnclick="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();
}
}
?讓我們看看上面發(fā)生了什么？我們從上到下一個一個來說。?@using BlazorDemo.Data;?是我的組件需要使用的實體，如果你仔細(xì)閱讀上文，您會知道在?_Imports.razor?中如果引用了該實體，那么所有組件將無需多言。所以我在其中添加了該實體。
@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頁面并設(shè)置默認(rèn)路由。在我們的例子中，路線是相對路線“ / todo”。此參數(shù)接受相對和絕對路徑；后者類似于“?/ Path / To / Page”。您可以@page為多個路由使用多個指令。隨后您可以在?NavMenu.razor?中添加該頁面的導(dǎo)航。
<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?，以便我們可以從之前創(chuàng)建的樣本數(shù)據(jù)中讀取。其該服務(wù)的定義如下，它簡單的離譜。
{
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);
}
}
由于現(xiàn)在有了讀取和查看數(shù)據(jù)的方法，因此我們需要定義一種可以加載樣本數(shù)據(jù)的方法。為此，我們需要?@functions?指令。
@functions{protected override async Task OnInitializedAsync()
{
todos = await todoitemservice.GetTodoItems();
}
}
真正的魔術(shù)就是?OnInitializedAsync?方法。將頁面加載到瀏覽器時將觸發(fā)此方法。在我們的實現(xiàn)中，它所做的就是獲取JSON示例數(shù)據(jù)并將其轉(zhuǎn)換為我們新定義的ToDoItem類。現(xiàn)在我們可以運行該應(yīng)用程序，并查看我們的頁面！看起來像這樣：
?難以置信！我們有一個工作頁面！現(xiàn)在，我們可以擴展此頁面，以便我們可以刪除，這里就不再提出更新，后期我在詳細(xì)說明我在Blazor中使用的UI。現(xiàn)在我們在表格中添加一列按鈕 用于觸發(fā)刪除的事件，看看我們該如何編寫？
<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 @οnclick="(() => 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));
}
}
我們重新試著啟動程序~看看會發(fā)生什么?是報錯？是編譯不成功?都有可能會發(fā)生？
?Blazor是一個客戶端Web框架，使我們能夠在客戶端單頁應(yīng)用程序中使用C＃。它的外觀與Razor Pages應(yīng)用程序非常相似。這個示例項目使我們能夠從外部數(shù)據(jù)源獲取ToDo列表項，添加新項，刪除項。所有這些功能都發(fā)生在客戶端。
?此時，我無法控制內(nèi)心的喜悅 .NET Core這樣優(yōu)秀的框架再配上宇宙第一的Visual Studio簡直是傳說中的人中呂布馬中赤兔！
該示例代碼在?https://github.com/zaranetCore/dotNetCoreBlazor?中.
總結(jié)
以上是生活随笔為你收集整理的.NET Core 又一杀器! Web Blazor框架横空出世!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超简单让.NET Core开发者快速拥有
- 下一篇： .NET Conf 2019 今天在上海