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 K8s 集群中低成本运行 Spark 数据计算?
作者 | 柳密 阿里巴巴阿里云智能 ** 本文整理自<Serverless 技术公开课>,关注"Serverless"公众号,回复"入门",即可获取 ...
- 给力!斩获 GitHub 14000 Star,两周创办开源公司获数百万美元融资
文章来源|AI科技大本营 作者|伍杏玲 上世纪 90 年代初,21 岁大学生 Linus Torvalds 开源 Linux 操作系统,自此掀起全球开源浪潮.随后"中国 Linux 第一人& ...
- [AGC023D] Go Home 题解
题目传送门 Solution 首先排除掉特殊情况:若 \(S\) 在两侧,肯定会顺序/逆序直接走完,答案就是边界减去出发点. 考虑到若 \(P_1\geq P_n\),那么显然 \(1\) 不到家 \ ...
- c++中的数学函数
math.h 数学函数库,一些数学计算的公式的具体实现是放在math.h里,具体有:1 三角函数double sin (double);double cos (double);double tan ( ...
- Oracle job的用法
1.Broken()过程更新一个已提交的工作的状态,典型地是用来把一个已破工作标记为未破工作. 这个过程有三个参数:job .broken与next_date. PROCEDURE Broken (j ...
- 【UE4 C++】解析与构建 XML 数据,XmlParser 与 tinyxml
XmlParser 简单读取 XmlParser 为引擎自带模块 XML 文件 <?xml version="1.0" encoding="UTF-8"? ...
- ScatterLayout:分散布局在py中的引用
""" ScatterLayout:分散布局 """ from kivy.app import App from kivy.uix.scat ...
- DDD领域驱动设计-概述-Ⅰ
如果我看得更远,那是因为我站在巨人的肩膀上.(If I have seen further it is by standing on ye shoulder of Giants.) ...
- [no_code][Beta]项目展示博客
$( "#cnblogs_post_body" ).catalog() 团队项目链接 Beta阶段核心开发点: github 前端 github 后端 github OCR文档-含 ...
- the Agiles Scrum Meeting 12
会议时间:2020.4.20 21:00 1.每个人的工作 今天已完成的工作 个人结对项目增量开发组: 自动评测系统基本开发完成,实现个人项目自动评测功能 issues: 个人结对功能开发组:开发自动 ...