通过Blazor使用C#开发SPA单页面应用程序(2)

今天我们尝试创建一个默认的Blazor应用。

.Net Core 3.0需要Visual Studio 2019 的支持。

安装.Net Core 3.0 预览版 SDK版本,注意预览版对应的VS版本,我这里安装的是v3.0.0-preview6。

640?wx_fmt=png

一定要开启预览选项才能使用Net Core Preview,在工具> 选项>预览功能 中开启。

640?wx_fmt=png

新建Asp.net Core Web 应用程序,项目名称:BlazorDemo

640?wx_fmt=png

目前Blazor只能创建基于服务器端渲染的项目。

640?wx_fmt=png

项目创建后延续以往Asp.net风格,模板会创建项目框架及样例页面,运行后会得到这样一个SPA页面。我们通过开发者工具观察,点击Click me按钮后,右侧的元素中只是数值Dom节点有变化,其他没有,达到局部更新的效果。

640?wx_fmt=png

我们在看看项目解决方案的结构,好熟悉啊,基本完全就是Asp.net mvc 的结构嘛。

640?wx_fmt=png

这个 _Host.cshtml 页面应该就是Blazor的主页面,类似vue 的index.html 页。

640?wx_fmt=png

我们再看看那个Counter 的计数器组件是如何实现的。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

@code {

int currentCount = 0;

void IncrementCount()

{

currentCount++;

}

}

@page "/counter" 定义路由

<p>Current count: @currentCount</p> 显示计数器变量值

<button class="btn btn-primary" @onclick="@IncrementCount">Click me</button>

指定样式,绑定onclick事件,调用IncrementCount方法

void IncrementCount()

{

   currentCount++; 计数器+1

}

上面的代码虽然简单,但充分说明了Blazor组件开发的模式,有C#和Asp.net mvc 开发经验的完全可以驾驭。

那么Blazor组件是如何做到局部更新的呢,原来上面的代码经过编译后会生成以下内容,RenderTreeBuilder 为每一个元素、属性、事件指定一个编号。更多的内容还有待我以后挖掘,好了今天就到这里了,休息休息一下。

640?wx_fmt=png

原文链接:https://www.cnblogs.com/liuxtj/p/11347219.html


.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com 

640?wx_fmt=jpeg

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

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

相关文章

通过Blazor使用C#开发SPA单页面应用程序(1)

2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望&#xff0c;一些.net大咖也在积极的为推动.NET Core而不懈的努力。在这次.NET Core 3.0中一项新的技术也首次出现在人们的视野&#xff0c;这就是Blazor。说起Bla…

基于 WPF 模块化架构下的本地化设计实践

背景描述最近接到一个需求&#xff0c;就是要求我们的 WPF 客户端具备本地化功能&#xff0c;实现中英文多语言界面。刚开始接到这个需求&#xff0c;其实我内心是拒绝的的&#xff0c;但是没办法&#xff0c;需求是永无止境的。所以只能想办法解决这个问题。首先有必要说一下我…

你会轻易打破规则吗?

这里是Z哥的个人公众号每周五11&#xff1a;45 按时送达当然了&#xff0c;也会时不时加个餐&#xff5e;我的第「86」篇原创敬上俗话说的好&#xff0c;不以规矩&#xff0c;不成方圆。但是有些时候&#xff0c;可能破坏规则反而是一个更有效的方式&#xff0c;这个时候到底该…

架构杂谈《十》

常用开发模式一、瀑布式开发瀑布式开发是在1970年提出的软件开发模型&#xff0c;是一种较老的计算机软件开发模式&#xff0c;也是典型的预见性的开发模式&#xff0c;在瀑布式开发中&#xff0c;开发严格遵循预先计划的需求分析、设计、编码、集成、测试、维护的步骤进行&…

如何删除GIT仓库中的敏感信息

1. 前言正常Git仓库中应该尽量不包含数据库连接/AWS帐号/巨大二进制文件&#xff0c;否则一旦泄漏到Github&#xff0c;这些非常敏感信息会影响客户的信息安全已经公司的信誉。公司可能其它还有相关规定&#xff0c;如禁止私人邮件加入GIT仓库。如果违反这些规定&#xff0c;可…

ASP.NET Core on K8S深入学习(4)你必须知道的Service

本篇已加入《.NET Core on K8S学习实践系列文章索引》&#xff0c;可以点击查看更多容器化技术相关系列文章。前面几篇文章我们都是使用的ClusterIP供集群内部访问&#xff0c;每个Pod都有一个自己的IP地址&#xff0c;那么问题来了&#xff1a;当控制器使用新的Pod替代发生故障…

博客园翻车启示录

开发者的日常作为一名996的开发者&#xff0c;我几乎每天只有两件事&#xff0c;制造bug和解决bug&#xff0c;这两件事&#xff0c;既替我解决了温饱问题、也替产品经理、测试工程师等一票人解决了吃穿问题。嗯&#xff0c;有人为我这种程序员评了一个等级&#xff0c;我大概是…

asp.net core 从单机到集群

asp.net core 从单机到集群Intro这篇文章主要以我的活动室预约的项目作为示例&#xff0c;看一下一个 asp.net core 应用从单机应用到集群部署需要做什么。示例项目活动室预约提供了两个版本&#xff0c;集群版和 单机版单机版方便部署&#xff0c;不依赖其他环境&#xff0c;数…

通过Blazor使用C#开发SPA单页面应用程序(3)

通过Blazor使用C#开发SPA单页面应用程序(1)通过Blazor使用C#开发SPA单页面应用程序(2)今天我们来看看Blazor开发的一些基本知识。Blazor中组件的基本结构可以分为3个部分&#xff0c;如下所示&#xff1a;//Counter.razor//Directives section 指令部分page "/counter&qu…

ASP.NET CORE 2.* 利用集成测试框架覆盖HttpClient相关代码

ASP.NET CORE 集成测试官方介绍我的asp.net core 项目里面大部分功能都是去调用别人的API &#xff0c;大量使用HttpClient&#xff0c;公司单元测试覆盖率要求95%以上&#xff0c;很难做到不mock HttpClient 达到这个指数。以下方法是我自己总结的在单元测试里 mock httpClien…

Let's Encrypt网站推出中文版

如今很多网站都强制使用 HTTPS 加密协议访问&#xff0c;安全性有了很大的提高&#xff0c;最起码在数据传输的初始阶段数据包不会被劫持&#xff0c;保证了客户端与服务器端的通讯安全性。说到 HTTPS 加密协议&#xff0c;就不得不提 Let’s Encrypt。Let’s Encrypt 是一家不…

使用WebDeploy部署远程IIS网站

目录 使用WebDeploy部署远程IIS网站后台服务部署服务器配置本地WebDeploy发布文件配置前端页面部署WebDeploy服务端配置WebDeploy发布文件配置使用WebDeploy部署远程网站后台服务部署服务器配置打开IIS管理器(开始->控制面板->管理工具->IIS管理器)添加网站(右键网站…

CF436F Banners(分块/凸包/单调队列)

CF436F Banners 首先有n个物品分别有ai和bi&#xff0c;然后定义价值为 c∗wp∗(ai大于p且bi小于c的用户个数)c*wp*(ai大于p且bi小于c的用户个数)c∗wp∗(ai大于p且bi小于c的用户个数) 然后我们需要求解对于每一个c的最大价值和对应的p 首先我们先枚举c&#xff0c;然后每次加…

译 | 改进 Visual Studio 及 Windows 上 .NET Core 的安装体验

点击上方蓝字关注“汪宇杰博客”原文&#xff1a;Lee Coward翻译&#xff1a;Edi Wang导语Visual Studio 2019 16.3 和 .NET Core 3.0 Preview 7 改进了 Windows 上 .NET Core 的安装体验。目标是减少计算机上可能存在的 .NET Core 版本的数量。这些改进基于客户反馈和我们自己…

SonarQube系列三、Jenkins集成SonarQube(dotnetcore篇)

来源&#xff1a;https://www.cnblogs.com/7tiny/p/11348785.html【前言】本系列主要讲述sonarqube的安装部署以及如何集成jenkins自动化分析.netcore项目。目录如下&#xff1a;SonarQube系列一、Linux安装与部署SonarQube系列二、分析dotnet core/C#代码SonarQube系列三、Jen…

CF198D Cube Snake(三维空间/增量构造)

CF198D Cube Snake n<50 显然是一个构造题&#xff0c;然后很容易想到增量构造&#xff0c;可以考虑每次保证一层值域连续&#xff0c;然后再增加一个值域连续的层&#xff0c;就会产生两个值域连续的正方体&#xff0c;但是只移动头是不够的&#xff0c;所以我们还需要移…

发布ABP v0.19包含Angular UI选项

ABP v0.19已发布,包含解决的~90个问题和600次提交.新功能Angular UI终于,ABP有了一个SPA UI选项,使用最新的Angular框架.Angular的集成不是简单地创建了一个启动模板.创建了一个基础架构来处理ABP的模块化,主题和其他一些功能.此基础结构已部署为NPM包.为帐户,身份和租户管理等…

P4151 [WC2011]最大XOR和路径(线性基应用)

P4151 [WC2011]最大XOR和路径 思路 如果单纯的只是树形图&#xff0c;那么答案显然易见只有一种&#xff0c;也就是从头到尾的路径从头到尾的异或值&#xff0c;但是这里不同的就是有可能在道路上有许多的环。 题目有一个重点提示的一句话 理解这句话之后那么我们可以显然…

Docker(一)-CentOS7中安装Docker视频教程

一、前言Docker的使用越来越多&#xff0c;安装也相对简单。本文使用视频的方式展示在CentOS7系统中安装Docker&#xff0c;本文更适合于准备入门学习Docker的童靴&#xff0c;同时也欢迎各路大神给我们指点提建议。二、环境CentOS7三、安装Docker确认Linux内核版本# uname -a卸…

CF773E Blog Post Rating(推导min的通项/线段树)

CF773E Blog Post Rating 现在有一个值F&#xff0c;每次如果序列加入一个数后重新排列&#xff0c;每次如果F小于期望值&#xff0c;就会1&#xff0c;如果等于就不变&#xff0c;如果大于就-1&#xff0c;求解每一次加入后F的最大值。 这道题的确是非常的巧妙&#xff0c;尤…