前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Blazor - .NET Core平台的SPA开发框架快速上手

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的代码为例:

代码语言:javascript
复制
@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风格的标签来作为组件的引用。

官方实例组件

官方默认的模板页面提供了一个计数器的组件,我们来看看它的代码:

代码语言:javascript
复制
@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计数器进行修改

代码语言:javascript
复制
@functions {
    int currentCount = 0;

    [Parameter] int IncrementAmount { get; set; } = 1;

    void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}
  • [Parameter] int IncrementAmount { get; set; } = 1;定义参数,参数类型为int,自动装配,赋默认值

这样在调用组件时就可以给其添加参数。

代码语言:javascript
复制
<Counter IncrementAmount="10"/>

这样在每次使用计数器,点击事件调用方法后,就会以参数值10来进行累加。

创建一个Todo组件

看完了官方实例,来动手实现一个 Todo组件。

创建页面

首先在Pages文件夹下新建一个Todo.cshtml的新项目,不要新建Razor页面

代码语言:javascript
复制
@page "/todo"
@model test.Pages.TodoModel
@{
}

    <h1>Todo</h1>

添加到导航

将当前“页面”添加到导航栏(NavMenu组件,即Shared/NavMenu.csthml).

代码语言:javascript
复制
<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页面引用。

代码语言:javascript
复制
public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

todo页面:

代码语言:javascript
复制
@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

添加点击事件,并绑定数据:

代码语言:javascript
复制
@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变得十分简单方便。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是Blazor
  • 看看结构
  • 看看代码
    • 基础页面
      • 官方实例组件
        • 简单修改-添加参数
        • 创建一个Todo组件
          • 创建页面
            • 添加到导航
              • 创建实体模型
                • 添加Todo
                • 总结
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档