luwq168的专栏

Blazor 带有18位身份证号校验的TextBox

所以我这个Select只接受Value为string类型的值，把转换工作移到外面来，因为放到内部转换不是很可行。这个看看原生的InputSelect就明白了，它根本只给了个ChildContent，像option这些东西需要自己另外弄，遭到了很多人的吐槽。暴露在外边，就没有转换这个任务了，但写代码的任务更多了。上次的Select能用，但有缺陷，当值改变时，没有引发一个属于EditForm的值改变事件，就是说还没有连接到表单，功能不完善。

Tab 组件可能很少用，这里只是为简化代码，故可能比较难看，但能用。TabItem也有限制为5个，如果超过则再自行增加。

对话框是常用的组件之一，可以提供信息提示，也可以设置表单录入数据等。但是，Bootstrap Modal需要JS互操作，这个不太懂，只能绕过。

DateTime 和 DateTime?很不好搞，它不像string和string?有默认的转换，只是string不能为null。如果将TValue设为DateTime，就不能绑定DateTime?属性，同样，设为DateTime?，也不能绑定DateTime属性。所以前面一篇文章只能适用于DateTime属性，兼容性差，只能另搞一个DateTime？

输入日期是一个非常重要的基础组件，可能也需要限定日期范围。这里只对日期进行定义，即设定type="date"，其他的不常用，就略去了。DateTime 是一个结构体，像int有为0的初始值一样，它有一个初始值{0001/1/1 0:00:00}；所以麻烦就在这里，要么就设为DateTime?，可这与codefirst相冲突；要么设定初始值，未设定初始值，需要在OnValidSubmit中再去判断日期字段是否未输入，即还是等于它的初始值。

我们可能限制用户输入值范围，超出视为无效且引发错误，这就是设置最大值和最小值。NumberBox.razor在这里未作改动。数值类型有好几种，但设置最大和最小一般为int类型，如果有特殊需求，代码就要复杂一点。

实现点击标头按所在列值进行排序，是一个非常有用的功能，其他的UI一般搞得非常复杂，添加标志图标什么的，使得本就不宽裕的表格更加拥挤。我的思路是，点击所在列的标头部位，传递标头值，然后根据标头值来改变查询语句。因为并不是所有列都需要排序，需要有一个特征字符。以下是Table.razor。

只能输入数字的输入框，为避免命名冲突，先命名为NumberBox。

有了TextBox，PasswordBox相对容易多了，就是改个type的事。

这是一个带标签和验证信息的输入框，用起来很方便。为避免命名冲突，这里将InputText改名为TextBox，其实内部类型就是string。可能有人会说用反射获取标签，我认为上面这个代码非常明显地显示了这是哪个属性输入框，用反射反而查找起来不容易。注意，组件的总长不能大于上一级容器长度，否则标签会分行或断行。

Blazor 原生提供的基础组件实在是一言难尽，这给许多Blazor UI公司很多机会。可是试用了不少如AntDisgen、BootstrapBlazor等，总会有一些难尽如意的地方。还是自己做丰衣足食吧。其中的class是引用Bootstrap v5.3.0的。

Select 组件比较难做，因为它有确定类型为string 的显示值，还有不确定类型的返回值。首先需要一个专门的类作为其下拉列的返回值和显示值，其次因返回值的不确定性，需要进行转换来确定。第三，如果本身有初始值，Select 不像 CheckBox 那样简单的初始化。

Table 组件比较复杂，内容比较多。PaginatedList 代码以前贴过，这里只增加一个属性ItemCount。

一种方式是将文件上传到Server端进行读取，一种方式当然是直接在网页客户端读取后发送数据到Server端进行保存。考虑到Server端的安全性，后一种方式相对更安全，同时减轻Server端压力。需要注意的是IBrowserFile接口没有包含原始文件的路径。正因为没有路径，不可能以打开文件的方式去直接打开它然后读取，所以，需要再次将它写入到定义好的路径中，然后打开它。

如果子组件1用户操作后，转到组件2，这时我们不想再显示组件1，又要处理不显示组件1的动作，再处理显示组件2的动作，真的很麻烦。页面变量其实就是Layout母版页中的Body能接受的变量，但是我们在编写组件页的时候，它不能简单地实现回调方法，编写的EventCallback 回调方法无法简单地 ="@某个父级方法"，只要解决这个难题，问题就迎刃而解了。我觉得吧，就是个Id值，一般是int类型，供各页面组件使用来获取数据库的相应数据，这个非常有用，它能不再显示在浏览器Url路由中，更加安全。

功能：适合企业内部的账户分发（非开放公众注册）的App。1、身份控制：分发账户为初始密码，使用初始密码登录后必须修改密码才能使用相应身份的功能；根据身份提供相应菜单。2、定时检测：使用JWT功能，包括生成和验证jwt，可定义jwt生效时长、验证时间间隔，失效后自动转到登录页面。3、账户管理：包括添加、编辑、离职管理示例。本项目只在提供示例功能演示，力求简单明了和安全稳定高效，界面简单美化。

注意：Key要求有一定的长度，建议复制新生成的Guid.NewGuid().ToString()；上篇已经实现了登录与退出的主服务类，其他还需要一些具体的东西。1、引用Blazored.LocalStorage包；7、登录Razor组件（略）。注意：需要注册服务。...

如果自学Blazor ，因为增加了许多知识点，有许多问题会是一头雾水，难以理清。Blazor Server 的登录与退出就是一个非常难以理清的问题，因为我有强迫症，既然用了Blazor，我难道又要退回去用Razor Page？新建立的Blazor Server程序，使用Identity的个人标识账户，它的登录与退出默认使用的是Razor Page，因为它能非常清晰地得到ClaimsPrincipal 的User，和不支持Razor组件，特别是所以想抛开Razor Page，它的登录与退出只能另想办法，好像一