Blazor技术入门

blazor,技术,入门 · 浏览次数 : 248

小编点评

**Razor 和 Blazor 示例** **1. Razor 和 Blazor 技术** * Razor 是一个用于生成基于文本的内容的 HTML 格式的 Razor 文件扩展名。 * Blazor 是一个用于构建用户界面框架的 .NET 和 Razor 之上的用户界面框架。 **2. Blazor Server 示例** * 这是一个用于构建 Web 应用和 API 的 .NET 和 Razor 之上的框架。 * 包含应用程序服务和中间件的入口点。 **3. Blazor WebAssembly 示例** * 这是一个用于构建 WebAssembly 应用的 .NET 和 Razor 之上的框架。 * 运行在浏览器中。 **4. .NET MAUI Blazor 示例** * 这是一个用于构建 .NET MAUI 和 Blazor 应用的框架。 * 支持跨平台开发。 **5. Razor 常用语法** * `@inject` 用于将服务注入到视图。 * `@layout` 用于为可路由组件指定布局。 * `@model` 用于指定传递到视图或页面的模型类型。 * `@using` 用于向生成的视图添加C# using 指令。 * `@addTagHelper` 用于向视图提供标记帮助程序。 * `@removeTagHelper` 用于从视图中删除以前添加的标记帮助程序。 * `@tagHelperPrefix` 用于指定标记前缀,以启用标记帮助程序支持并阐明标记帮助程序的用法。 **6. 参考文献** * [1] ASP.NET Core Blazor 项目结构 * [2] ASP.NET Core 的 Razor 语法参考 * [3] BootstrapBlazor * [4] Ant Design Blazor * [5] MatBlazor * [6] DevExpress Blazor

正文

曾写过点儿前后端分离的项目(Vue+.NET Core Web API)、WPF和WinForm。因为Blazor不支持小程序的原因(相对于uniapp),所以只是大概知道Blazor可以写Web、PC和移动端项目,最大的特点就是使用C#代替JS。本文算是通过几个默认例子入门Blazor技术吧。

一.Razor和Blazor技术
1.什么是Razor
Razor是生成基于文本的内容(如HTML)的一种格式。Razor文件具有cshtml或razor文件扩展名,并且包含C#代码与HTML的混合。
2.什么是Blazor
Blazor是在.NET和Razor上构建的用户界面框架。Blazor应用程序可以在服务器上作为ASP.NET应用程序的一部分运行(Blazor Server),也可以部署为在用户计算机上的浏览器中运行(Blazor WebAssembly)。
3.什么是Razor类库
Razor视图、页面、控制器、页面模型、Razor组件、视图组件和数据模型可以构建到Razor类库(RCL)中。RCL可以打包并重复使用。应用程序可以包括RCL,并重写其中包含的视图和页面。如果在Web应用和RCL中都能找到视图、分部视图或Razor页面,那么Web应用中的Razor标记(.cshtml文件)优先。
4.ASP.NET Core MVC
ASP.NET Core MVC是使用"模型-视图-控制器"设计模式构建Web应用和API的丰富框架。

二.Blazor Server例子
1.Blazor Server应用 2.配置新项目 3.其他信息 4.解决方案BlazorApp1 (1)Program.cs是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
(2)App.razor为应用的根组件。
(3)Pages目录包含应用的一些示例网页。
(4)BlazorApp.csproj定义应用项目及其依赖项,且可以通过双击解决方案资源管理器中的BlazorApp项目节点进行查看。
(5)Properties目录中的launchSettings.json文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。
5.启用项目

三.Blazor WebAssembly例子
1.Blazor WebAssembly应用 2.配置新项目 3.其他信息 4.解决方案BlazorApp2 (1)Pages文件夹:包含构成Blazor应用的可路由组件/页面(.razor)。每个页面的路由都是使用@page指令指定的。
(2)Properties/launchSettings.json:保留开发环境配置。
(3)Shared文件夹:包含共享组件和样式表。
(4)wwwroot:应用的Web根目录文件夹,其中包含应用的公共静态资产,包括appsettings.json和配置设置的环境应用设置文件。
(5)_Imports.razor:包括要包含在应用组件(.razor)中的常见Razor指令,如用于命名空间的@using指令。
(6)App.razor:应用的根组件,用于使用Router组件来设置客户端路由。Router组件会截获浏览器导航并呈现与请求的地址匹配的页面。
(7)Program.cs:应用入口点,用于设置WebAssembly主机。

四..NET MAUI Blazor例子
1..NET MAUI Blazor应用 2.配置新项目 3.其他信息 4.解决方案MauiApp1 5.net6.0-windows启动

五.Razor常用语法
1.@inject指令
允许Razor页面将服务从服务容器注入到视图。
2.@layout指令
为具有@page指令的可路由Razor组件指定布局。
3.@model指令
指定传递到视图或页面的模型类型。
4.@using指令
用于向生成的视图添加C#using指令。
5.@addTagHelper
向视图提供标记帮助程序。
6.@removeTagHelper
从视图中删除以前添加的标记帮助程序。
7.@tagHelperPrefix
指定标记前缀,以启用标记帮助程序支持并阐明标记帮助程序的用法。

参考文献:
[1]ASP.NET Core Blazor项目结构:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/project-structure?view=aspnetcore-7.0
[2]ASP.NET Core 的 Razor 语法参考:https://learn.microsoft.com/zh-cn/aspnet/core/mvc/views/razor?view=aspnetcore-7.0
[3]BootstrapBlazor:https://www.blazor.zone/index
[4]Ant Design Blazor:https://ant-design-blazor.gitee.io/zh-CN/
[5]MatBlazor:https://www.matblazor.com/
[6]DevExpress Blazor:https://www.devexpress.com/blazor/

吾爱DotNet 右边的图片 专注于.NET领域的技术分享

NLP日志录 左边的图片1 专注于NLP领域的技术分享

与Blazor技术入门相似的内容:

Blazor技术入门

曾写过点儿前后端分离的项目(Vue+.NET Core Web API)、WPF和WinForm。因为Blazor不支持小程序的原因(相对于uniapp),所以只是大概知道Blazor可以写Web、PC和移动端项目,最大的特点就是使用C#代替JS。本文算是通过几个默认例子入门Blazor技术吧。 一

Blazor的技术优点

Blazor是一种使用.NET和C#构建客户端Web应用程序的新兴技术。它允许开发者在浏览器中直接运行.NET代码,而无需依赖JavaScript。Blazor的技术优点主要表现在以下几个方面: 单一语言栈:Blazor允许开发者使用C#和.NET进行全栈开发。一种语言用于前端和后端可以大大简化开发

如何使用 Blazor 框架在前端浏览器中导入和导出 Excel

摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 Blazor 是一个相对较新的框架,用于构建具有 .NET 强大功能的交互式客户端 Web UI。一个常见的用例是将现有的 Excel 文件导入 Blazo

如何使用Photino创建Blazor项目进行跨平台

Photino是什么 Photino是一组使用Web (HTML/CSS/JavaScript)UI创建桌面应用程序的技术。TryPhotino.io 维护 .NET 构建,并鼓励社区开发 Photino.Native 控件以用于其他语言和平台。我们鼓励并将支持Photino.CPP,Photino

原来.NET写的Linux桌面这么好看?

如何使用Blazor在Linux平台下运行Desktop程序 本文将讲解如何使用Blazor运行跨平台应用,应用到的技术有以下几点 Blazor Masa Blazor Photino.Blazor Ubuntu 用于验证跨平台性,并且是否提高开发效率,Blazor和Photino一块使用的技术称为

Dotnet9网站回归Blazor重构,访问速度飞快,交互也更便利了!

大家好,我是沙漠尽头的狼。 Dotnet9网站回归Blazor重构,访问速度确实飞快,同时用上Blazor的交互能力,站长也同步添加了几个在线工具,这篇文章分享下Blazor的重构过程,希望对大家网站开发时做技术选型有个参考。 ![](https://img1.dotnet9.com/2023/06

实现一个简单的在浏览器运行Dotnet编辑器

之前已经实现过Blazor在线编译了,现在我们 实现一个简单的在浏览器运行的编辑器,并且让他可以编译我们的C#代码, 技术栈: Roslyn 用于编译c#代码 [monaco](microsoft/monaco-editor: A browser based code editor (github.

使用Blazor WebAssembly整合PocketBase的基础项目模板

使用Blazor WebAssembly整合PocketBase的基础项目模板 在这篇博客文章中,我们将探讨如何创建一个集成PocketBase的基础Blazor WebAssembly项目。我们将涵盖用户身份验证、注册和密码找回功能。我们的项目使用PocketBaseClient,这是一个动态生成

微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor

前言 今天大姚给大家分享一个由微软官方开源(MIT License)、免费的Blazor UI组件库:Fluent UI Blazor。 全面的ASP.NET Core Blazor简介和快速入门 Fluent UI Blazor介绍 Fluent UI Blazor是一个基于Blazor的组件库,

blazor优雅的方式导入组件相关的js脚本

基本的组件导入方式为: 1 await JsRuntime.InvokeVoidAsync("import", $"XXXXX.js"); 优雅的组件导入方式: 1 await JsRuntime.ImportAsync(); 这种优雅一点不难,只需要写一个扩展方法,把他放在任