学Blazor 认识Blazor

用了一次,可能以后也没机会用了,就这样吧

Blazor 西装外套·布雷泽

在Razor模板中使用html css来构建页面
使用c#来编写逻辑
将他们组合起来为组件

官方文档:
https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0
https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/pages-routing-layouts
其他文档:
https://blazor-university.com/

组件

blazor的默认模板将组件放在Shared和Pages目录下
Shared 表示公共组件
Pages 表示页面组件

组件组成部分

组件主文件为.razor后缀的文件,比如 Index.razor
根据默认的规范如果编写css样式可命名为 Index.razor.css,vs根据规则会为你自动归类
同样的,逻辑文件为 Index.razor.cs
Index.razor.cs 里的类名需要标记为 partial 与 Index.razor 打配合
比如: public partial class Index{}
如不想partial也可以使用继承 @inherits来继承一个新类,见下,

.razor 里的内容

路由

@page "/todo"
@page "/todo/{Id}"

partial

可以使用@code在当前页面编写,效果与上述新建的partial类一致
@code {
[Parameter]
public string Id { get; set; }
}

继承 @inherits

继承效果与partial代码类似
在页面使用 @inherits IndexBase
则可在页面中访问IndexBase类中的成员

public class IndexBase : ComponentBase{}

加载完毕事件

protected override async Task OnInitializedAsync(){}

参数赋值完事件会更加后延,等参数设置完毕再动手刷新界面可能会更准确
protected override void OnParametersSet()

参数

使用[Parameter]标记属性为参数
当页面被通过路由访问或调用组件时赋值,则可以被传递参数(就是new完对象给属性赋值)
@page "/todo/{Id}" 会传递id到

@code {
[Parameter]
public string Id { get; set; }
}

依赖注入

组件中注入

使用@inject ClassType varName 或者对属性标记特性 [Inject] 可以注入服务
在使用前需要在Main方法中进行预先注册

builder.Services.AddSingleton(typeof(YourClass)); //单例
builder.Services.AddScoped(typeof(YourClass)); //blazor里的范围与单例差不多
builder.Services.AddTransient(typeof(YourClass)); //瞬时,组件切换后消失
  • 非组件的【服务】注入需要在构造函数内进行
    (随便写个类它不会为你注入,.net的注入具有传染性,必须是加入服务协会的类才会给你互相注入
    组件不需要手动加入,默认就是这个协会的
    )

数据绑定

单向绑定

直接使用@插值
<p>@Count</p>

双向绑定

在有值输入输出的控件中
使用@bind进行单项绑定
使用@bind:event控制绑定触发时机
<input @bind="MyValue" @bind:event="oninput" />

自定义组件属性的双向绑定

在自定义组件中定义属性

[Parameter]
public int Age { get; set; } ;

定义回调属性,名字需要按照规定来

[Parameter]
public EventCallback<int> AgeChanged { get; set; }

在组件内部事件调用回调属性来进行通知

await ShowChanged.InvokeAsync();

在外部使用双向绑定

<UserInfo @bind-Age="属性名"/>

事件传参

委托
@onclick="@(()=>SetUserInfo(user))"
原生参数
public async Task SearchEnter(KeyboardEventArgs e)

内置组件

改变标题

<PageTitle>组件进入就改变当前标题</PageTitle>

表单验证

用到在写,也很简单

js互操作

访问js

[Inject]
public IJSRuntime JSRuntime { get; set; }
await JSRuntime.InvokeAsync<object>("localStorage.setItem", "key1", "value1");
var result = await JSRuntime.InvokeAsync<object>("localStorage.getItem", "key1");

如果要调用自定义的js函数,应该挂载到window下

window.areyouok = (name) => {return "ok"};

浏览器地址

blazor貌似目前还没有hash路由
静态部署时路由会有点小问题
在切换页面后将浏览器地址改回基地址

@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
var baseUrl = NavigationManager.BaseUri;
var curUrl = NavigationManager.Uri;
Console.WriteLine(baseUrl);
Console.WriteLine(curUrl);
//修改浏览器地址
Task.Run(async () =>
{
await JSRuntime.InvokeAsync<object>("window.history.pushState", " ", " ", baseUrl);
});

实现 IDisposable

可以在组件销毁时候执行代码
根据此操作可以实现页面状态的保存,并在构造函数内进行加载(我自己这么用的)

@implements IDisposable
...
@code {
...
public void Dispose()
{
obj?.Dispose();
}
}

第三方UI库

antd

https://antblazor.com/zh-CN/docs/faq
https://antblazor.com/zh-CN/components/typography

Bootstrap

https://www.blazor.zone/

posted @   trykle  阅读(187)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示