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

  • 时间:
  • 浏览:1
  • 来源:大发快3_快3计划客户端_大发快3计划客户端

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