一.前言

在第一篇文章中,有提到过组件(Component)这个概念。组件在 Blazor 中是必不可少的,UI 全靠它组装起来,和前端的 JS 组件是一个意思,比如:vue component、react component 等等。借用官方文档的描述:

Blazor 应用是使用组件构建的。 组件是自包含的用户界面 (UI) 块,例如页、对话框或窗体。 组件包含插入数据或响应 UI 事件所需的 HTML Tag和处理逻辑。 组件非常灵活且轻量。 可在项目之间嵌套、重复使用和共享。

二.组件

组件一般以 .razor 为文件名后缀,且组件名必须以大写字母开头(猜测可能是和VUE里的命名限制一样,表面和Html标签名重复)。

我们新建的项目,Shared 文件夹中就有三个组件:

左侧导航菜单组件:

在主布局组件中应用了导航菜单组件:

更多关于组件的资料请查阅官方文档:创建和使用 ASP.NET Core Razor 组件

三.数据绑定

1.介绍

Razor 组件通过名为 @bind 的HTML元素属性提供数据绑定功能,这个绑定是双向的。

@bind 是区分大小写的,例如:@BIND@Bind 都是错误的,下面写了一个例子,将 CurrentValue 绑定到两个文本框中。

<div class="row">
<div class="col-6">
<input class="form-control" type="text" @bind="CurrentValue" />
</div>
<div class="col-6">
<input class="form-control" type="text" @bind="CurrentValue" />
</div>
</div> <div class="row">
<button class="btn btn-primary" @onclick="ChangeValue">变 更</button>
</div> @code
{
public int CurrentValue { get; set; } = 0; private void ChangeValue()
{
CurrentValue ++;
}
}

需要注意的是在文本框的绑定中,仅当呈现组件时,UI才会更新文本框,而不响应于更改属性的值。由于组件是在事件处理程序代码执行后呈现的,因此属性更新通常在触发事件处理程序后立即反映在UI中。

@bind="CurrentValue" 等同于以下代码:

<input value="@CurrentValue"
@onchange="@((ChangeEventArgs __e) => CurrentValue =
__e.Value.ToString())" /> @code {
public int CurrentValue { get; set; } = 0;
}

点击按钮,变更了值,也会应用到文本框中:

2.变更绑定事件

上面小节中,默认绑定了 onchange 事件,只有文本框失去焦点才会触发,体验不是很好,那么可不可以在输入的时候就同步更新值呢,当然是可以的,解决方案就是变更绑定事件为 oninput,通过设置@bind:event属性来变更绑定事件:

<div class="col-6">
<input class="form-control" type="text" @bind="CurrentValue" @bind:event="oninput" />
</div>
<div class="col-6">
<input class="form-control" type="text" @bind="CurrentValue" @bind:event="oninput" />
</div>

3.输入错误的值

我们设置的 CurrentValue 的类型是 int ,如果我们输入字母,那么字母将不会被接受,同时值会恢复到输入前的正确值。

4.子父组件数据传递

在 vue、react 等 js 中,都有子父组件传值概念,Blazor 也不例外。

(1)父传子

新建一个子组件命名为 ChildComponent

<div class="row">
<h2>子组件</h2>
</div> <div class="row">
<span>Year: </span> <input class="form-control" type="text" value="@Year" />
</div> @code {
[Parameter]
public int Year { get; set; } [Parameter]
public EventCallback<int> YearChanged { get; set; }
}

定义一个 Year 属性和 EventCallback<int> 类型的属性 YearChanged

新建一个父组件命名为ParentComponent

<div class="row">
<h2>父组件</h2>
</div> <div class="row">
<span>ParentYear: </span> <input class="form-control" type="text" @bind="ParentYear" @bind:event="oninput"/>
</div> <ChildComponent @bind-Year="ParentYear" /> @code {
[Parameter]
public int ParentYear { get; set; } = 1978;
}

在页面中引用父组件:

YearChanged 是一个约定命名,不能更改,更改将会报错:

EventCallback 用于子父组件嵌套时公开事件,比如 YearChanged 就公开了子组件 Year 属性的 changed 事件。父组件里,通过 @bind-Year 来绑定 Year 的 changed 事件,然后将父组件 ParentYear 的值传递过去,达成父级组件向子级组件传递值。

<ChildComponent @bind-Year="ParentYear" /> 等同于 <ChildComponent @bind-Year="ParentYear" @bind-Year:event="YearChanged" /> ,如果使用后者,那么事件命名将不会受约定命名限制。

运行效果:

(2)子传父(链式绑定)

子传父,无法直接通过 @bind 来实现,需要单独指定事件处理程序和值,我们更改上面的子组件,定义一个 OnYearChanged 事件,并将其绑定到文本框的 oninput 事件,在事件里手动更新了 Year的值,并调用 YearChanged 来进行传递。

<div class="row">
<h2>子组件</h2>
</div> <div class="row">
<span>Year: </span> <input class="form-control" type="text" @oninput="OnYearChanged" value="@Year" />
</div> @code {
[Parameter]
public int Year { get; set; } [Parameter]
public EventCallback<int> YearChanged { get; set; } private Task OnYearChanged(ChangeEventArgs e)
{
Year = int.Parse(e.Value.ToString()); return YearChanged.InvokeAsync(Year);
}
}

运行:

四.资料

Blazor WebAssembly 修仙之途 - 组件与数据绑定的更多相关文章

  1. ASP.NET Core Blazor Webassembly 之 组件

    关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...

  2. ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...

  3. Blazor(WebAssembly) + .NETCore 实现斗地主

    之前群里大神发了一个 html5+ .NETCore的斗地主,刚好在看Blazor WebAssembly 就尝试重写试试. 还有就是有些标题党了,因为文章里几乎没有斗地主的相关实现:),这里主要介绍 ...

  4. 使用WebApi和Asp.Net Core Identity 认证 Blazor WebAssembly(Blazor客户端应用)

    原文:https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-web ...

  5. 浏览器中的 .Net Core —— Blazor WebAssembly 初体验

    前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...

  6. Blazor入门笔记(4)-组件的生命周期

    1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 Blaz ...

  7. Blazor入门笔记(6)-组件间通信

    1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...

  8. Blazor WebAssembly 3.2.0 正式起飞,blazor 适合你吗?

    最近blazor更新很快,今天在官方博客上发布了Blazor WebAssembly 3.2.0 RC:https://devblogs.microsoft.com/aspnet/blazor-web ...

  9. Blazor WebAssembly 3.2 正式发布

    5月 20日,微软 发布了 Blazor WebAssembly 3.2(https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0- ...

随机推荐

  1. 算法——Java实现队列

    顺序队列: 概念: 队列是一种先进先出的线性表,只允许在一端插入,另一端删除.允许插入的一端称为队尾,允许删除的一端称为队头 顺序队列的实现: import org.junit.jupiter.api ...

  2. P2774 方格取数问题 网络流

    题目: P2774 方格取数问题 题目背景 none! 题目描述 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大. ...

  3. 【Kafka】Consumer API

    Consumer API Kafka官网文档给了基本格式 http://kafka.apachecn.org/10/javadoc/index.html?org/apache/kafka/client ...

  4. Java设计模式之建造者模式(Builder Pattern)

    前言 这篇文章主要向大家讲解什么是建造者模式,建造者模式的实例讲解及应用场景等知识点. 一.建造者介绍 ​ 用户可以不知道产品的构建细节直接可以创建复杂的对象,主要是分离了产品的构建和装配,这样就实现 ...

  5. Ubuntu 18.04使用OpenSSL自签证书(证书支持多IP及多域名,谷歌浏览器无警告)

    前言 在HTTPS数据传输的过程中,需要用SSL/TLS对数据进行加密和解密,以保证网络传输过程中数据的机密性.HTTPS协议可以大致分为两个部分:其一是协商密钥,首先当Client向Web Serv ...

  6. python --RecursionError: maximum recursion depth exceeded in comparison

    在学习汉娜塔的时候,遇到一个error RecursionError: maximum recursion depth exceeded in comparison 经过百度,百度的方法: 加上: i ...

  7. 爬取淘宝商品信息,放到html页面展示

    爬取淘宝商品信息 import pymysql import requests import re def getHTMLText(url): kv = {'cookie':'thw=cn; hng= ...

  8. java ->多线程_线程同步、死锁、等待唤醒机制

    线程安全 如果有多个线程在同时运行,而这些线程可能会同时运行这段代码.程序每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的. l  我们通过一个案例,演示线 ...

  9. .Net(c#)使用 Kafka 小结

    .Net(c#)使用 Kafka 小结 1.开篇 由于项目中必须使用 kafka 来作为消息组件,所以使用 kafka 有一段时间了.不得不感叹 kafka 是一个相当优秀的消息系统.下面直接对使用过 ...

  10. Spring AOP实现接口验签

    因项目需要与外部对接,为保证接口的安全性需要使用aop进行方法的验签; 在调用方法的时候,校验外部传入的参数进行验证, 验证通过就执行被调用的方法,验证失败返回错误信息: 不是所有的方法都需要进行验签 ...