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

  • 时间:
  • 浏览:0
  • 来源:大发快3_快3手机app下载_大发快3手机app下载

通过Blazor使用C#开发SPA单页面应用多多任务管理器 (1) - 简介及特点

通过Blazor使用C#开发SPA单页面应用多多任务管理器 (2) - 开发环境

通过Blazor使用C#开发SPA单页面应用多多任务管理器 (3) - 基础知识

 通过Blazor使用C#开发SPA单页面应用多多任务管理器 (4) - Ant Design Button

今天亲戚亲戚朋友儿尝试创建另一个多默认的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 为每另一个多元素、属性、事件指定另一个多编号。更多的内容还有待我事先挖掘,好了今天就到这里了,休息休息一下。

猜你喜欢

自由談\壘砌精神高地\厲彥林

敏銳的人總是關注經濟世界的顛覆性革命。它會帶來新的機遇和挑戰,也會形成對傳統的劇烈衝擊。一個新的產業世界的崛起,就原应舊的世界會凹陷。互聯網的崛起讓實體企業飽受陣痛,移動終端則

2020-01-24

H3C SecPath F1000

稳定运行对于企业防火墙来说,用户比较关心的要是设备的稳定性。而对于电子设备来说,它们的散热好坏将直接决定设备的稳定性以及使用寿命。▲F60 0-C-G侧面散热孔内置风扇配合两

2020-01-24

比特小队怎么联机 联机详细教程一览

【斗蟹游戏】有什么都 小伙伴们都问你比特小队缘何联机,没有 下面就由小编来为亲戚亲戚你们带来比特小队联机完整性教程一览吧,希望亲戚亲戚你们喜欢。比特小队缘何联机WIFI联机

2020-01-24

金山 毒霸 2008 杀毒套装(一年期)价格,电商最低报价,多少钱

关于亲戚亲戚亲们|广告服务|使用条款|联系亲戚亲戚亲们北京盛拓优讯信息技术有限公司.版权所有中华人民共和国增值电信业务经营许可证编号:京B2-20170206北京市公安局海淀分

2020-01-24

Roberto Sierra数据,Roberto Sierra新闻,Roberto Sierra视频,Roberto Sierra身价

RobertoSierraRobertoSierra俱乐部:吉纳斯提卡国籍:西班牙身高:CM位置:中场年龄:体重:KG号码:号生日:惯用脚:相关队员前锋进球国籍纳乔-罗德里格斯

2020-01-24