×

Blazor实战：你们看看这个登录页面怎么样

独孤求败 独孤求败 发表于2026-05-20 21:45:15 浏览25 评论0

抢沙发发表评论

最近没更新，一是主业比较忙，其次也是空余时间都用来研究Blazor到底该怎么用，当然其中免不了AI的帮助，也确实节省了不少学习成本，最后仿照市面上的一些登录页面的样式，做了个简单的登录页面，你们帮忙看看怎么样

我选择的是Blazor Server模式开发，搭配MudBlazor组件库，写惯了WPF、Winform这些项目，突然要做网页确实有些不太习惯，不过最后呈现的效果我觉得还行。
接下来就是结合已经开发的内容，做个阶段性的总结，有这方面的高手也欢迎指正，小弟不胜感激。
文章最后会附上这次做的登录页面具体样式，包含修改密码、注册等页面。

Part.01

razor核心结构

我理解的代码结构，说白了就是把「指令+UI+执行代码」整合在一个.razor文件里，各司其职，不用在类似WPF的View和Viewmodel之间来回切换，一个文件就能搞定页面的路由、界面和逻辑，这也是我觉得Blazor最省心的一点。

Part.02

逐区拆解




1.顶部指令区
这里不能简单的认为它是类似于WPF中的引用命名空间，结合我项目的代码，重点介绍以下这几个指令的用法，都是实战中必用的：
@page"/login"
@layoutRecordWorkSaaS.Components.Layout.AuthLayout
@rendermodeInteractiveServer
@injectNavigationManagerNavigation
@injectGlobalStateGlobalState
@injectISnackbarSnackbar
@injectISmsServiceSmsService
@usingRecordWorkSaaS.DB.Businesses
@usingRecordWorkSaaS.Comn.Services
@page：这个是必须项，主要用来指定页面的访问路径，我这里的是一个登录页面。
@layout ：用于指定布局，覆盖默认布局，也就是我们自己写的一些样式调用。
@rendermode InteractiveServer：Blazor的渲染模式，定义组件的交互方式。 InteractiveServer表示组件在服务端运行，通过 WebSocket 进行双向数据绑定和事件处理（Blazor Server 模式）。。
@inject：这个就和后端的依赖注入一样，用来注入需要的服务。将服务注入到组件中，供内部方法调用。例如NavigationManager 用于导航跳转，ISnackbar用于显示通知提示，ISmsService用于发送短信等等。
@using：和我们写C#后端代码一样，用来引用命名空间。这个就不过都介绍了


2.中间UI区
中间UI区就是用来写页面界面的，主要结合HTML、Blazor的绑定语法，还有我用的MudBlazor组件库，实现页面的布局和交互。如果写惯了WPF的，其实上手也挺快的。其中，我用到的一些语法功能，大家可以参考，如果有更优的做法，欢迎指正：
2.1.页面结构与顶层容器
<PageTitle>账号登录 - 白泽数字工厂</PageTitle>
<!-- MudBlazor全局服务提供者 -->
<MudThemeProvider Theme="@_lightTheme" IsDarkMode="false" />
<MudDialogProvider />
<MudSnackbarProvider />
<MudPopoverProvider />
2.2.Blazor 条件渲染
@if (_showSetPassword)
{
    <!-- 设置密码视图 -->
}
else if (_showBindPhone)
{
    <!-- 绑定手机号视图 -->
}
else
{
    <!-- 登录主视图 -->
}
2.3.数据绑定语法
2.3.1.Mud 组件双向绑定
@bind-Value="_phone"
@bind-Value="_smsCode"
2.3.2.原生 input 单向赋值 + 输入事件
value="@_account"
@oninput="OnAccountInput"
@oninput="OnLoginPwdInput"
2.3.3.原生密码类型动态绑定
type="@(_passwordVisible ? "text" : "password")"
2.4.事件绑定
2.4.1.无参点击事件
@onclick="DoSetPassword"
@onclick="SendCode"
@onclick="DoLoginByAccount"
@onclick="TogglePasswordVisibility"
@onclick="SwitchToSmsLogin"
2.4.2.带参数行内点击事件
@onclick="() => SelectPhonePrefix(prefix)"
2.5.循环遍历
@foreach (var prefix in _phonePrefixes)
{
    <!-- 遍历下拉手机号区号 -->
}
2.6.布尔状态控制
2.6.1按钮禁用状态
Disabled="_countdown > 0 || _isLoading"
2.6.2.加载状态判断
@if (_isLoading) { 加载组件 }
2.7.文本动态渲染
@(_countdown > 0 ? $"{_countdown}s" : "获取验证码")
2.8.MudBlazor 常用业务组件
<!-- 输入框 -->
<MudTextField />
<!-- 按钮 -->
<MudButton OnClick="" Disabled="" FullWidth="" />
<!-- 环形加载 -->
<MudProgressCircular Indeterminate="true" />
2.9.表单原生属性
form onsubmit="return false;"  <!-- 阻止表单默认提交 -->
autocomplete="off"             <!-- 关闭自动填充 -->
autocomplete="new-password"
autocomplete="current-password"
2.10.视图切换核心状态变量
// 后台对应状态
bool _showSetPassword;
bool _showBindPhone;
string _loginMode;
bool _passwordVisible;
int _countdown;
bool _isLoading;


3.底部代码区
底部代码区主要用来写页面的业务逻辑，比如数据加载、事件处理、页面生命周期方法。所有的逻辑都放在@code代码块里，写法和我们写C#后端代码完全一样。
需要注意的是，@code代码块必须放在页面最底部，一个.razor文件只能有一个@code块。

Part.03

实战总结

结合我开发的工厂登录页面，跟大家总结3步开发注意点：

写顶部指令区，定义页面路由、注入需要的服务、引用相关的命名空间。这是基础配置，必不可少，不然页面会报错，大家一定要先把这一步做好。
用HTML+Blazor组件搭建页面布局，用@绑定变量、@if做条件渲染，大家可以根据自己的项目需求，修改样式和组件。
底部代码区，写法和后端C#完全一致，上手很快。

Part.04

核心优势

这段时间的学习和使用Blazor开发这个登录页面，我最大的感受就是省心，不用页面间切来切去，对于我们不擅长画界面的人来说，可以用AI帮忙规划，现在很多OPC其实用的都是这个套路，就看怎么包装自己。
这个项目是我自己的一个SaaS项目，我会继续做下去，也会不定期分享其中的感悟，算是我自己的一个总结，如果刚好能帮到大家，希望各位关注点赞推荐三连来一个，帅狗不胜感激。
最后附上本次做出来的登录页面。
图片
图片
图片


群贤毕至

访客