Razor 组件

现在已设置好开发环境,接下来将探索 Blazor 项目的结构,并了解如何添加新页。

什么是 Razor?
Razor 是一种标记语法,使用 HTML 和 C# 编写 Blazor Web 应用的 UI 组件。

Razor 基于 ASP.NET,专为创建 Web 应用而设计。

什么是 Razor 组件?
Razor 文件定义了构成部分应用 UI 的组件。 Blazor 中的组件类似于 ASP.NET Web Forms 中的用户控件。

如果浏览项目,则会看到大部分文件为 .razor 文件。

在编译时,每个 Razor 组件都内置于 .NET 类中。 类包括常见 UI 元素,如状态、呈现逻辑、生命周期方法和事件处理程序。

尝试使用计数器

在这里插入图片描述

对应的页面代码:
在这里插入图片描述

浏览器中针对 /counter 的请求(由顶部的 @page 指令指定)会导致 Counter 组件呈现其内容。

每次选择“单击我”按钮时会出现以下情况:

触发点击事件。
调用 IncrementCount 方法。
currentCount 递增。
呈现组件来显示更新后的计数。

向主页添加 Counter 组件
在 Visual Studio Code 项目资源管理器中展开文件夹。

选择“页面”以查看现有 Razor 页面。

选择 Index.razor 文件将其打开。

通过在 Index.razor 文件的末尾添加 元素,向页面添加 Counter 组件。

在这里插入图片描述
对应浏览器界面上:
在这里插入图片描述
尝试更改Counter 组件
在这里插入图片描述
然后再主页面添加组件时候,给参数赋值。
在这里插入图片描述

重新运行程序。
在这里插入图片描述
主页中的counter和 菜单栏中的counter 是互相独立的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

望天hous

你的鼓励是我最大动力~谢谢啦!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值