Study Blazor .NET(三)组件
翻译自:Study Blazor .NET,转载请注明。
关于组件
blazor中组件的基础结构可以分为以下3部分,
//Counter.razor
//Directives section
@page "/counter"
//Razor HTML section
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
//Function sections
@functions {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
指示部分
组件中的指示部分用来配置当前组件的路由,导入外部类库或者依赖注入,
- 路由-
@page
- 依赖注入-
@inject
- 导入类库 -
@using
Razor HTML 部分
Razor HTML语法是C#和HTML的组合,这部分最终会渲染到浏览器中。
功能部分
组件功能部分包含用户操作函数(事件方法),局部变量,和父子组件之间传递的属性。
特性和参数
让我们了解一般SPA的基本术语,
<button id="btnClickMe" class="btn btn-primary"
onclick="@IncrementCount">Click me</button>
这里button元素的中的id,class和onclick叫做HTML特性。
组件的定义方式和HTML元素类似,
//ParentComponent.razor
//Parent Component
@page "/ParentComponent"
<ChildComponent Title="Title from Parent">
</ChildComponent>
在这里,子组件放置在父组件中,标题是组件的特性。
//Child Component
<div>
<p>Title from Parent Component : @Title</p>
</div>
@functions {
[Parameter]
private string Title { get; set; }
}
在这里,子组件的Title特性与子组件功能块部分中用[Parameter] 修饰的属性相匹配。
Study Blazor .NET(三)组件的更多相关文章
- [Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发
通过一个小组件,熟悉 Blazor 服务端组件开发.github 一.环境搭建 vs2019 16.4, asp.net core 3.1 新建 Blazor 应用,选择 asp.net core 3 ...
- Blazor 模板化组件开发指南
翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...
- Study Blazor .NET(四)数据绑定
翻译自:Study Blazor .NET,转载请注明. 数据绑定 单向绑定 在blazor中单向绑定简单而直接,无需UI刷新或渲染.下面示例展示了单向数据绑定: //Counter.razor @p ...
- Study Blazor .NET(一)简介
翻译自:Study Blazor .NET,转载请注明. 介绍 Blazor是一个全新的 Web UI 框架,它使用c# .Razor 和 HTML以及 WebAssembly W3C标准.它提供了用 ...
- .Net界面开发必备!DevExpress Blazor UI全新组件助力界面开发
行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,DevExpress UI for Blazor/ Razor组件附带7个用户界面组件(包括Data Grid和Pivot G ...
- K8S(11)配置中心实战-单环境交付apollo三组件
k8s配置中心实战-交付apollo三组件 目录 k8s配置中心实战-交付apollo三组件 1 apollo简单说明 1.1 apollo最简架构图: 1.2 apollo组件部署关系 2 为app ...
- K8S(12)配置中心实战-多环境交付apollo三组件
k8s配置中心实战-多环境交付apollo三组件 目录 k8s配置中心实战-多环境交付apollo三组件 1.环境准备工作 1.1 zk环境拆分 1.2 namespace分环境 1.3 数据库拆分 ...
- Study Blazor .NET(二)安装
翻译自:Study Blazor .NET,转载请注明. 安装 请根据下面步骤安装开始使用Blazor: 1.针对不同的操作系统,安装最新版.Net Core框架 [这里] 2.用.Net Core ...
- [AspNetCore 3.0 ] Blazor 服务端组件 Render, RenderFragment ,RenderTreeBuilder, CascadingValue/CascadingParameter 等等
一.组件 支撑Blazor的是微软的两大成熟技术,Razor模板和SignalR,两者的交汇点就是组件.通常,我们从ComponentBase派生的类型,或者创建的.razor 文件,就可以称作组件. ...
随机推荐
- Serverless X OpenKruise 部署效率优化之道
作者 | 许成铭(竞霄) Serverless 作为云计算的最佳实践.云原生发展的方向和未来演进趋势,其核心价值在于快速交付.智能弹性.更低成本.SAE(Serverless 应用引擎)作为首款面向应 ...
- Tomcat 源码环境搭建
Tomcat 源码搭建 下载源码 下载地址 :https://tomcat.apache.org/download-80.cgi#8.5.35 下载之后解压缩 导入Idea 添加pom.xml文件 & ...
- FastAPI 学习之路(二十)接口文档配置相关
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Java内存分析--栈--堆
Java内存分析--栈--堆 JVM的内存分析: 1.栈内存 1.连续的存储空间,遵循后进先出的原则. 2.每个线程包含一个栈区,栈区只保存基础数据类型的对象和自定义对象的引用. 3.每个栈中的数据都 ...
- VS Code Remote SSH设置
本文翻译自:5 Steps: Setup VS Code for Remote Development via SSH from Windows to Linux system 5个步骤:设置VS代码 ...
- 周末愉快--css画大熊猫
周末找了点轻松的话题,css画大熊猫. 先上效果图 欢迎竞猜大熊猫到底说了什么?? 再上源码 <!DOCTYPE html> <html lang="en"> ...
- Abp VNext分表分库,拒绝手动,我们要happy coding
Abp VNext 分表分库 ShardingCore ShardingCore 易用.简单.高性能.普适性,是一款扩展针对efcore生态下的分表分库的扩展解决方案,支持efcore2+的所有版本, ...
- Beta阶段性总结
1.题士开发总结 2.反思 2.1 Issue管理 从0522敲定各个功能的API后,团队成员及时沟通,积极开发,但由于开发过程没能有效体现在issue上(如未能及时在issue上形成记录,功能开发完 ...
- 计算机网络之应用层概述(C/S模型与p2p模型)
文章转自:https://blog.csdn.net/weixin_43914604/article/details/105582318 学习课程:<2019王道考研计算机网络> 学习目的 ...
- MyBatis源码分析(七):动态代理(Mybatis核心机制)
一.动态代理 动态代理是一种比较高级的代理模式,它的典型应用就是Spring AOP. 在传统的动态代理模式中,客户端通过ProxySubject调用RealSubject类的request( )方法 ...