首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Blazor 初探

Blazor 初探 目录 一、新建项目 二、ASP.NET Core Blazor 项目结构 三、结合代码讲解 四、改造 五、配置文件的使用 六、发布 Linux(CentOS) 题外话,期间遇到个问题...反向代理 七、地址 独立观察员 2021 年 4 月 11 日 上个月发了篇文章《Blazor 中如何下载文件浏览器》,介绍了调用《下载中转加速器 VPSDownloader.NET(.NET Core...程序部署 Linux 系统)》中提到的 VPS 文件中转下载服务后,如何将下载的文件以 Blazor 的方式传出到浏览器的方法。...效果如下图: 四、改造 首先我们的主页不需要关于栏,有些边距也要去掉,所以拷贝 MainLayout 布局模板并改名为 NoPaddingLayout.razor: site.css 中添加一些 CSS :...剩下的就是拷贝之前前端页面然后修改的,简要解释: @xxx 就是绑定值,适用于标签;@bind="yyy" 就是双向绑定,适用于输入框;@onclick="zzz" 表明点击时调用 zzz () 方法

2.1K10

结合使用 C# 和 Blazor 进行全栈开发

ModelBase ,后者包含所有可用于验证规则并返回绑定 Blazor 页面的错误消息的逻辑。...首先,我将在 SharedLibrary 项目中新建 ModelBase ,如下所示: public class ModelBase { } 错误和规则 现在,我将向 ModelBase 添加包含验证错误列表的专用字典... 标记是自定义 Blazor 组件,用于处理字段的数据绑定和错误显示逻辑。此组件只需要三个参数即可正常运行: Model 字段:标识数据要绑定。...FieldName:标识数据要绑定的数据成员。 DisplayName 字段:让组件可以显示易记消息。...OnInit 方法使用其中的一些测试数据来初始化模型。它绑定 ModelChanged 事件,并调用 CheckRules 方法来验证规则。

6.5K40

Blazor 中的路由和路由模板

候选路由列表产生自实现 IComponent 接口的已探索程序集中的列表,更重要的是,使用 Route 属性进行修饰。收集的所有路由都存储在一个字典中并按从最具体最不具体的顺序进行排序。...在客户端上,路由器参与多种情况,最常见的情况是用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定内部位置更改事件,并从客户端处理导航新请求路径的整个过程。...最后,Blazor 路由器不支持条件重定向备用路由 - 这也是 Angular 路由器可以做到的。 可以合理地预计,当 Blazor 作为版本 1.0 附带提供时,该增量的一部分将会减少。...路由模板 路由是将 URL 与已知 URL 模式列表绑定在一起的过程。在 Blazor 中,URL 模式或路由模板被收集在路由表中。...类型匹配是参数路由和自动绑定变量的常见问题。如果 URL 的段包含文本字符串,但绑定变量声明类型为 int,会发生什么情况?

8.3K21

使用Blazor构建投资回报计算器

FlexGrid快速入门可以为您提供有关如何将 FlexGrid 控件添加到 Blazor 应用程序的详细步骤。 FlexGrid 在绑定和非绑定模式下都能很好地工作。...对于此应用程序,我们将使用 FlexGrid 的非绑定模式,因为我们需要输入一些值,根据这些值执行计算以填充 FlexGrid 中的其他单元格。...现在,将以下代码添加到 razor 页面,通过显式添加所需的行数和列数来添加和配置 FlexGrid 控件以实现非绑定模式: @page "/" @using C1.Blazor.Core @using...对于此实现,我们需要定义一个自定义 MergeManager,它将合并 FlexGrid 中预定义的单元格列表,以便为投资计算器呈现适当的单元格表示形式。...要将样式应用于 FlexGrid 中的单元格,请继承GridCellFactory以创建自定义 CellFactory ,该类可让您单独设置每个单元格的样式。

19430

ASP.NET Core Blazor 初探之 Blazor WebAssembly

我们的Blazor项目需要通过Http与API站点进行通信,所以肯定需要一个访问Http的库。...虽然没有明确定义为class,但是显然这个代码块最后会被编译成一个。这个里的变量可以作为razor模板的数据源,可以进行绑定或者for循环。...因为SPA跟传统的Web项目不同,它可以完整的维护状态,所以如果我们把列表的数据存起来,那么其他地方可以很方便直接在内存里查询,高效又便捷。...改造列表页面 现在我们有了Store,所以当列表获取到数据后需要存储Store里,这样我们在修改页面或者其他地方就能根据id直接获取数据了。...但是,我不想在这神吹Blazor,毕竟它也没有让人惊艳的地步,比如我熟悉Angular,熟悉VUE,说真的,目前来说,我没有什么动力切换到Blazor上来。

6.5K10

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

图标 接着打开Blazor Server项目的launchSettings.json文件,在profiles内的BlazorServer输入这行"launchUrl": "Post"。...Blazor的数据绑定有分为单向绑定(one way binding)跟双向绑定(two way binding),单向绑定就是在页面上输入@variable,有什么数据就显示什么。...单向绑定 双向绑定则要用@bind-value将input内的数据跟页面绑在一起,页面输入的内容也会反向影响数据。...双向绑定 如果有学过Angular的人应该会很熟悉,就是[ngModel]跟[(ngModel)]的用途,只是名字换了一个。 那Blazor有像Angular的(click)事件绑定吗?...null,最接近null的概念是移除value这个attribute,但如果选一个没有value的,浏览器会将该的文字当成value。

2.6K30

Blzor Bootstrap Blazor 组件库

Bootstrap Blazor 组件库 一套基于 Bootstrap 和 Blazor 的企业级组件库 项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C...获取本项目代码 BootstrapBlazor 相关资源 Blazor 官方文档 生成 Blazor Web 应用 什么是 Blazor 练习 - 配置开发环境 Blazor 组件 练习 - 添加组件...数据绑定和事件 练习 - 数据绑定和事件 总结 视频教程 B 站视频集锦 传送门 组件 Blazor 应用基于组件。...Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。 组件是内置 .NET 程序集的 .NET ,用来: 定义灵活的 UI 呈现逻辑。 处理用户事件。 可以嵌套和重用。...可以作为 Razor 库或 NuGet 包共享和分发。 项目截图

1.6K10

Blazor入门:ASP.NET Core Razor 组件

指定基 指定属性 导入组件 原始 HTML 官方文档原文位置: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components?...组件 每个 .razor 文件,在编译后会生成一个,称为组件。 生成的的名称与文件名匹配。 因此,每个 .razor 文件,必须以大写字母开头,按照名命名规范定义文件名称。...目前,有两个地方需要使用 [Parameter] 特性,一个是前一小节的路由参数绑定,另一个是嵌入组件时使用。...在 test 页面输入 Key 和 Value,点击按钮,即可通知所有正在打开 Index.razor 的页面。...使用 @ 键控制是否保留元素和组件 在使用表格或了表等元素时,如果出现插入或删除、更新等情况,整个表格或列表,就会被重新渲染。这样会带来比较大的性能消耗。

2.7K20

可用于智能客服的完全开源免费商用的知识库项目

## Blazor 是什么? Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: - 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。...MASA Stack 除了为开发者提供众多中台开源项目,其最基础的组成部分之一 MASA Blazor 也希望可以打造成最实用的组件库。 ## Masa Blazor和Token有什么关系?...点击下一步数据处理: 在这里我们提供了直接拆分和问答拆分(暂未实现) 我们修改了自定义处理的参数,这个数值会影响文档拆分,如果拆分得当回复的效果会更好,如果拆分过大会导致token消耗太大可能导致欠费...上传完成以后列表会显示上传的数据,点击查看可以查看到拆分的文档的所有数据 点击查看详情能看到所有的信息 点击应用->创建应用: 打开应用然后店家选择知识库,将刚刚添加的知识库于当前应用绑定,然后点击保存修改...,,这样对话的时候就会搜索绑定的知识库了,在这里我们也可以修改一些应用参数,比如开场白或角色的prompt定义: 然后我们点击聊天,然后输入我们的知识库的内容 问:Masa Blazor和Token有什么关系

15610

ASP.NET Core Blazor 初探之 Blazor Server

因为前面Blazor Webassembly已经讲过了,相同的东西,比如数据绑定,属性绑定,事件绑定等内容就不多说了,请参见ASP.NET Core Blazor 初探之 Blazor WebAssembly...从返回的html代码上来看绑定的数据已经有值了,这可以清楚的证明Blazor Server技术使用的是服务端渲染技术。 ? ? _blazor?...我们在文本框里填写的数据貌似没有传递后台,这就不符合逻辑了啊。想了下有可能是文本框编辑的时候数据就提交回去了,让我们验证下: ?...厉害了我的软,以前vue,angularjs实现的是前端html跟js对象的绑定技术,而Blazor Server这样就实现了前后端的绑定技术,666啊。...Blazor Server除了第一次请求使用Http外,其他数据交互全部通过websocket技术在服务端完成,包括页面渲染、事件处理、数据绑定等,这样给Blazor Server项目的网络、内存、扩展等提出了很大的要求

2K20

Blazor带我重玩前端(六)

本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇。 双向绑定 概述 ?...双向绑定绑定的是Blazor组件和dom元素,就像是宏指令一样。...也就是说,当该组件首次运行时,输入框的值来自于CurrentValue属性,当用户输入新的值后,CurrentValue也将会被设置成新的值。...16-18行是双向绑定的内容 级联值和参数 概述 级联值和参数是一种将值从组件传递其所有子组件的方法,在Blazor中,采用CascadingValue来实现,子组件通过声明同一型的属性(用[CascadingParameter...性能问题 默认情况下,Blazor会持续监控级联值的变化,并将其传递所有子组件中,这将会占用一定的资源,并可能导致性能问题。

1.2K30

Blazor学习之旅(5)数据绑定

本篇,我们来了解下在Blazor中数据是如何绑定的。 关于数据绑定 如果希望 HTML 元素显示值,可以编写代码来更改显示内容。如果值发生更改,则需要编写额外的代码以更新显示内容。...,例如:将其绑定input标签时,它会绑定value属性。...而将其绑定checkbox中,它则自动绑定checked属性。 将元素绑定特定事件 默认情况下,@bind指令对于input控件通常会绑定DOM onchange事件。...通常来说,这种在父组件和子组件之间的数据绑定 也叫做 双向绑定。 同时,我们也注意Blazor中事件回调(委托)的统一型为:EventCallback。...最终效果: 小结 本篇,我们了解了数据如何在Blazor中进行数据的绑定。 下一篇,我们学习一下在Blazor中数据绑定的各种花样。

39420

创建 SpreadJS Blazor 组件

绿色 = 正 红色 = 负 创建 SpreadJS Blazor 组件 在将 SpreadJS 放入 Blazor 应用程序之前,我们必须首先创建一个 Blazor 组件来包含 SpreadJS。...想要创建组件,首先要创建一个 Razor 库: 为简单起见,您可以将其命名为“SpreadJS_Blazor_Lib”: 创建项目后,我们需要将 SpreadJS 文件复制“wwwroot”文件夹...连接到数据源 在实际编写代码连接到数据源之前,我们需要添加一些代码来处理用户从 Spread 的下拉列表中选择股票的情况。只有这样我们才能连接并获取数据。...为此,我们可以绑定 EditEnded 事件,通过数组查找股票代码,然后连接到该股票数据: // Bind an event for changing the stock in the drop down...当数据被正确获取之后,如何在SpreadJS中进行显示,可以在之后的“如何将实时数据显示在前端电子表格中(二)”中一探究竟。

1.9K20

图解 .NET 8 中的 Blazor 新特性 - .NET Conf 2023实况直击

此前是通过事件来实现模型绑定,而SSR则是通过HTTP请求来做模型绑定。表单验证也变为服务端的,返回的验证信息就是通过上文的Streaming SSR实现。...把之前的两个Blazor模板和这次的全部功能集成一个模板中,通过配置选项来根据需求选择需要的渲染模式、示例内容等等。...而且是使用SSR实现的,对学习SSR的朋友非常有帮助。 另外最新版的VS还支持了Blazor页面脚手架,终于可以跟MVC/Razor Pages一样通过VS点点鼠标就创建一个CRUD页面了!...新增页面 列表页面用了QuickGrid。有我的代码贡献!这下我再也不用担心大家不会写Blazor了!...诚邀赞助 AntDesign Blazor 项目和 Blazor 中文社区预计将会在 12月16日北京参加 .NET Conf China 大会。

1.1K40
领券