Blazor_WASM之3：项目结构
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Blazor_WASM之3：项目结构相关的知识，希望对你有一定的参考价值。
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"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@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<PageTitle>(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, "<h1>Counter</h1>\\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<MouseEventArgs>((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中代码
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, theres nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
如果发现有相应的组件则跳转过去，如果没有则会出现Sorry, there’s nothing at this address.
wwwroot
应用的 Web 根目录文件夹，其中包含应用的公共静态资产，其中index.html 网页是实现为 HTML 页面的应用的根页面：
- 最初请求的任何页面，都会呈现此页面。
- 此页面指定
App 组件的呈现位置。 使用 app 的 id (<div id="app">...</div>) 在 div DOM 元素的位置呈现组件。
index.html
<body>
<div id="app">
<!--等待进度框图片-->
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<!--如果出现错误则会出现-->
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">Blazor_WASM之4：路由
Blazor_WASM之4：路由
路由模板
通过 Router组件可在 Blazor 应用中路由到 Razor 组件。 Router 组件在 Blazor 应用的
App 组件中使用。App组件模板如下<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Sorry, theres nothing at this address.</p>
</NotFound>
</Router>在运行时，
RouteView组件有两个作用：
- 从 Router 接收 RouteData（例如/test）以及所有路由参数。
- 使用指定的组件的布局来呈现该组件，包括任何后续嵌套布局。
组件支持使用多个 @page 指令，/blazor-route和/different-blazor-route都能跳转到该界面
@page "/blazor-route"
@page "/different-blazor-route"
<h1>Blazor routing</h1>
也可以将@page替换成@attribute
@page "/test"
@attribute [Route("test")]
重要：想要正确解析URL，必须在<head>中包含<base>，也就是在wwwroot中的index.html中<head>中包含<base>。
<head>
...
<base href="/" />
...
</head>
元素聚焦
切换到指定页面后，可以将UI焦点设置到指定元素。
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
当 Router 组件导航到新页面时，FocusOnNavigate组件将焦点设置到页面的顶层标题 (<h1>)。
NotFound
如果找不到所请求路由的内容，则 Router组件允许应用指定自定义内容
<NotFound>
<h1>Sorry</h1>
<p>Sorry, theres nothing at this address.</p>
</NotFound>
路由参数
路由器使用相同的路由参数名称来填充组件参数，且路由参数不区分大小写。
@page "/test/name"
<h3>Test</h3>
<p>传入的参数是：@Name</p>
@code
[Parameter]
public string? Name set;get;
在地址栏中填写/test/哈哈哈
但是，如果地址栏只写/test，也就是不写参数，则会出现
改写为@page "/test/name?"，name则变成可选参数，地址栏仍然只写/test，则会出现
路由约束
路由约束强制在路由段和组件之间进行类型匹配，例如只允许id为int类型
@page "/user/Id:int"
<h1>User Id: @Id</h1>
@code
[Parameter]
public int Id get; set;
路由约束类型
路由约束也可以使用可选参数，比如下面的Id是必须，option是可选
@page "/user/Id:int/Option:bool?"
CatchAll路由参数
如果想把/test/a/b/c中/test/后面的内容全部当做参数，则可以使用/test/*par来进行提取。
@page "/catch-all/*pageRoute"
@code
[Parameter]
public string? PageRoute get; set;
查询字符串
查询字符串的样式如/test?name=tom&age=18，？后面的内容就是查询字符串，查询字符串支持的类型有bool, DateTime, decimal, double, float, Guid, int, long, string。使用方法如下：
@page "/test"
<h3>Test</h3>
<p>姓名：@Name</p>
<p>年龄：@Age</p>
<p>性别：@(MyProperty)</p>
@code
[Parameter]
[SupplyParameterFromQuery]
public string? Name set;get;
[Parameter]
[SupplyParameterFromQuery]
public int? Age set; get;
[Parameter]
[SupplyParameterFromQuery]
public bool Gender set; get;
public string MyProperty
get return Gender?"男":"女";
在地址栏输入.../test?name=Tom&age=18&gender=true
SupplyParameterFromQuery的Name属性可以指定查询参数的名字，下面是一个将查询参数放到同一个数组的案例：
@page "/test"
<h3>Test</h3>
@foreach (var item in stars)
<p>@item</p>
@code
[Parameter]
[SupplyParameterFromQuery(Name ="star")]
public string[]? stars set; get;
在地址栏输入.../test?star=a&star=b&star=c
以上是关于Blazor_WASM之3：项目结构的主要内容，如果未能解决你的问题，请参考以下文章