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

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

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

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

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

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

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

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

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

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

我们再看看那个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 为每一个元素、属性、事件指定一个编号。更多的内容还有待我以后挖掘，好了今天就到这里了，休息休息一下。

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

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

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

通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23--25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
从零开始学习小程序1-1开发一个单页面小程序
1,在本地电脑中创建一个文件夹"test",2,打开微信开发者工具 3,新建项目文件test,按以下步骤填写完整4,初始页面是这样的5,点开app.json页面,删掉原始代码,配置 ...
单页面应用程序的优缺点
一,优点 SPA 单页面应用程序最显著的 3 个优点如下: ① 良好的交互体验单页应用的内容的改变不需要重新加载整个页面,只有一个HTML页面因为没有页面之间的跳转,不会出现"白屏现象& ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
spa单页面应用html缓存问题
一.背景浏览器的http请求都有一个缓存机制,简单点说就是同路径同名文件会默认被缓存下来,提升下次访问时的速度,默认只有刷新页面或长时间未访问时才会刷新缓存. 而spa单页面应用是通过路由切换来访问 ...
当spa单页面应用遇上SEO，蛋痛的经历
spa单页面应用优点当然毋庸置疑:效果酷炫,我在视觉和产品面前无从反驳:性能高速度快,全JS嘛当然快,我在运维和产品面前无言以对:运算分散,异步加载,又省硬件又省流量,我在开发和产品面前彻底投降:JS ...
[vue] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
[vue] 说说你对SPA单页面的理解，它的优缺点分别是什么？
[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...

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

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

最新文章

热门文章