前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(8/30)Blazor系列:CSS样式修改和数据绑定详述

(8/30)Blazor系列:CSS样式修改和数据绑定详述

作者头像
沙漠尽头的狼
发布2021-12-16 12:47:07
2.6K0
发布2021-12-16 12:47:07
举报
文章被收录于专栏:Dotnet9Dotnet9

现在每次启动项目,预设路径都会是/,但我们目前没有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,就可以看到显示成指定的日期格式。

![格式绑定]](https://img1.lequ.co/2021/12/1411.png)

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

本文引用:

  • ASP.NET Core Blazor data bindind
  • GlobalEventHandlers.onchange
  • Unparsable values

出处:iT邦幫忙 作者:StrayaWorker 原文链接:https://ithelp.ithome.com.tw/articles/10261579 编辑:沙漠尽头的狼

注:本文代码通过 .NET 6 + Visual Studio 2022重构

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Dotnet9 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档