分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 17:16:40

Blazor入门指南，包含本站所有基础的Blazor文章

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:57:24

对于表单和数据验证，只要做过几天Web开发，都知道这两个概念是有多重要，在CGI，PHP以及ASP横行的年代，很多网站被SQL注入攻击，被各种javascript代码攻击注入频繁发生，主要原因就是大家没有总结表单提交的数据验证，这些问题直到成熟的编程框架出现之后，这些问题才慢慢的被解决。我们今天来看一下Blazor的表单验证。 主要的应用场景我们可以考虑如下的场景： 客户端的数据验证。 客户端验证通过后，同时客户端部分的业务逻辑验证 客户端验证全部完成后，提交后台，后台也需要进行数据验证，验证成功或者失败，成功返回Status code 200, 但是如果验证失败返回到客户端，客户端如何支持验证错误的信息呢？ 普通的格式验证之外，如何处理业务验证呢？例如不能有同

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:49:47

布局也是一种Blazor组件，所以我们可以在布局组件里使用我们所有前面学习过的所有知识。但是对于整个应用来讲我们需要设定一个默认的布局，当您创建好实例代码之后，默认布局组件是被放置到Shared目录下，组件名称是MainLayout.razor, 同时我们注意到也定义了一个独立的CSS定义文件Mainlayout.razor.css, 同时我们主要是通过App.razor 组件来通过RouteView组件来使用布局组件, 如下图：

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:39:36

我们今天来学习Blazor中的全球化和本地化的知识。 让我们先来了解一下全球化和本地化在Blazor应用主要涉及到哪些场景： 选择不同的语言，使得界面，出错信息等载入不同的资源文件并显示相应语言的内容。 日期格式，数字格式，货币格式的支持。 首先针对第一个问题，我们大家都知道在.Net平台上对于本地化的支持要是用过.Net平台的资源系统来进行支持，这包括Resource Management以及资源文件等支持。 我们来看看由.net 提供的工具，有哪些是可以在Blazor中使用的。

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:23:05

由于后面这几个知识点，都比较容易理解，因此我们将这三章合成一章，本章分别讲述三个主题： 模板组件 CSS独立 组件库 模板组件 模板组件指的是接受一个或者多个以UI 模板为参数的组件，接受到的参数会在组件渲染的时候进行渲染，每个参数的类型必须是RenderFragment或者RenderFragment<Tvalue>形式的参数，同时在应用组件的时候可以以子标签的形式赋予参数值，具体的可以看下图的实例代码：

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:16:12

理解组件的生命的周期和生命周期中我们可以编程的方法非常重要，首先要理解组件的基本使命是什么，我们这里讨论的组件实际上就是UI组件，虽然我们可以允许区别有UI呈现的组件和没有UI呈现的组件，但是组件的唯一的使命就是给用户呈现UI并响应用户的交互。那么在整个组件的生命周期中，组件有两个最终的结果，就是渲染和回收，这个两个结果中我们的术语就是Render和Dispose, 关于Dispose大家都不陌生，但是对于render我们需要仔细的理解，在本节我们理解它就是将我们需要的内容在浏览器上展现出来，这个就是渲染。

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 16:08:37

Blazor框架允许我们在HTML 标记的属性里添加事件监听，这里有一个需要理解的概念，那就是这些事件是具体到底指的是什么事情？ 其实我们这里指的是的ODM事件，因此我们可以通过如下的链接来参考一下目前可以支持的多少ODM 事件：https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers 如何进行事件的监听和处理？ 具体的语法如下： <input @on{EventName} = "deletage name"/> 如下图：

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 10:11:37

今天我们来学习组件的数据绑定。 提起数据绑定我相信很多windows的老粉都应该非常熟悉了，对于数据绑定这个概念只要学习过windows的编程的都不陌生，这也是微软在设计软件系统的一个非常大的特定，所有有UI的软件都有数据绑定的概念，对于Blazor来说，也不例外。 Blazor组件的数据绑定很简单，只需要在组件中的元素中使用类HTML 属性的方式:@bind 将该元素的值和字段，属性，或者是Razor表达式绑定到一起。绑定的意思我们需要在这里加深理解，也即该元素绑定的值和在@code {} 或者部分类中定义的字段/属性/Razor 表达式是紧密相关的，加入字段或者属性的值改变，那么该元素的值也跟着改变，如下图：

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 10:02:18

章我们学习Blazor组件的基础之级联值(Cascade Value)和级联参数(Cascade Parameter)。 级联值(CascadeValue)在Blazor中是指这样的一个应用场景，我们在使用Blazor组件的时候都是通过HTML标记的形式在使用，例如<Component1 ><Component2/></Compontent1> 这样的形式，根据HTML的特性我们也了解整个HTML文档实际上也是类似一个标记树，那么我们有一些应用场景，我们需要在父组件或者是根组件里一些值，并且希望这个值能被父组件或者跟组件以下的所有子组件都可以访问到，针对这种应用场景，Blazor提供就是级联值(CascadeValue), 级联值(CascadeValue)在使用的过程中实际上是需要

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-27 9:53:21

所有的Blazor应用都是基于Blazor组件来开发的，Blazor组件就是Razor的组件，以.razor为扩展名，同时包括HTML标记以及以@code {} 代码块包含的C#代码：HTML 标记，字段，属性，以及方法， 事件等。 在Blazor中组件和Razor的组件可以等同。 Razor语法 我们上面说了Blazor组件实际上就是Razor组件，因此熟悉Razor语法是必须的，如果你对Razor语法还不熟悉，那么你可以参考我之前翻译的一篇Razor语法的文档，请使用如下链接访问：