一起学Blazor系列

(1/30)大家一起学Blazor:初见Blazor

笔者接触软件行业的时间不长,先后接触三种架构

2021-12-09 阅读更多

(2/30)大家一起学Blazor:网页和Blazor介绍

笔者对网站的认知为前端、后端及数据库,使用者在浏览器页面按下按钮或是表单请求,触发前端事件,将收集起来的条件打包送往后端

2021-12-09 阅读更多

(3/30)大家一起学Blazor:Blazor Server和Blazor WebAssembly的差异

下载Visual Studio后首先建立一个Blazor解决方案,里面建立Blazor Server项目,方案位置可以自己选择(注:新版Visual Studio将Blazor Server跟Blazor WebAssembly的新建项目模板拆分了,较为直观)

2021-12-10 阅读更多

(4/30)大家一起学Blazor:Component及路由介绍

由于笔者当初是用ASP.NET Core API + Blazor Server,所以会以Blazor Server示范,日后研究完Blazor WebAssembly会再将心得补上。

2021-12-10 阅读更多

(5/30)大家一起学Blazor:依赖注入(Dependency Injection)

问题来了,为什么Blazor会知道WeatherForecastService在这里可以调用?

2021-12-11 阅读更多

(6/30)大家一起学Blazor:抽离C#代码

昨天看到`FetchData.razor`的代码太长了,为求方便,我们把`@code`的部分抽取出来另成一个文件。

2021-12-12 阅读更多

(7/30)大家一起学Blazor:生命周期(Lifetime)

自己建立的Service都必须在Startup.cs(Blazor Server)或Program.cs(Blazor WebAssemlby)注册,但有些基本Service就不用自己做了。

2021-12-13 阅读更多

(8/30)大家一起学Blazor:CSS样式修改和数据绑定详述

现在每次启动项目,预设路径都会是`/`,但我们目前没有Component套用这个路由,要自己切换到`Post`实在有些麻烦,另外Menu的图案也跟名称不符,我们来调整一下。

2021-12-13 阅读更多

(9/30)大家一起学Blazor:Parameters

假如我们想增加的按钮用来清除`form`(表单)的数据,最快的方式是增加一个`type=”reset”`的按钮,这时候就用到两个按钮了,可以用到Blazor的核心概念:组件封装。

2021-12-14 阅读更多

(10/30)大家一起学Blazor:Blog and Posts

现在我们有一个可以输入日志的界面了,但日志就是每天都要写的意思,只有一篇怎么够呢?我们来加上blog。

2021-12-14 阅读更多

(11/30)大家一起学Blazor:Arbitrary属性

目前`MyButton`有3个`[Parameter]`,如果再增加的话,又要再定义新的`[Parameter]`,为了避免不断更新这个Component,我们来用Blazor提供的`@attribute`。

2021-12-15 阅读更多

(12/30)大家一起学Blazor:Cascading values and parameters

昨天不小心把Reset按钮的type改成button,今天改回reset。

2021-12-15 阅读更多

(13/30)大家一起学Blazor:EventCallback, event from child to parent

目前的4篇日志是来自我们写好的假数据,但正常来说不会这样做,而是有个按钮让用户点击了之后,增加或减少日志的数量。

2021-12-16 阅读更多

(14/30)大家一起学Blazor:JavaScript interop(互操作)

虽然Blazor 不需要用到JavaScript,但某些已有的js库 还是很方便,不能因为不想用JavaScript 就全部舍弃,Blazor 就提供了调用JavaScript 的方法,这种情况称为JavaScript interoperability(简称JavaScript interop)。这篇就来实现Delete 按钮的提醒窗口,因为删除是很重要的功能,不能让使用者轻轻一按就轻易删除。

2021-12-16 阅读更多

(15/30)大家一起学Blazor:CSS isolation(隔离)

有时候会想对不同Component 做个别样式设置,但如果把class 都写在`wwwroot/css/site.css`,或是针对某个元素改动样式,可能导致改一个就影响全部Component,这种全域冲突是必须避免的,但应该怎么做?

2021-12-18 阅读更多

(16/30)大家一起学Blazor:建立数据库

我们现在有了基本的日志,但是每次输入完重新加载页面数据都会重置,因为这些数据都只存在于浏览器,没有真正储存到数据库,为了保存下来,我们要跟数据库连接。

2021-12-18 阅读更多

(17/30)大家一起学Blazor:建立Blog和Post关联

接下来就是讲跟数据库关联的内容了,会着重说明ASP.NET Core 跟EF Core,如果有需要改页面才会说到Blazor,这边会花比较多篇幅着墨。

2021-12-19 阅读更多

(18/30)大家一起学Blazor:修改Add()方法

假设今天有个状况是这样:有一条日志,新增第二条但还没提交前,想将第一条删除,这时会发生什么事呢?

2021-12-20 阅读更多

(19/30)大家一起学Blazor:图片上传

在大部分的网站中,上传图片也是很重要的功能,今天我们就来操作下。

2021-12-21 阅读更多

(20/30)大家一起学Blazor:日志记录

在开发系统时,记录是一件很重要的事,前面都没有提到,笔者在最近才想到这点,所以就来实现吧!

2021-12-21 阅读更多

(21/30)大家一起学Blazor:ASP.NET Core Identity(1)

今天来实现身分验证的部分

2021-12-22 阅读更多

(22/30)大家一起学Blazor:ASP.NET Core Identity(2)

昨天做的验证只针对`Identity` 系统,没有包含到我们的日志

2021-12-22 阅读更多

(23/30)大家一起学Blazor:ASP.NET Core Identity(3)

前面有说到`UserAuthentication()`跟`UserAuthorization()`,这两个的差别在于:前者用于验证登录者是谁,后者则决定登录者可以做什么。

2021-12-23 阅读更多

(24/30)大家一起学Blazor:<AuthorizeRouteView>运用

前天有在`Blog.razor`加入通过验证及未通过的显示内容,但如果系统要呈现的未通过验证内容都一样,在每个Component 都这样写就太浪费时间了,可以利用`App.razor`帮我们做统一呈现的事。

2021-12-23 阅读更多

(25/30)大家一起学Blazor:添加角色功能

首先添加承载角色数据的`ViewModel`,因为接下来的权限会以角色判断

2021-12-23 阅读更多

(26/30)大家一起学Blazor:给用户分配角色

昨天角色的`CRUD` 功能都完成了,接着就是要把角色分配给用户了

2021-12-24 阅读更多

(27/30)大家一起学Blazor:添加用户和Claim功能

前面说过`ASP.NET Core Identity` 是基于`Claim` 的验证,而`Role` 就是类型为`Role` 的`Claim`

2021-12-25 阅读更多

(28/30)大家一起学Blazor:Policy-based authorization

之前有说到`ASP.NET Core Identity` 使用的是基于`Claim` 的验证,其实`ASP.NET Core Identity` 有不同类型的授权方式,最简单的`登录授权`、`角色授权`、`Claim 授权`,但上述几种都是以一种方式实现:原则授权(`Policy-based authorization`)。

2021-12-25 阅读更多

(29/30)大家一起学Blazor:Blazor单元测试

开发一个系统最无聊的过程大概就是解决BUG了,尤其是那种尝试对null 对象取值的错误(`Object reference not set to an instance of an object.`),这应该是大部分人刚踏入编程领域最常碰到的问题,为了从枯燥的解决BUG过程解脱,这篇就来介绍`单元测试`。

2021-12-25 阅读更多

(30/30)大家一起学Blazor:.NET 6 <ErrorBoundary>

昨天说到单元测试,但有些时候可能由于时间关系没办法完整测试

2021-12-25 阅读更多

Blazor系列终结!

Blazor系列转载`终结啦`,其实站长在25号时就已`完成转载`,并同步在`Dotnet9`网站(`https://dotnet9.com`)发布,并创建了一个专辑`《大家一起学Blazor》`,大家可随时在网站浏览。

2021-12-30 阅读更多