学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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
2020-07-16 使用.net执行python代码,解析表达式