.NET Core 又一杀器! Web Blazor框架横空出世!

显示全部楼层 · 2019-11-8 09:58:49

　　多年来，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">
class="oi oi-list-rich" aria-hidden="true"> 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>