Blazor带我重玩前端(五)

概述

本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇。

我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的C#代码。在此,先补充一下该页面的原始代码:

@page "/"
@layout MyLayout
<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" />

Index.razor页面在项目编译后会生成Index.razor.g.cs文件,其位置如图所示,在obj文件夹下面:具体的源码如下:

[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MyLayout))]
[Microsoft.AspNetCore.Components.RouteAttribute("/")]
public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
{#pragma warning disable 1998protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder){__builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\nWelcome to your new app.\r\n\r\n");__builder.OpenComponent<BlazorApp.Client.Shared.SurveyPrompt>(1);__builder.AddAttribute(2, "Title", "How is Blazor working for you?");__builder.CloseComponent();}#pragma warning restore 1998
}

可以看到,以上代码并不难理解,同时它还有两个特性,一个是布局的标识,一个是路由的标识。紧接着就是该类重写了BuildRenderTree方法,这个以后会说。需要提醒的是,大家在写Blazor项目遇到问题时,可以多查看razor页面所生成的C#代码。

创建简单组件

需要注意的是,在Blazor项目中,包括razor页面,布局以及组件都隐式或显示的继承自ComponentBase的。在Blazor.Client项目的Shared文件夹中,我们创建一个Components文件夹用于存放我们自定义的组件。(1)创建页面,并暂且先使用下面的默认内容。(2)然后在_Imports.razor文件中添加@using BlazorApp.Client.Shared.Components,以使得该组件可以全局使用,从这个引用的命名空间来看,我们新建的组件的命名空间默认就是文件所在的位置。(3)在Index.razor页面使用(4)运行后的结果如图所示:

单项绑定

如果读者接触了比较多的前端框架,可能会对理解单项绑定有很大的帮助,这实际上一种插值或者说是动态数据的占位(变量)。大部分情况下,我们都希望我们的组件是可以输出动态内容,那么我们应该如何实现呢?这个时候我们就需要在页面上写一写C#代码了。(1)在MyComponent组件中添加参数,并标记[Parameter]特性(2)在Index页面上,添加按钮和事件功能,可以参考Counter页面的按钮。这个页面的功能我们暂时只关注如何传值即可,也就是在调用MyComponent组件的时候,调用其属性Counter并赋值。(3)运行效果如下所示

组件事件

添加组件自定义事件,其实就是声明一个EventCallback类型的组件参数,如下代码所示:

[Parameter]
public EventCallback<int> EventSample { get; set; }

(1)自定义组件修改 增加一个计数方法,可以参考Counter中代码。在IncrementCount方法中,采用await ClickCountCallback.InvokeAsync(currentCount*2)方式传值给Index.Razor页面,页面源码:

  @*<h3>My Component</h3>*@这里是自定义组件的区域,我点击了几次 <strong style="color: red">@currentCount</strong>
<br>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount { get; set; }[Parameter]public EventCallback<int> ClickCountCallback { get; set; }private async Task IncrementCount(){currentCount++;await ClickCountCallback.InvokeAsync(currentCount*2);}
}

(2)Index.razor页面

  @page "/"
@layout MyLayout
<h1> </h1>@*Welcome to your new app.*@@*<SurveyPrompt Title="How is Blazor working for you?" />*@<h2>Index页面的CurrentCount=<strong style="color: red">@currentCount</strong></h2><br>
<MyComponent ClickCountCallback="IncrementCount1" />
<br />@code {private int currentCount;private void IncrementCount1(int value){currentCount = value;}
}

使用currentCount接收自定义组件中传来的值。运行效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/308324.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

请问在linux应该如何清除客户端本地dns缓存呢???,linux下清空dns缓存的方法-Ubuntu清空本地dns缓存...

linux Ubuntu下清空dns缓存的方法linux 设置Ubuntu DNS缓存&#xff0c;加速打开网页的速度大多数的 DNS 客户端会把域名解析的结果缓存到本地&#xff0c;这样可以提升对于同一个地址的访问速度。当您打开一个单页面的时候&#xff0c;通常会有多次对同一个域名的访问请求。基…

关于TensorFlow开发者证书,你想要的资源都在这里!

今天是TensorFlow开发者证书的一个里程碑&#xff0c;全球已经有500位开发者通过考试并顺利拿到了 TensorFlow Certificate。我也有幸在各位大佬的指点下&#xff0c;顺利通过考试&#xff0c;成为国内第7位拿到 TensorFlow Certificate 的开发者。按照Google官网的数据&#…

java中nextLine(),读取换行符的解决

一&#xff1a;问题描述 当输入完第一值后&#xff0c;就未能输入后来的字符串 package com.wyj.two;import java.util.Scanner;public class text {public static void main(String[] args) {Scanner in new Scanner(System.in);int temp in.nextInt();System.out.println…

linux 从不兼容的指针类型,警告:从不兼容的指针类型初始化

大家好&#xff0c;我已经触摸C了&#xff0c;所以我真的生锈了。我写了一个小程序来创建一个使用两个动态数组的矩阵。但是&#xff0c;我收到这个警告&#xff0c;我不明白为什么&#xff1f;我想我不太清楚指向指针的指针。有人能帮我指出我的问题在哪里吗&#xff1f;谢谢。…

Kubernetes 在知名互联网公司的(dotnet)落地实践

容器化背景本来生活网&#xff08;benlai.com&#xff09;是一家生鲜电商平台&#xff0c;公司很早就停止了烧钱模式&#xff0c;开始追求盈利。既然要把利润最大化&#xff0c;那就要开源节流&#xff0c;作为技术可以在省钱的方面想想办法。我们的生产环境是由 IDC 机房的 10…

Java银行开户,取钱,存钱,查询余额,退出。。。。。

一&#xff1a;上码 package com.wyj.two;import java.util.Scanner;/*** 封装的练习*/ public class Demo8 {public static void main(String[] args) {Scanner in new Scanner(System.in);Account account new Account();System.out.println("欢迎来到杰哥银行"…

linux开发亿连手机互联,亿连手机互联车载版下载-亿连手机互联车机版v6.6.1 安卓版-腾牛安卓网...

亿连手机互联车机版&#xff0c;交互一体&#xff0c;手机-导航仪应用深度融合&#xff1b;升级服务&#xff0c;依托手机OTA升级导航仪应用&#xff1b;流畅连接&#xff0c;双通道互联技术连接更流畅&#xff1b;全新界面&#xff0c;配合前装和后装专业市场&#xff1b;为您…

7-3 树的同构 (25 分)(思路加详解)来呀baby!!!!!!!!

一&#xff1a;题目 7-3 树的同构 (25 分) 给定两棵树T1和T2。如果T1可以通过若干次左右孩子互换就变成T2&#xff0c;则我们称两棵树是“同构”的。例如图1给出的两棵树就是同构的&#xff0c;因为我们把其中一棵树的结点A、B、G的左右孩子互换后&#xff0c;就得到另外一棵树…

Dapr微服务应用开发系列0:概述

题记&#xff1a;Dapr是什么&#xff0c;Dapr包含什么&#xff0c;为什么要用Dapr。Dapr是什么Dapr&#xff08;Distributed Application Runtime&#xff09;&#xff0c;是微软Azure内部创新孵化团队的一个开源项目&#xff0c;皆在解决微服务应用开发过程的一些共性问题。以…

c语言 大数相加,c/c++开发分享C语言计算大数相加的方法

c/c开发分享问题描述输入两个整数a和b&#xff0c;输出这两个整数的和。a和b都不超过100位。算法描述由于a和b都比较大&#xff0c;所以不能直接使用语言中的标准输入格式输入包括两行&#xff0c;第一行为一个非负整数a&#xff0c;第二行为一个非负整数b。两个整数都不超过10…

你以为.NET Core仅仅是开源跨平台?试试Docker,刷新你的认知!

2016 年微软发布了 .NET Core 1.0&#xff0c;可谓是平地起惊雷&#xff0c;因为微软终于开源和跨平台了。但是一直到19年12月份发布了.NET Core3.1&#xff0c;开源社区的威力才展现出来&#xff0c;3个月增加了100w开发者&#xff0c;才真正吸引大厂的关注。但你以为仅仅是因…

7-2 一元多项式的乘法与加法运算 (20 分)(思路加详解+map做法)map真香啊 各个测试点的用例子 来吧宝贝!

一&#xff1a;题目 设计函数分别求两个一元多项式的乘积与和。 输入格式: 输入分2行&#xff0c;每行分别先给出多项式非零项的个数&#xff0c;再以指数递降方式输入一个多项式非零项系数和指数&#xff08;绝对值均为不超过1000的整数&#xff09;。数字间以空格分隔。 输…

c语言中注释部分二侧分界符为,C语言常见复习题(选择填空)及参考答案

C语言常见复习题及参考答案一、选择题1.下述标识符中&#xff0c;()是合法的用户标识符。A.A#CB.getchC.voidD.ab*2.在C语言中&#xff0c;字符型数据在内存中是以()形式存放的。A.原码B.BCD码C.反码D.ASCII码3.以下选项中不合法的用户标识符是()。A.abc.cB.fileC.MainD.PRONTF…

c语言的程序灵魂是什么,C语言 第二章 程序的灵魂--算法

《C语言 第二章 程序的灵魂--算法》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《C语言 第二章 程序的灵魂--算法(39页珍藏版)》请在人人文库网上搜索。1、第二章 程序的灵魂-算法,什么是程序? 计算机是机器-在求解某一问题时-需要有相应程序-程序是用计算机能够识…

Azure认知服务之表单识别器

认知服务Azure 认知服务的目标是帮助开发人员创建可以看、听、说、理解甚至开始推理的应用程序。Azure 认知服务中的服务目录可分为五大主要支柱类别&#xff1a;视觉、语音、语言、Web 搜索和决策。开发人员使用 Azure 认知服务能够轻松地将认知功能添加到其应用程序中。Azure…

c语言蓝桥杯矩阵乘法,蓝桥杯 基础练习 矩阵乘法

友情提示&#xff1a;此篇文章大约需要阅读 2分钟37秒&#xff0c;不足之处请多指教&#xff0c;感谢您的阅读。问题描述给定一个N阶矩阵A&#xff0c;输出A的M次幂(M是非负整数)例如&#xff1a;A 1 23 4A的2次幂7 1015 22输入格式第一行是一个正整数N、M(1<N<30, 0<…

配置文件中的数据库连接串加密了,你以为我就挖不出来吗?

一&#xff1a;背景1. 讲故事前几天在调试物联柜终端上的一个bug时发现 app.config 中的数据库连接串是加密的&#xff0c;因为调试中要切换数据库&#xff0c;我需要将密文放到专门的小工具上解密&#xff0c;改完连接串上的数据库名&#xff0c;还得再加密贴到 app.config 中…

c语言逻辑运算符编程,C语言之逻辑运算符详解

一 逻辑运算符&#xff1a;&&&#xff1a;逻辑与&#xff0c;读作并且表达式左右两边都为真&#xff0c;那么结果才为真口诀&#xff1a;一假则假||&#xff1a;逻辑或&#xff0c;读作或者表达式左右两边&#xff0c;有一个为真&#xff0c;那么结果就为真口诀&#x…

c语言函数指针数组用法,C语言 函数指针 函数指针数组的用法

前述&#xff1a;C语言的奥秘&#xff0c;博大精深&#xff0c;今天来回忆的分析函数指针&#xff0c;函数指针数组的用法。具体请见下面一个注册程序的实现。1 #include 2 #include 356 typedef void (*poniter_fun)(int); //定义一个函数指针78 typedef struct poniter_desc …

Dotnet Core Public API的安全实践

公开API的安全&#xff0c;其实更重要。一、API的安全作为一个Dotnet Core的老司机&#xff0c;写API时&#xff0c;能兼顾到API的安全&#xff0c;这是一种优雅。通常&#xff0c;我们会用认证来保证API的安全&#xff0c;无敌的Authorize能解决我们很多的问题。但是&#xff…