Day 08 CSS样式改动及资料绑定详述

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

我们先来改icon,由於font-awesome目前已用会员制,必须登入才能产生一套免费的icon集合,因此笔者使用bootstrap的icon。首先去bootstrap的icon页面下载zip档(不想下载档案的人可以直接引用CDN),将档案解压缩放在wwwroot,於_Host.cshtml引用bootstrap-icons.css,在官网搜寻自己喜欢的icon套用即可,笔者这边还有做些样式调整。
https://ithelp.ithome.com.tw/upload/images/20210908/201408938Oeel5Fbwe.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893oYJhiDRIw8.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893kUQ71aGxGd.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893VJAomr8sz4.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893NzjZYf625r.png

接着在Blazor Server点击右键选择属性,切换侦错页签并在红框处输入Post,如果是偏好在文件输入的人,也可以打开Properties下的launchSettings.json档案,於profiles内的IIS Express输入这行"launchUrl": "Post",,两者是一样的结果。
https://ithelp.ithome.com.tw/upload/images/20210908/2014089371yfl1K1xi.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893YdyMlNUAHu.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/201408933uoSzVwiHf.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893BeHPnceMC8.png

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

Blazor的资料绑定有分为单向绑定(one way binding)跟双向绑定(two way binding),单向绑定就是在画面上输入@variable,有什麽资料就显示什麽。
https://ithelp.ithome.com.tw/upload/images/20210908/20140893xjN24JZTxA.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893Fcv4Y4X7qc.png

双向绑定则要用@bind-value将input内的资料跟画面绑在一起,画面输入的内容也会反向影响资料。
https://ithelp.ithome.com.tw/upload/images/20210908/20140893DzYmgCwSVT.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893j9KICxs8l2.png

如果有学过Angular的人应该会很熟悉,就是[ngModel]跟[(ngModel)]的用途,只是名字换了一个。

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

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

不过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,就可以看到显示成指定的日期格式。
https://ithelp.ithome.com.tw/upload/images/20210908/20140893L5sKMMwPVD.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893N92Ae35gNT.png

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

Ref: ASP.NET Core Blazor data binding

Ref: GlobalEventHandlers.onchange

Ref: Unparsable values


<<:  Day 02: ML基础第二步 Anaconda开发环境

>>:  [Day7]PHP运算符02

[DAY6] 万事起头难

找救援 意识到有问题时,首先寻找有没有专案遇到同样的问题——有使用 Ruby on Rails 的大...

[Day 7] 从零开始的股票预测 - 异常值侦测

一、异常值(Outliers) 异常值是指某些大幅度偏离正常值的资料点,来源可能是测量异常或记录异常...

【面试】技术与专案问答

刚回台北好累rrr 自我介绍後通常会先问一些简答题, new grad 可能会有一些基本 CS 知...

SQL JOIN 共七种

没有搞懂它前,似懂非懂的,东拚西凑,也能写出程序. 但搞懂它,更知道自己在写什麽. key word...

【Day01】数据输入元件 - Button

参赛前言 第一次参赛是 2019铁人赛(连结),也是刚接触 React 不久,透过那次真的觉得收获良...