Blazor带我重玩前端(三)

2020-07-09 11:08:25 浏览数 (1)

VS自带的Blazor模板介绍

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

使用VS创建Blazor WebAssembly项目

  • 搜索Blazor模板
  • 选择Blazor WebAssembly App模板
  • 项目实例
  • 项目实例
  1. BlazorApp.Shared：提供最一般的支持，包括各个Model
  2. BlazorApp.Client：依赖BlazorApp.Shared，该项目侧重于Pages功能
  3. BlazorApp.Server：依赖BlazorApp.Shared、BlazorApp.Client，该项目侧重于提供接口功能

BlazorApp.Client

项目结构

从上图可知 该项目主要包括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提供，在运行编译的时候会自己出现的。

Shared

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

  • MainLayout是Layout文件，它定义了该项目的基本布局
  • NavMenu是Component，它实现了菜单功能，并对外提供了独立而又单一的组件功能
  • SurveyPrompt也是Component，它实现了文件传入与连接跳转功能，对外也是提供了独立而又单一的菜单功能，同时这也是一个带参的组件 组件功能后续会详细介绍，但是需要提前说明的是，任何组件一经对外使用，都是独立而又单一的。接下来看一下运行后的效果图：

整体的风格、左侧的菜单、右侧的链接都像我们展示了布局和组件功能

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. 下载必须文件

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

  1. 接下来，我们展开Object来看看其详细信息，会看到Object中有太多的依赖程序集。
  1. 打开源代码tab页，会看到以下几个文件
  • dotnet.wasm文件，打开后，会看到我们前文说过的WebAssembly文本格式的内容。
  • blazor.webassembly.js，用于下载.NET运行时，依赖程序集等，同时还会初始化运行应用的程序集
  • dotnet.3.2.0.js也是我们之前所说的用于调用C#方法的JS文件

添加页面

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

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

asp.net javascript

0 人点赞