Skip to main content

Blazor组件基础之数据绑定

分类:  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 表达式是紧密相关的,加入字段或者属性的值改变,那么该元素的值也跟着改变,如下图:

Read more

Blazor组件基础之级联值和级联参数

分类:  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)在使用的过程中实际上是需要

Read more

Blazor组件基础之概述

分类:  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语法的文档,请使用如下链接访问:

Read more

Blazor基础之静态文件

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

今天我们来讨论一下静态文件,这个主要是针对于Blazor Server部署模式的。 但是其实基于WebAssembly中也是可以使用不同的静态文件的,一般的静态文件时放置于wwwroot/中,在这个目录中我们可以防止js文件,CSS文件,以及图片等等。 如果需要在webassembly的项目中引用这些静态文件,只需要在引用中加入静态文件的路径,例如: <imge src="/image/logo.png"/> 需要注意的是在组件中不支持~/形式的路径。同时在路径中使用"/" 仅仅是代表相对于wwwroot。 为了添加格外的静态文件,我们需要使用FileExtensionContentTypeProvider或者配置StaticOptions

Read more

Blazor基础之SignalR

分类:  Blazor入门 标签:  #Asp.Net core基础 #.Net #Web #Web Client #Blazor 发布于: 2023-05-25 21:51:08

SignalR技术的介绍您可以参考官方文档,后期我们也会给大家整理这个部分,目前您可以去这里看一下:https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-5.0 关于SignalR技术在Blazor Server部署中是一个必须的技术,在Blazor Serer中渲染处理在服务端繁盛,同时服务端还有预渲染的处理,但是Blazor 的js框架在客户端会通过SignalR技术和服务端进行通讯从而完成组件的更新,事件的监听等等工作,所以Blazor Server是离不开SignalR技术的,但是对于Blazor WebAssembly不是这样的,Blazor WebAssembly运

Read more

Blazor基础之错误处理

分类:  Blazor入门 标签:  #Asp.Net core基础 #.Net #Web #Web Client #Blazor 发布于: 2023-05-25 21:40:06

今天我们来学习一下Blazor应用的错误处理。 关于本章我们需要从如下几个方面来学习: Blazor WebAssembly和Blazor Server在错误处理上有什么不同点。 Blazor框架默认预置哪些错误处理的配置和方法 异常和错误处理的一般方法。 错误和异常在Blazor应用哪些地方会出现。 详细的阐述每个出现错误或者异常该如何处理。

Read more

Blazor基础之日志

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

关于Blazor Server的日志配置和使用,您可以参考文档: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/logging/?view=aspnetcore-5.0 Blazor WebAssembly日志配置 基于WebAssembly的日志配置,我们目前有两种配置方法,一种是使用配置文件来配置,关于Blazor的配置,您可以参考文章: 配置文件wwwroot/appsettings.json:

Read more

Blazor基础之环境

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

由于WebAssembly主要运行在浏览器端(也即客户端), 因此针对于WebAssembly来说,不能像基于Blazor Server形式来判断环境。由于基于Webassemlby的应用可以使用基于ASP.net Core的服务host形式,或者是直接使用Web服务器静态来的Host,因此对于基于WebAssembly部署的应用判断环境最有利的方法是通过对于HTTP的header变量来设定是最有力,我们也是采取这种做法,在HTTP通讯时的头部加上一个参数:blazor-environment, 来指定应用是运行在什么环境下,例如是Production环境还是Development环境。 举一个例子,加入你是使用IIS Host WebAssembly的应用,那么如下就是通过

Read more

Blazor基础之依赖注入

分类:  Blazor入门 标签:  #Asp.Net core基础 #.Net #Web #Web Client #Blazor 发布于: 2023-05-25 20:59:14

Blazor是基于ASP.net Core的框架来开发的,因此Blazor的依赖注入当然也是在ASP.net Core的依赖注入的基础上开发而来的,如果你想深入的了解依赖注入的基本理论,目前你可以在网上找一些专业点的资料来学习一下,之后我也会在重新学习ASP.net Core的框架的时候重新在回顾一下依赖注入的理论知识,不过如果你等不及,你可以先看一下ASP.net Core的依赖注入: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-5.0 不过对于依赖注入有几个基本的知识点需要有概念: 依赖注入的使用范围:SingleTon, Sco

Read more

Blazor基础之配置

分类:  Blazor入门 标签:  #Asp.Net core基础 #.Net #Web #Web Client #Blazor 发布于: 2023-05-25 20:48:56

关于Blazor应用的配置,我们需要按照部署模型来分别讨论,这其中基于Server部署的模型其配置模型和ASP.net Core的常规应用是一致的,这个部分,您可以参考ASP.net Core的官方文档: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/configuration/?view=aspnetcore-5.0 本章主要讨论基于WebAssembly模型部署的配置讨论,以下所有的内容都是基于WebAssembly部署模型。 配置文件 配置文件的位置默认在wwwroot下: Wwwroot/appsettings.json Wwwroot/appsettings.{ENVIRONMEN

Read more