翻译自: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(三)组件的更多相关文章

  1. [Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发

    通过一个小组件,熟悉 Blazor 服务端组件开发.github 一.环境搭建 vs2019 16.4, asp.net core 3.1 新建 Blazor 应用,选择 asp.net core 3 ...

  2. Blazor 模板化组件开发指南

    翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...

  3. Study Blazor .NET(四)数据绑定

    翻译自:Study Blazor .NET,转载请注明. 数据绑定 单向绑定 在blazor中单向绑定简单而直接,无需UI刷新或渲染.下面示例展示了单向数据绑定: //Counter.razor @p ...

  4. Study Blazor .NET(一)简介

    翻译自:Study Blazor .NET,转载请注明. 介绍 Blazor是一个全新的 Web UI 框架,它使用c# .Razor 和 HTML以及 WebAssembly W3C标准.它提供了用 ...

  5. .Net界面开发必备!DevExpress Blazor UI全新组件助力界面开发

    行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,DevExpress UI for Blazor/ Razor组件附带7个用户界面组件(包括Data Grid和Pivot G ...

  6. K8S(11)配置中心实战-单环境交付apollo三组件

    k8s配置中心实战-交付apollo三组件 目录 k8s配置中心实战-交付apollo三组件 1 apollo简单说明 1.1 apollo最简架构图: 1.2 apollo组件部署关系 2 为app ...

  7. K8S(12)配置中心实战-多环境交付apollo三组件

    k8s配置中心实战-多环境交付apollo三组件 目录 k8s配置中心实战-多环境交付apollo三组件 1.环境准备工作 1.1 zk环境拆分 1.2 namespace分环境 1.3 数据库拆分 ...

  8. Study Blazor .NET(二)安装

    翻译自:Study Blazor .NET,转载请注明. 安装 请根据下面步骤安装开始使用Blazor: 1.针对不同的操作系统,安装最新版.Net Core框架 [这里] 2.用.Net Core ...

  9. [AspNetCore 3.0 ] Blazor 服务端组件 Render, RenderFragment ,RenderTreeBuilder, CascadingValue/CascadingParameter 等等

    一.组件 支撑Blazor的是微软的两大成熟技术,Razor模板和SignalR,两者的交汇点就是组件.通常,我们从ComponentBase派生的类型,或者创建的.razor 文件,就可以称作组件. ...

随机推荐

  1. Serverless X OpenKruise 部署效率优化之道

    作者 | 许成铭(竞霄) Serverless 作为云计算的最佳实践.云原生发展的方向和未来演进趋势,其核心价值在于快速交付.智能弹性.更低成本.SAE(Serverless 应用引擎)作为首款面向应 ...

  2. Tomcat 源码环境搭建

    Tomcat 源码搭建 下载源码 下载地址 :https://tomcat.apache.org/download-80.cgi#8.5.35 下载之后解压缩 导入Idea 添加pom.xml文件 & ...

  3. FastAPI 学习之路(二十)接口文档配置相关

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  4. Java内存分析--栈--堆

    Java内存分析--栈--堆 JVM的内存分析: 1.栈内存 1.连续的存储空间,遵循后进先出的原则. 2.每个线程包含一个栈区,栈区只保存基础数据类型的对象和自定义对象的引用. 3.每个栈中的数据都 ...

  5. VS Code Remote SSH设置

    本文翻译自:5 Steps: Setup VS Code for Remote Development via SSH from Windows to Linux system 5个步骤:设置VS代码 ...

  6. 周末愉快--css画大熊猫

    周末找了点轻松的话题,css画大熊猫. 先上效果图 欢迎竞猜大熊猫到底说了什么?? 再上源码 <!DOCTYPE html> <html lang="en"> ...

  7. Abp VNext分表分库,拒绝手动,我们要happy coding

    Abp VNext 分表分库 ShardingCore ShardingCore 易用.简单.高性能.普适性,是一款扩展针对efcore生态下的分表分库的扩展解决方案,支持efcore2+的所有版本, ...

  8. Beta阶段性总结

    1.题士开发总结 2.反思 2.1 Issue管理 从0522敲定各个功能的API后,团队成员及时沟通,积极开发,但由于开发过程没能有效体现在issue上(如未能及时在issue上形成记录,功能开发完 ...

  9. 计算机网络之应用层概述(C/S模型与p2p模型)

    文章转自:https://blog.csdn.net/weixin_43914604/article/details/105582318 学习课程:<2019王道考研计算机网络> 学习目的 ...

  10. MyBatis源码分析(七):动态代理(Mybatis核心机制)

    一.动态代理 动态代理是一种比较高级的代理模式,它的典型应用就是Spring AOP. 在传统的动态代理模式中,客户端通过ProxySubject调用RealSubject类的request( )方法 ...