翻译自: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 K8s 集群中低成本运行 Spark 数据计算?

    作者 | 柳密 阿里巴巴阿里云智能 ** 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 ...

  2. 给力!斩获 GitHub 14000 Star,两周创办开源公司获数百万美元融资

    文章来源|AI科技大本营 作者|伍杏玲 上世纪 90 年代初,21 岁大学生 Linus Torvalds 开源 Linux 操作系统,自此掀起全球开源浪潮.随后"中国 Linux 第一人& ...

  3. [AGC023D] Go Home 题解

    题目传送门 Solution 首先排除掉特殊情况:若 \(S\) 在两侧,肯定会顺序/逆序直接走完,答案就是边界减去出发点. 考虑到若 \(P_1\geq P_n\),那么显然 \(1\) 不到家 \ ...

  4. c++中的数学函数

    math.h 数学函数库,一些数学计算的公式的具体实现是放在math.h里,具体有:1 三角函数double sin (double);double cos (double);double tan ( ...

  5. Oracle job的用法

    1.Broken()过程更新一个已提交的工作的状态,典型地是用来把一个已破工作标记为未破工作. 这个过程有三个参数:job .broken与next_date. PROCEDURE Broken (j ...

  6. 【UE4 C++】解析与构建 XML 数据,XmlParser 与 tinyxml

    XmlParser 简单读取 XmlParser 为引擎自带模块 XML 文件 <?xml version="1.0" encoding="UTF-8"? ...

  7. ScatterLayout:分散布局在py中的引用

    """ ScatterLayout:分散布局 """ from kivy.app import App from kivy.uix.scat ...

  8. DDD领域驱动设计-概述-Ⅰ

     如果我看得更远,那是因为我站在巨人的肩膀上.(If I have seen further it is by standing on ye shoulder of Giants.)         ...

  9. [no_code][Beta]项目展示博客

    $( "#cnblogs_post_body" ).catalog() 团队项目链接 Beta阶段核心开发点: github 前端 github 后端 github OCR文档-含 ...

  10. the Agiles Scrum Meeting 12

    会议时间:2020.4.20 21:00 1.每个人的工作 今天已完成的工作 个人结对项目增量开发组: 自动评测系统基本开发完成,实现个人项目自动评测功能 issues: 个人结对功能开发组:开发自动 ...