Blazor - .NET Core平台的SPA开发框架快速上手

李郑

发布于 2019-12-09 11:13:39

2.6K0

发布于 2019-12-09 11:13:39

文章被收录于专栏：漫漫全栈路

什么是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;
        }
    }
}