Blazor – .NET Core平台的SPA开发框架快速上手
- 2019 年 12 月 9 日
- 笔记
什么是Blazor
随着ASP.NET Core 3.0 Perview的更新，微软发布了Blazor这一SPA的开发框架，官网的定义是“Full-stack web development with C# and WebAssembly”。虽然大家都是WebAssembly是一场针对Javascript的技术变革，在目前市场还没完全接受之前，学习和了解也是一种不错的选择。
在Blazor的官网，能看到Blazor列出了这样的标语：
- Build a Web UI with C#
- Full-stack .NET
- Runs in all browsers and implements .NET Standard
- Native performance with WebAssembly
- Native browser apps
- Simple and productive
可以看出，Blazor是微软试图推出一个拜托现有的ASP.NET WebForm,MVC这类混合开发模型下的，应对当前单页WEB应用和前后端分离趋势的一次尝试。
看看结构
Blazor的整体项目结构类似于一个剥离了MVC的ASP.NET Core Web框架，由Pages和Shared来组成页面，本质上还是一个ASP.NET Core Web应用程序。
Pages用来存放首页和各类组件，作为一个SPA，组件这个概念是贯穿整个开发和使用流程的一个重要内容，页面中的内容通常都是由各类型可服用的组件来构建和完成的。
看看代码
基础页面
以首页index.cshtml的代码为例：
@page "/" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" />
@page “/”表明当前页面为根页面，而非组件。- 中间由html内容构成。
- SurveyPrompt 就是一个组件，参看上文目录中，Shared文件夹中的，SurveyPrompt.cshtml
页面的代码风格与Razor 风格的cshtml页面类似，但是也使用了XML风格的标签来作为组件的引用。
官方实例组件
官方默认的模板页面提供了一个计数器的组件，我们来看看它的代码：
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" onclick="@IncrementCount">Click me</button> @functions { int currentCount = 0; void IncrementCount() { currentCount++; } }
@page “/counter”表面组件名称- html内容及按钮
- functions事件包含在
@function中
同样是与Razor的 cshtml页面一脉相承，来看下效果图。
简单修改-添加参数
这里参考官方文档的方法，对Counter计数器进行修改
@functions { int currentCount = 0; [Parameter] int IncrementAmount { get; set; } = 1; void IncrementCount() { currentCount += IncrementAmount; } }
[Parameter] int IncrementAmount { get; set; } = 1;定义参数，参数类型为int，自动装配，赋默认值
这样在调用组件时就可以给其添加参数。
<Counter IncrementAmount="10"/>
这样在每次使用计数器，点击事件调用方法后，就会以参数值10来进行累加。
创建一个Todo组件
看完了官方实例，来动手实现一个 Todo组件。
创建页面
首先在Pages文件夹下新建一个Todo.cshtml的新项目，不要新建Razor页面。
@page "/todo" @model test.Pages.TodoModel @{ } <h1>Todo</h1>
添加到导航
将当前“页面”添加到导航栏（NavMenu组件，即Shared/NavMenu.csthml）.
<li class="nav-item px-3"> <NavLink class="nav-link" href="todo"> <span class="oi oi-list-rich" aria-hidden="true"></span> Todo List </NavLink> </li>
按照前面的列表添加一行即可。
创建实体模型
新建一个 TodoItem类，并在todo.cshtml页面引用。
public class TodoItem { public string Title { get; set; } public bool IsDone { get; set; } }
todo页面：
@page "/todo" @using test.Models; <h1>Todo</h1> <ul> @foreach (var todo in todos) { <li>@todo.Title</li> } </ul> @functions { IList<TodoItem> todos = new List<TodoItem>(); }
添加Todo
添加点击事件，并绑定数据：
@page "/todo" @using test.Models; <h1>Todo (@todos.Count(todo => !todo.IsDone))</h1> <ul> @foreach (var todo in todos) { <li> <input type="checkbox" bind="@todo.IsDone" /> <input bind="@todo.Title" /> </li> } </ul> <input placeholder="Something todo" bind="@newTodo" /> <button onclick="@AddTodo">Add todo</button> @functions { IList<TodoItem> todos = new List<TodoItem>(); string newTodo; void AddTodo() { if (!string.IsNullOrWhiteSpace(newTodo)) { todos.Add(new TodoItem { Title = newTodo }); newTodo = string.Empty; } } }
void AddTodo()和html标签中的onclick方法的@AddTodo进行绑定bind="@newTodo"bind属性绑定指定的变量内容- functions中的方法使用C#的代码进行编写实现
总结
使用 Blazor 可以快速的构建实现一个SPA应用，组件的高度可复用性的特点，也符合SPA的要求，并且Blazor采用的Razor语法已经依赖注入等特性，能使得开发者构建一个SPA变得十分简单方便。
