Blazor 怎么创建第一个应用

新手推荐从 Blazor Server 入手,用 .NET CLI 执行 dotnet new blazorserver -n MyFirstBlazor 创建项目并 dotnet run 启动,默认访问 https://www.php.cn/link/8b49217b4e704d2c40e5908ebd53eda5;Visual Studio 中选择“Blazor Server App”模板创建,F5 调试支持热重载,核心文件包括 Program.cs、App.razor 和 Pages/Counter.razor。

blazor 怎么创建第一个应用

用 Visual Studio 或 .NET CLI 创建 Blazor 应用非常简单,关键是选对模板和运行方式。Blazor 分为 Blazor ServerBlazor WebAssembly 两种托管模型,新手推荐从 Blazor Server 入手——它无需浏览器下载大量 .NET 运行时,启动快、调试顺、依赖少。

用 .NET CLI 快速创建 Blazor Server 应用

确保已安装 .NET SDK(建议 8.0 或 9.0)。打开终端,执行:

dotnet new blazorserver -n MyFirstBlazor —— 创建名为 MyFirstBlazor 的服务端 Blazor 项目 cd MyFirstBlazor dotnet run —— 启动应用,默认访问 https://www.php.cn/link/8b49217b4e704d2c40e5908ebd53eda5

浏览器打开后就能看到默认首页,带导航菜单和交互式计数器——这就是你第一个可运行的 Blazor 页面。

用 Visual Studio 图形化创建(Windows/macOS)

打开 Visual Studio(2022 17.4+),选择「创建新项目」→ 搜索 “Blazor Server App” → 点击创建 → 填写项目名、位置、框架(如 .NET 8.0)→ 完成。

解决方案资源管理器里重点看 Pages/Counter.razor:这是带按钮和状态更新的组件,双击就能编辑 按 F5 直接启动调试,修改代码后保存,浏览器会自动刷新(启用热重载)

关键文件和运行逻辑说明

Blazor Server 不是纯前端框架,它通过 SignalR 实时连接服务器,UI 更新在服务端渲染,再推送到浏览器。所以你不需要配 Webpack 或 npm 构建流程。

Program.cs 是入口,注册了服务并配置了路由中间件 App.razor 是根组件,定义了路由规则()和布局() _Imports.razor 自动导入常用命名空间,避免每个 .razor 文件重复写 @using

下一步可以试试的小改动

验证是否真正上手,动手改两处:

打开 Pages/Counter.razor,把 currentCount++ 改成 currentCount += 2,保存后点“Click me”,数字每次加 2 在 Shared/NavMenu.razor 中新增一个菜单项:Hello,再新建 Pages/Hello.razor,写上

Hello from Blazor!

基本上就这些。不复杂但容易忽略的是:Blazor Server 默认启用 HTTPS 开发证书,首次运行可能弹出信任提示,按向导操作一次即可。

以上就是Blazor 怎么创建第一个应用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1443080.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月17日 19:42:42
下一篇 2025年12月17日 19:42:55

相关推荐

  • EF Core如何添加迁移 EF Core添加迁移(Add-Migration)方法

    Add-Migration 是为 EF Core 数据库模型变更生成迁移代码的关键步骤,创建含 Up/Down 方法的迁移类,需确保工具包安装、启动项目设置正确、DbContext 可发现,并支持 PMC 或 CLI 方式执行。 在 EF Core 中执行 Add-Migration 是为数据库模型…

    2025年12月17日
    000
  • Blazor HttpClient 附加 JWT Token 的方法

    最推荐的方式是使用自定义 DelegatingHandler(如 AuthorizationMessageHandler)配合 IJSRuntime 读取 localStorage 中的 JWT Token 并自动添加到 Authorization 请求头,再通过 Program.cs 正确注册命名…

    2025年12月17日
    000
  • ASP.NET Core怎么部署到IIS ASP.NET Core发布应用程序方法

    ASP.NET Core 应用部署到IIS的核心是IIS通过ANCM反向代理请求至Kestrel服务器。需确保安装Hosting Bundle、正确发布应用、配置IIS站点(应用程序池设为“无托管代码”)、验证web.config生效,最后通过日志排查500.19/502.5错误。 ASP.NET …

    2025年12月17日
    000
  • Blazor 怎么使用 IndexedDB

    Blazor 通过 JavaScript 互操作调用 IndexedDB,需在 JS 中封装 initDb、add、get 等方法并返回 Promise,C# 端用 IndexedDbService 封装调用,注意版本升级、事务短暂、错误监听及存储限制。 Blazor 本身不直接提供 Indexed…

    2025年12月17日
    000
  • C#怎么解析JSON字符串 C#使用Newtonsoft.Json库教程

    C#中解析JSON最常用的是Newtonsoft.Json,它比System.Text.Json更灵活,支持复杂嵌套、自定义序列化等;需通过NuGet安装并引用using Newtonsoft.Json;,可用JObject动态解析或DeserializeObject反序列化为强类型对象,注意大小写…

    2025年12月17日
    000
  • C#怎么连接PostgreSQL数据库 C# Npgsql驱动使用方法

    最主流稳定的方式是使用 Npgsql 驱动,它支持 async/await、EF Core、连接池和 SSL 加密;通过 NuGet 安装,用 NpgsqlConnection 连接,推荐参数化查询与合理配置连接字符串。 用 C# 连 PostgreSQL,最主流、最稳定的方式就是用 Npgsql …

    2025年12月17日
    000
  • Blazor 怎么优化性能

    Blazor性能优化需从实际瓶颈出发,包括减少渲染、降低JS互操作开销、控制组件生命周期及提升资源加载效率;具体措施有:用@key稳定列表、重写ShouldRender()、拆分组件、防抖JS调用、启用AOT编译与代码剪裁等。 Blazor 性能优化核心在于减少不必要的渲染、降低 JS 互操作开销、…

    2025年12月17日
    000
  • Blazor AuthenticationStateProvider 使用教程

    AuthenticationStateProvider是Blazor中广播用户认证状态的核心服务,需继承并重写GetAuthenticationStateAsync(),调用NotifyAuthenticationStateChanged通知UI更新,注册为Scoped(Server)或Single…

    2025年12月17日
    000
  • C#怎么实现一个简单的Web服务器 C# HttpListener使用方法

    HttpListener 是 C# 原生轻量 Web 服务器方案,无需 IIS 或 Kestrel,支持 .NET Framework 和 .NET 5+;需管理员权限注册 URL 前缀(如 http://localhost:8080/),核心步骤为创建监听器、添加前缀、调用 GetContext(…

    2025年12月17日
    000
  • Blazor 怎么操作浏览器本地存储

    Blazor 操作浏览器本地存储需通过 JS Interop,WASM 和 Server 均依赖此机制;推荐使用 Blazored.LocalStorage 封装库,支持强类型异步操作;也可手动实现 JS Interop;localStorage 持久共享,sessionStorage 仅限当前标签…

    2025年12月17日
    000
  • Blazor 动态修改 CSS 自定义属性的方法

    Blazor中动态修改CSS自定义属性需通过JS Interop调用style.setProperty(),全局变量设在document.documentElement,局部变量作用于ElementReference;需手动调用StateHasChanged响应逻辑变化,并注意SSR兼容性与性能优化…

    2025年12月17日
    000
  • Blazor 怎么将 Razor Class Library (RCL) 用作组件库

    Blazor中RCL作为组件库的核心是隔离、正确引用和静态资源处理:创建无宿主依赖的Razor组件,通过项目引用并在_Imports.razor中导入命名空间;静态资源放入RCL的wwwroot,构建时自动复制至_content/{RCLName}/路径。 Blazor 中将 Razor Class…

    2025年12月17日
    000
  • Blazor EventCallback 与 Action/Func 的区别和用法

    EventCallback 是 Blazor 专用于子组件向父组件发起异步回调通知的线程安全委托包装器,自动处理 UI 线程同步与状态刷新;Action/Func 是通用委托,无 Blazor 运行时语义,调用后不会触发自动渲染。 Blazor 中的 EventCallback 不是普通委托,而是专…

    2025年12月17日
    000
  • Blazor 发布到 Azure App Service 教程

    Blazor应用部署到Azure App Service需区分Server与WebAssembly类型:Server需.NET运行时支持,WebAssembly可作静态网站部署;推荐VS一键发布或GitHub Actions自动部署,并注意WebSocket启用、base href配置及MIME类型…

    2025年12月17日
    000
  • C# 如何使用MediatR库 – 实现CQRS模式中的命令和查询

    CQRS将操作分为命令与查询,MediatR通过中介者模式实现解耦,提升系统可维护性与扩展性,适用于复杂业务场景。 在现代C#应用程序开发中,CQRS(命令查询职责分离)模式被广泛用于提升系统可维护性和可扩展性。MediatR 是一个轻量级库,帮助我们在项目中轻松实现这一模式。它通过中介者模式将请求…

    2025年12月17日
    000
  • Blazor IDisposable 接口实现资源清理

    Blazor组件必须实现IDisposable以释放非托管资源,如Timer、事件订阅、WebSocket等;应在Dispose()中判空调用Dispose(),避免StateHasChanged()和await异步操作。 Blazor 组件实现 IDisposable 是为了在组件被销毁前及时释放…

    2025年12月17日
    000
  • Blazor Streaming Rendering 使用教程

    Blazor Streaming Rendering是.NET 8引入的流式渲染优化,通过@stream指令分块推送渲染结果,提升长列表和实时数据场景的响应体验。 Blazor Streaming Rendering(流式渲染)是 .NET 8 引入的一项关键优化,用于提升 Blazor Serve…

    2025年12月17日
    000
  • Blazor WebAssembly 和 Blazor Server 混合应用怎么做

    Blazor混合应用本质是共享代码+分离宿主,需通过Shared类库共用组件与逻辑,WASM与Server项目独立部署并适配差异,不可单项目切换渲染模式。 Blazor WebAssembly 和 Blazor Server 混合应用不是官方直接支持的“单项目双托管模式”,但可以通过合理架构设计,在…

    2025年12月17日
    000
  • Blazor 组件化 CSS 作用域隔离教程

    Blazor 的 CSS 隔离是编译期自动为 .razor.css 文件中选择器添加唯一属性标识并注入对应 HTML 属性,实现组件级样式作用域;需同名同目录配对文件,支持 ::deep 透传和 :global() 全局声明。 Blazor 提供了原生的 CSS 隔离(CSS Isolation)机…

    2025年12月17日
    300
  • Blazor JWT Token 登录和授权方法

    Blazor中JWT登录授权需前后端闭环协作:后端用HMAC-SHA256签发含name/role/exp的token并返回UserToken结构;前端存localStorage、HttpClient自动携Bearer头、AuthorizeView拦截路由、401时跳登录页、登出时清除token并重…

    2025年12月17日
    000

发表回复

登录后才能评论
关注微信