现在每次启动专案,预设路径都会是/,但我们目前没有Component套用这个路由,要自己切换到Post实在有些麻烦,另外Menu的图案也跟名称不符,我们来调整一下。
我们先来改icon,由於font-awesome目前已用会员制,必须登入才能产生一套免费的icon集合,因此笔者使用bootstrap的icon。首先去bootstrap的icon页面下载zip档(不想下载档案的人可以直接引用CDN),将档案解压缩放在wwwroot
,於_Host.cshtml
引用bootstrap-icons.css
,在官网搜寻自己喜欢的icon套用即可,笔者这边还有做些样式调整。
接着在Blazor Server点击右键选择属性,切换侦错页签并在红框处输入Post,如果是偏好在文件输入的人,也可以打开Properties
下的launchSettings.json
档案,於profiles
内的IIS Express
输入这行"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
的事件名,如onchange
、oninput
等等,这些事件在MDN都可以查到。接着在网页的输入框输入内容,就可以看到底下的字即时变换了,可以看到我的焦点虽然仍在input
元素上,底下的内容已经改变了。
不过oninput
跟onchange
的使用时机最好再拿捏一下,例如如果使用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
。
Ref: ASP.NET Core Blazor data binding
Ref: GlobalEventHandlers.onchange
Ref: Unparsable values
<<: Day 02: ML基础第二步 Anaconda开发环境
找救援 意识到有问题时,首先寻找有没有专案遇到同样的问题——有使用 Ruby on Rails 的大...
一、异常值(Outliers) 异常值是指某些大幅度偏离正常值的资料点,来源可能是测量异常或记录异常...
刚回台北好累rrr 自我介绍後通常会先问一些简答题, new grad 可能会有一些基本 CS 知...
没有搞懂它前,似懂非懂的,东拚西凑,也能写出程序. 但搞懂它,更知道自己在写什麽. key word...
参赛前言 第一次参赛是 2019铁人赛(连结),也是刚接触 React 不久,透过那次真的觉得收获良...