8/30

8/30

今、プロジェクトを起動するたびに、プリセットパスは`/`になりますが、現在、このルートを適用するコンポーネントはありません。`Post`に切り替えるのは本当に面倒です。また、メニューのパターンも名前と一致しないので、調整しましょう。

最后更新 2021/12/13 22:36
StrayaWorker
预计阅读 3 分钟
分类
Blazor
专题
ブレザーシリーズを学ぶ
标签
.NET C# ASP.NET Core Blazor

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

我们先来改 icon,由于font-awesome目前已用会员制,必须登录才能产生一套免费的 icon 集合,因此笔者使用bootstrapicon。首先去bootstrapicon页面下载zip文件(不想下载文件的人可以直接引用 CDN),将文件解压存放在wwwroot,在_Layout.cshtml引用bootstrap-icons.css,在官网搜寻自己喜欢的 icon 套用即可,笔者这边还做了些样式调整。

bootstrap下载icon页面1

bootstrap下载icon页面2

bootstrap下载icon页面2

bootstrap下载icon页面3

修改bootstrap类

bootstrap图标

接着打开 Blazor Server 项目的launchSettings.json文件,在 profiles 内的 BlazorServer 输入这行"launchUrl": "Post"。

Day06 有说到绑定,不过只有稍微带过,因为当时的目的只是展示form,现在来细说一下。

Blazor 的数据绑定有分为单向绑定(one way binding)跟双向绑定(two way binding),单向绑定就是在页面上输入@variable,有什么数据就显示什么。

单向绑定

双向绑定则要用@bind-value将 input 内的数据跟页面绑在一起,页面输入的内容也会反向影响数据。

双向绑定

Angularを学んだことのある人ならよく知っているはずですが、[ngModel]と[ngModel]の使い方は、名前が変わっただけです。

那 Blazor 有像 Angular 的(click)事件绑定吗?也是有的,不过若用<InputText>Component 会说到较为复杂如EventCallBack的内容,所以笔者这边先用单纯的<input>元素,之后讲到EventCallBack再回来说明。

先把<InputText>换成<input>,接着将@bind-Value改成@bind,再加入@bind:event,值为html的事件名,如onchangeoninput等等,这些事件在 MDN 都可以查到。接着在网页的输入框输入内容,就可以看到底下的字即时变换了,可以看到我的焦点虽然仍在 input 元素上,底下的内容已经改变了。

事件绑定

不过oninputonchange的使用时机最好再拿捏一下,如果使用oninput绑定number类型的数据,当使用者输入 1.5 的瞬间,就会被改为 1,这会让使用者困惑,若用onchange,则是在使用者移开焦点后才会将 1.5 改为 1。若非得用oninput的话,可以将绑定数据改为nullable或是字符串,再使用 getter,setter 自己做逻辑处理不合法数据。

那 Blazor 有类似 Angular 的pipe去改变网页的数据格式如 number、datetime 吗?目前有提供@bind:format绑定可以改变日期格式,我们先在PostModel加入一个CreateDateTime,接着复制一组标题的div贴上,将label@bind的绑定数据改一下,再把@bind:event改成@bind:format,就可以看到显示成指定的日期格式。

格式绑定

要注意的是 Blazor 并没有对应<select>的 Component,因为 HTML 的attribute不能有null,最接近null的概念是移除value这个attribute,但如果选到一个没有value<option>,浏览器会将该<option>的文字当成value

*** この記事で引用:**

**注:このコードは. NET 6 + Visual Studio 2022リファクタリングを通じて、元のリンクとリファクタリング後のコードを比較することができます。読んでいただきありがとうございます。

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2021/12/25

(29/30みんなで学ぶBlazor:Blazorユニットテスト

システムを開発する最も退屈なプロセスは、バグを解決することです。特に、nullオブジェクトに値を取ろうとするエラーです`Object reference not set to an instance of an object.`,これは、ほとんどの人がプログラミングの分野に足を踏み入れたばかりの最も一般的な問題である必要があります。退屈なバグ解決プロセスから解放するために、この記事では、単体テストを紹介します。

继续阅读
同分类 / 同标签 2021/12/25

(28 Blazor:Policy Based Authorizationの略。

前に`ASP.NET Core Identity`は`Claim`に基づいた検証を使用していると述べたが、実は`ASP.NET Core Identity`には異なる種類の認可方式があり、最も簡単な`ログイン認可`、`ロール認可`、`Claim認可`があるが、上記のいくつかの種類はすべて一つの方式で実現されている:原則認可`Policy-based authorization`。

继续阅读