.NET Core 又一杀器! Web Blazor框架横空出世!
<p> </p><p> 多年来，Javascript（及其子框架）已在欣赏器中运行<a href="https://css-tricks.com/dom/">DOM</a>（文档对象模子），而且掌握了脚本知识才气真正操纵客户端UI。约莫2年前，全部这些都随着Web Assembly的引入而发生了变革-Web Assembly答应在客户端表明已编译的语言(相对Web Assembly更多相识请阅读<a href="https://www.cnblogs.com/detectiveHLH/p/9928915.html" target="_blank">相识wasm的宿世今身</a>)，而且如今全部欣赏器都完全支持它。微软对此的回复是<a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor">Blazor</a>的创建。答应C＃开辟职员在.NET（包罗UI）中构建其整个堆栈是一个令人高兴的主张。一段时间以来，Blazor不停处于预览状态，但如今已包罗在2019年9月23日的<a href="https://devblogs.microsoft.com/dotnet/announcing-net-core-3-0-preview-9/">一样寻常发行版</a>以及.NET Core 3.0版的下一版中，固然想要咀嚼Blazor的味道，再怎么说也要用.VisualStudio 2019 且安装.NET Core 3.0 + SDK。微软已经就怎样实行此操纵编写了一套给力的阐明，而且该<a href="https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio">文档已在Microsoft Docs</a>中出现。您可以选择退出我的博客选择微软官方，但与其对比，我的还算....其GitHub地点为： https://github.com/AdrienTorris/awesome-blazor </p>
<p> 创建Blazor项目可以通过dotnetCli下令来创建项目， dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview1.19508.20 ，我们文章中就直接通过Visual Studio来创建，如下图所示我们选择。</p>
<p>创建项目乐成，我们来分析一下Blazor中的项目初始文件都是些什么？都有啥用？<br /></p>
<blockquote>
<ul>
<li>依赖项，属性和wwwroot文件夹与<a href="https://exceptionnotfound.net/whats-this-and-can-i-delete-it-examining-a-default-asp-net-core-mvc-project/">标准ASP.NET Core应用步伐</a>中<a href="https://exceptionnotfound.net/whats-this-and-can-i-delete-it-examining-a-default-asp-net-core-mvc-project/">的</a>文件夹雷同。</li>
<li>该网页文件夹包罗包罗这个应用步伐，就像网页<a href="https://exceptionnotfound.net/razor-pages-how-does-it-differ-from-mvc-in-asp-net-core/">M</a>VC应用步伐一样。</li>
<li>该共享文件夹包罗实用于整个应用步伐的结构页。</li>
<li>该_ViewImports.cshtml文件用于导入定名空间为别的* .cshtml文件。</li>
<li>在Program.cs的文件用于创建ASP.NET核心托管情况。</li>
<li>该Startup.cs文件 不多表明。</li>
<li>在_Imports.razor中我们直接全局引入库</li>
</ul>
</blockquote>
<p> 假如运行示例应用步伐，则会得到一个如下所示的页面：<br /></p>
<p>随后你会在畅游在官方示例中，无尽遐想，这么给力的框架！我改怎样去驾御它，利用它?好的，我们如今就开始！激动的时间！</p>
<p>如今我们须要一个razor组件，注意如今是叫做组件，不是通常利用的*.cshtml了，将我已编写好的代码来继承我的演讲，复制下面的代码。</p>
<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();
}
}
<p> 让我们看看上面发生了什么？我们从上到下一个一个来说。 @using BlazorDemo.Data; 是我的组件须要利用的实体，假如你细致阅读上文，您会知道在 _Imports.razor 中假如引用了该实体，那么全部组件将无需多言。以是我在此中添加了该实体。</p>
@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;
<p> @page 是一个指令，它告诉ASP.NET这是一个Razor页面并设置默认路由。在我们的例子中，蹊径是相对蹊径“ / todo”。此参数担当相对和绝对路径；后者类似于“/ Path / To / Page”。您可以@page为多个路由利用多个指令。随后您可以在 NavMenu.razor 中添加该页面的导航。</p>
<li class="nav-item px-3">
<NavLink class="nav-link" href="todo">
class="oi oi-list-rich" aria-hidden="true"> Todo
</NavLink>
</li>
<p> 该<code>@inject</code>指令告诉Blazor利用依赖注入将一个类注入此页面。在本例中，我们正在注入 TodoItemService ，以便我们可以从之前创建的样本数据中读取。其该服务的界说如下，它简单的离谱。</p>
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);
}
}
<p>由于如今有了读取和查看数据的方法，因此我们须要界说一种可以加载样本数据的方法。为此，我们须要 @functions 指令。</p>
@functions{
protected override async Task OnInitializedAsync()
{
todos = await todoitemservice.GetTodoItems();
}
}
<p>真正的把戏就是 OnInitializedAsync 方法。将页面加载到欣赏器时将触发此方法。在我们的实现中，它所做的就是获取JSON示例数据并将其转换为我们新界说的<code>ToDoItem</code>类。如今我们可以运行该应用步伐，并查看我们的页面！看起来像如许：</p>
<p></p>
<p> 难以置信！我们有一个工作页面！如今，我们可以扩展此页面，以便我们可以删除，这里就不再提出更新，后期我在详细阐明我在Blazor中利用的UI。如今我们在表格中添加一列按钮 用于触发删除的变乱，看看我们该怎样编写？</p>
<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>
<p> 请注意<code>onclick</code>绑定到HTML按钮的变乱。此变乱绑定到C＃方法 RemoveTodo() ，如下所示：</p>
@functions{
private void RemoveTodo(string id)
{
todos.Remove(todos.First(x => x.id == id));
}
}
<p>我们重新试着启动步伐~看看会发生什么?是报错？是编译不乐成?都有大概会发生？</p>
<p></p>
<p> Blazor是一个客户端Web框架，使我们可以大概在客户端单页应用步伐中利用C＃。它的表面与Razor Pages应用步伐非常相似。这个示例项目使我们可以大概从外部数据源获取ToDo列表项，添加新项，删除项。全部这些功能都发生在客户端。</p>
<p> 此时，我无法控制心田的高兴 .NET Core如许精良的框架再配上宇宙第一的Visual Studio简直是传说中的人中吕布马中赤兔！</p>
<p>该示例代码在 https://github.com/zaranetCore/dotNetCoreBlazor中.</p>
<p> </p>
页:
[1]