经过Blazor使用C#开发SPA单页面应用程序(2) - 开发环境

 

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