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

  • 时间:
  • 浏览:1
  • 来源:幸运快3_快3IOS下载_幸运快3IOS下载

通过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 为每有另俩个多多 元素、属性、事件指定有另俩个多多 编号。更多的内容还有待我事先挖掘,好了今天就到这里了,休息休息一下。

猜你喜欢

律政司刑期覆核 指判黃之鋒等人監禁合適

大公網8月9日訊(記者葉漢亮)香港眾志秘書長黃之鋒、主席羅冠聰及前學聯秘書長周永康,2014衝擊政總東翼前地「公民廣場」,去年三人分別被裁定參與非法集會和煽惑他人參與非法集會等

2020-01-25

32位设备终结 这些机型可以升级iOS 11

【IT168资讯】苹果7在今天三更三更半夜正式发布了iOS11系统,在UI风格、系统性能、功能上都进行了提升,本月就将开放预览版,届时有兴趣尝鲜的朋友还都前会 及时升级,但究

2020-01-25

一得之见/无欧洲赛后顾争英超有利/大公报记者 梁润森

英超经过三分一赛程后,李斯特城仍在联赛榜三甲中,令人期待亲戚亲戚大伙儿继2015年至2016年球季后再次爆冷夺冠。我随便说说李城如今肯定被争冠球队留意,但亲戚亲戚大伙儿删改这样

2020-01-25

今日上午10点iphone、华为手机 五折秒杀

   浙江联通网厅8年庆典,,感恩回馈,周年特惠,放价到底。8年风雨您沃携手同行。为感谢新老用户对联通的支持,特在今日上午10点,9月5日上午10:00甩掉10台手机限量秒杀。

2020-01-25

联想发布IdeaPad 330/530S笔记本:定位中低端

IT之家5月11日消息 联想在北美市场发布了IdeaPad品牌的几款中低端产品,包括3200/3200S和5200S,将于本月上市。IdeaPad3200首先是IdeaPad3

2020-01-25