Blazor

2023-04-10 22:45| 来源: 网络整理| 查看: 265

Blazor_WASM之3：项目结构

Blazor WebAssembly项目模板可选两种，Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty

如果使用Blazor WebAssemblyAPP模板，则应用将填充以下内容：一个 FetchData 组件的演示代码，该组件从静态资产 (weather.json) 加载数据，且用户与 Counter 组件交互。 Bootstrap前端工具包。如果使用 blazorwasm-empty 模板，则无需演示代码和 Bootstrap 即可创建应用。项目结构

Pages目录

包含构成 Blazor 应用的可路由组件/页面 (.razor)，每个页面的路由使用 @page指令指定，目录下的Index 组件 (Index.razor)为Home 页。

每个razor都会在后台编译成一个类，以自带的Counter.razor为例。

Counter.razor文件

@page "/counter" Counter Counter Current count: @currentCount Click me @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }

反编译后

[Route("/counter")] public class Counter : ComponentBase { private int currentCount = 0; protected override void BuildRenderTree(RenderTreeBuilder __builder) { __builder.OpenComponent(0); __builder.AddAttribute(1, "ChildContent", (RenderFragment)delegate(RenderTreeBuilder __builder2) { __builder2.AddContent(2, "Counter"); }); __builder.CloseComponent(); __builder.AddMarkupContent(3, "\r\n\r\n"); __builder.AddMarkupContent(4, "Counter\r\n\r\n"); __builder.OpenElement(5, "p"); __builder.AddAttribute(6, "role", "status"); __builder.AddContent(7, "Current count: "); __builder.AddContent(8, currentCount); __builder.CloseElement(); __builder.AddMarkupContent(9, "\r\n\r\n"); __builder.OpenElement(10, "button"); __builder.AddAttribute(11, "class", "btn btn-primary"); __builder.AddAttribute(12, "onclick", EventCallback.Factory.Create((object)this, (Action)IncrementCount)); __builder.AddContent(13, "Click me"); __builder.CloseElement(); } private void IncrementCount() { currentCount++; } }

通过对比，Razor组件会自动继承自ComponentBase，并且@code中的代码完全移入了编译后的类，而各种标签会在BuildRenderTree方法中用方法的形式进行输出。

PlaunchSettings.json

设置开发环境配置

Shared目录 MainLayout 组件 (MainLayout.razor)：应用的布局组件。 MainLayout.razor.css：应用主布局的样式表。 NavMenu 组件 (NavMenu.razor)：实现边栏导航。包括 NavLink组件，该组件可向其他 Razor 组件呈现导航链接。 NavMenu.razor.css：应用导航菜单的样式表。 SurveyPrompt 组件 (SurveyPrompt.razor)：Blazor 调查组件。 App.razor

应用的根组件，用于使用 Router 组件来设置客户端路由。app.razor中代码

Not found Sorry, there's nothing at this address.

如果发现有相应的组件则跳转过去，如果没有则会出现Sorry, there’s nothing at this address.

wwwroot

应用的 Web 根目录文件夹，其中包含应用的公共静态资产，其中index.html 网页是实现为 HTML 页面的应用的根页面：

最初请求的任何页面，都会呈现此页面。此页面指定 App 组件的呈现位置。使用 app 的 id (...) 在 div DOM 元素的位置呈现组件。

index.html

An unhandled error has occurred. Reload 🗙 _Imports.razor

包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如 @using指令

Program.cs

应用入口点，.net 7使用了顶级语法

using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); //将APP替换了index.html中id="app"的内容 builder.RootComponents.Add("head::after"); //添加并配置了服务 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); await builder.Build().RunAsync();

【本文地址】

Blazor

Blazor

今日新闻

推荐新闻