Blazor带我重玩前端(三)

VS自带的Blazor模板介绍

需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发Blazor项目。

使用VS创建Blazor WebAssembly项目

  • 搜索Blazor模板
Blazor带我重玩前端(三)

选择Blazor WebAssembly App模板

Blazor带我重玩前端(三)

项目实例

Blazor带我重玩前端(三)
  • 项目实例
  1. BlazorApp.Shared:提供最一般的支持,包括各个Model
  2. BlazorApp.Client:依赖BlazorApp.Shared,该项目侧重于Pages功能
  3. BlazorApp.Server:依赖BlazorApp.Shared、BlazorApp.Client,该项目侧重于提供接口功能

BlazorApp.Client

Blazor带我重玩前端(三)

从上图可知 该项目主要包括wwwroot、Pages、Shared三个文件夹,以及_Imports.razor、App.razor、Program.cs这三个单独的文件。

wwwroot

这个文件夹和我们ASP.NET Core MVC里的wwwroot基本一致,不过需要注意的是,这个文件夹里面有一个比较重要的文件index.html,它是我们Blazor项目的起点。这个文件里也引用了blazor.webassembly.js,可是我们在项目中没有看到。这没关系,因为它会由Microsoft.AspNetCore.Components.WebAssembly.Build提供,在运行编译的时候会自己出现的。

Blazor带我重玩前端(三)

Shared

这个文件夹里,有三个文件,分别是MainLayout.razor、NavMenu.razor、SurveyPrompt.razor。

  • MainLayout是Layout文件,它定义了该项目的基本布局
  • NavMenu是Component,它实现了菜单功能,并对外提供了独立而又单一的组件功能
  • SurveyPrompt也是Component,它实现了文件传入与连接跳转功能,对外也是提供了独立而又单一的菜单功能,同时这也是一个带参的组件 组件功能后续会详细介绍,但是需要提前说明的是,任何组件一经对外使用,都是独立而又单一的。接下来看一下运行后的效果图:
Blazor带我重玩前端(三)
  • 整体的风格、左侧的菜单、右侧的链接都像我们展示了布局和组件功能

Pages

里面定义了三个.razor文件,这也是模板提供给我的Blazor编写案例

  • Index.razor向我们展示了,组件的调用
  • FetchData.razor向我们展示了Call远程API和路由功能(@page “/fetchdata”)
  • Counter.razor向我们展示了事件调用

其他文件

  • _Imports.razor,这个文件和我们在ASP.NET Core项目中的_Imports.cshtml文件,没有什么区别
  • App.razor,这是根组件,里面定义了路由功能、默认布局、以及404展示
  • Program.cs 在职能上和我们ASP.NET Core项目的Program.cs文件也没有什么区别,但是里面定义了Http所要调用的EndPoint(builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });)

运行项目

设置BlazorApp.Server为启动项目

  1. 下载必须文件
Blazor带我重玩前端(三)

如图所示,我们需要加载6.15M的文件,同时可以看到Blazor的运行时信息mono_wasm_runtime_ready。

2.接下来,我们展开Object来看看其详细信息,会看到Object中有太多的依赖程序集。

Blazor带我重玩前端(三)

3.打开源代码tab页,会看到以下几个文件

Blazor带我重玩前端(三)
  • dotnet.wasm文件,打开后,会看到我们前文说过的WebAssembly文本格式的内容。
  • blazor.webassembly.js,用于下载.NET运行时,依赖程序集等,同时还会初始化运行应用的程序集
  • dotnet.3.2.0.js也是我们之前所说的用于调用C#方法的JS文件

添加页面

这个比较简单,如下操作即可

Blazor带我重玩前端(三)

接下来的内容我们将以此模板为例,进行展开讨论

原文出处:微信公众号【艾心0626 DotNet技术平台】

原文链接:https://mp.weixin.qq.com/s/PCS3ivBaJCaUtJlMqQq8Zg

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论