上一篇写数据绑定的文章,写到最后留了一个坑。当子组件绑定父组件的一个字段,并且子组件修改它的时候父组件不能实时进行同步更新UI的问题,最近终于在Blazui作者的指导下搞定了。
[Read More]
Asp.net core blazor webassembly 之 .net javascript互调
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道。比如操作dom,当然跟angular、vue一样不提倡直接操作dom;比如浏览器的后退导航。反之JavaScript也有可能需要调用C#代码来实现一些功能,毕竟客户的需求是千变万化的,有的时候只能通过一些hack的手段来实现。
.NET调用JavaScript函数
使用JSRuntime.InvokeVoidAsync调用无返回值的JavaScript函数
显然我们的.NET类库里不会有JavaScript内置的alert方法来显示提示,这里演示下如何调用JavaScript的alert方法:
```
.net call javascript
[Read More]
Asp.net core blazor 之 事件
我们的UI总是免不了需要交互,对用户的操作做出响应,对数据的变化做出响应,这些都离不开事件。这次看看blazor里的事件该怎么玩。
绑定UI事件
UI事件是指那些跟UI相关的事件,比如button点击事件,input的change事件等等,这些都是我们开发系统的时候常常需要打交道的。blazor通过@on{event}来绑定一个方法,使得ui跟业务方法建立联系。下面演示下button的点击事件:
```
[Read More]
Asp.net core blazor webassemably 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转。我们开发系统的时候总是需要使用路由来实现页面间的跳转。传统的web开发主要是使用a标签或者是服务端redirect来跳转。那今天来看看Blazor是如何进行路由的。
使用@page指定组件的路由path
我们可以在Blazor里给每个组件指定一个path,当路由匹配的时候会显示这个组件。
```
@page “/page/a”
[Read More]
Asp.net core blazor webassemably 数据绑定
上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件)。这次继续学习Blazor的数据绑定相关的知识。当代前端框架都离不开数据绑定技术。数据绑定技术以数据为主导来驱动UI界面,用户对数据的修改会实时提现在UI上,极大的提高了开发效率,让开发者从繁琐的dom操作中解脱出来。对于数据绑定.NET开发者并不会陌生,WPF里大量应用数据绑定技术,有过WPF开发经验的同学其实很容易理解前端的数据绑定。总之数据绑定技术及其概念、思维极其重要。下面让我们看看Blazor的数据绑定技术。
单向绑定
Blazor的数据绑定官方文档是直接从双向绑定开始的,但我觉得有必要说一下单向绑定。因为其他框架一般都会区分单向、双向,比如vue的v-bind单向,v-model就是双向。我们这里分开讲也有利于跟其他框架进行对比。下面我们实现一个计数器组件来演示下单向数据绑定。
使用@进行绑定
```
@page “/counter”
[Read More]