C# Blazor 学习笔记(5):blazor文件夹组件引入

最新推荐文章于 2024-05-10 10:13:23 发布
最新推荐文章于 2024-05-10 10:13:23 发布
阅读量428 收藏
点赞数
分类专栏： Blazor基础知识 文章标签： 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44695769/article/details/132054741
版权

文章目录

前言

为了更好的组件化管理整个文件，我选择使用分文件夹对项目组件进行分类。

文件夹组件引入

文件夹分类

  • Shared：Layout布局空间放置地方，由于默认创建，动也不好动，我就不动这个名称了，原本想改成Layout的
  • Pages：业务页面
  • Components：自定义组件文件

文件引入

我创建了B_Col和B_Row两个组件。因为我怕我的命名和别的组件库命名出现冲突，我就加了了B_前缀
在这里插入图片描述
然后我发现不能直接引入
在这里插入图片描述

解决方法

在_import.razor文件夹中
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

龙中舞王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Blazor.Extensions.CssStyles:直接在Blazor组件中定义Css类
05-15
Blazor.Extensions.CssStyles 直接在Blazor组件中定义Css类。 有条件地将类名连接在一起的简便方法。 重要的！ 仍未完成开发 安装 设置 在应用客户端中注册所需的服务 var serviceProvider = new BrowserServiceProvider ( services => { services . AddCss (); }); 在Blazor组件中，添加Tag helper和ComponentWithStyles的继承 @addTagHelper * , Blazor . Extensions . CssStyles @using Blazor . Extensions . CssStyles . Css ; @inherits Blazor . Extensions . CssStyles . Components .
在Blazor中构建文件夹树
寒冰屋的专栏
07-27 703
本技巧展示了如何在Blazor中创建树文件夹/视图。
如何在现有的Vue项目中嵌入 Blazor项目?
xiaohucxy的博客
01-20 203
目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用，上期已经做好了react的教材！
将动态路由、布局和RouteViews添加到Blazor应用程序组件
寒冰屋的专栏
12-26 1434
App是Blazor UI根组件。本文着眼于它的工作原理并演示如何： 添加动态布局——在运行时更改默认布局 添加动态路由——在运行时添加和删除额外的路由 添加动态RouteViews——无需路由直接更改RouteView组件
Blazor学习之旅 (8) MudBlazor组件库介绍
dotNET跨平台
12-03 3516
【Blazor】|总结/Edison Zhou大家好，我是Edison。为了实现一个Web应用系统，需要有个看起来不丑的UI，而对于.NET程序员来说要做全栈开发还是有点难，而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题！MudBlaozr是啥MudBlazor是一个基于Blazor的前端UI组件库，它可以使.NET开发者使用C#语言快速地构建酷炫的Web应用。重点是，MudBlazor...
如何使用 SCSS 为 Blazor 组件设置样式
weixin_43327181的博客
12-17 1334
SCSS，也称为 Sassy CSS，是一种包含高级功能的 CSS 进步。它更具表现力，加载速度更快，使用的代码行更少，并鼓励正确的规则嵌套。它具有 CSS 的所有功能以及更多功能，是开发人员使用的不错选择。它是一个特定于 SASS 的文件，类似于 CSS，但具有改进的格式。 要使用 SCSS 设置 Blazor 组件的样式，请按照下列步骤操作： 通过参考此链接创建 Blazor WebAssembly 应用程序。 创建一个名为TowerRange的新文件夹，并在其中创建TowerRange.razor，一
C# Blazor 学习笔记(1):Blazor基础语法，组件化和生命周期
qq_44695769的博客
07-31 1314
这里我们会讲解Blazor的基础语法和简单组件化使用Blazor 常用语法介绍。
使用 .net + blazor 做一个 kubernetes 开源文件系统
萌兔兔MMQ！！
05-06 432
背景 据我所知，目前 kubernetes 本身或者其它第三方社区都没提供 kubernetes 的文件系统。也就是说要从 kubernetes 的容器中下载或上传文件，需要先进入容器查看目录结构，然后再通过 kubectl cp 指令把文件拷贝进或出容器。虽然说不太麻烦，但也不太方便。当时正好推出 .net 5 + blazor，就趁着这个机会使用 .net 5 + blazor 做一个 kubernetes 的开源文件系统。 界面简介 创建集群 创建集群其实就是上传需要接管的 kubernetes 的
Blazor 初体验-----快速搭建文件共享系统
esiangchioa的博客
06-09 2088
Blazor 这里不多介绍了，请参考微软官方文档。 环境：visual studio 2019 v16.4.2 .Netcore 3.1 1、新建Blazor应用 2、删除默认的官方示例，Data以及page.新建文件model和service,以及文件分类页面 3、FileInfoData.cs public class FileInfoData { public DateTime Date { get; set; } p...
C#学习笔记6：Winforms添加与使用摄像头组件
03-30
今日继续我的C#与Winforms学习之路： 学习使用引用AForge 库 VideoSourcePlayer控件，使用摄像头组件进行一些操作： 学习包含的知识有：项目程序包的下载、工具栏控件的添加、FormClosing事件的添加、C#的一些文件...
基于C#Asp.net Blazor组件式开发的Blazor案例
06-24
基于C#Asp.net Blazor组件式开发的Blazor案例，已经测试通过，具体请看解压后的“说明”文件夹。里面有运行效果截图和代码说明。 1. 基于Core6的Blazor案例 2. vs2022开发平台 3.sql2012及以上数据库，采用EF操作...
Blazor.Auth0：在Blazor应用程序中使用Auth0的库
02-05
Blazor.Auth0 是一个库，用于通过Blazor SPA中的使用带有的。 这背后的想法是要有一种简单的方法来在Blazor（尤其是客户端）中使用Auth0的服务，而无需中继javascript库。 关于Auth0 Auth0是一个提供身份验证和...
Blazor+C#+图片上传网站+运行调试一步入门
04-10
用Blazor 制作一个上传图片的网站 对于上传图片或者上传文件功能的网站，又要实现无刷新的使用体验。 建议阅读相关： 文章页面：https://blog.csdn.net/qq_42944545/article/details/130014596 适合人群：刚使用...
Blazor 组件库开发指南
秉持Love and share的态度去学习和生活
09-11 896
Blazor 的核心是组件，我们创建不同类型的组件并在整个项目中重用它们。没有人想重复造轮子，因此创建一个可重用的 Blazor 组件库始终是一个好主意，这些组件不仅可以在多个项目之间共享，还可以作为 NuGet 包与其他人共享。Blazor 允许我们基于一个名为 Razor 类库（Razor Class Library）的新模板创建这样的组件库，在本文中，我将向您演示如何创建这样一个库，不仅仅共享组件，还共享静态内容（比如图片、样式表等等）。 创建一个 Razor 组件库 在 Visual Stu..
图解 BootstrapBlazor 组件库的使用01：在 .NET 8.0 的 Blazor Web App 项目模板中引用 BootstrapBlazor
cqths的博客
12-01 1789
图解 BootstrapBlazor 组件库的使用01：在 .NET 8.0 的 Blazor Web App 项目模板中引用 BootstrapBlazor。
Blazor 组件入门指南
farway000的博客
07-06 2615
翻译自 Waqas Anwar 2021年3月19日的文章《A Beginner’s Guide to Blazor Components》[1]Blazor 应用程序是组件的组合，这些组件不仅负责呈现用户界面，还协同工作以促进用户交互。它们是 Blazor 应用程序的主要构建块，大多数 Blazor 功能都是围绕组件展开的。在本教程中，我将向您详细介绍组件，并向您展...
Blazor University （3）组件 — 创建组件
dotNET跨平台
03-26 239
原文链接：https://blazor-university.com/components组件所有呈现的 Blazor 视图都来自 ComponentBase 类，这包括布局、页面和组件。Blazor 页面本质上是一个带有 @page 指令的组件，该指令指定浏览器必须导航到的 URL 才能呈现它。事实上，如果我们比较生成的组件代码和页面代码，差别很小。可以在文件夹 obj...
Blazor入门100天 : 身份验证和授权 (5) - 本地化资源
alex_zoucn的博客
02-22 498
目录 建立默认带身份验证 Blazor 程序 角色/组件/特性/过程逻辑 DB 改 Sqlite 将自定义字段添加到用户表 脚手架拉取IDS文件,本地化资源 freesql 生成实体类,freesql 管理ids数据表 初始化 Roles,freesql 外键 => 导航属性 完善 freesql 和 bb 特性
在做题中学习（54）：点名
最新发布
yiren_liusong的博客
05-10 309
解法三：位运算 搞一个和原数组大小相同的数组，和原数组进行异或，最后看看剩下是哪一个数即可。O(n)空间+O(n)时间。解法二：哈希表 把原数组丢入哈希表，遍历哈希表，看看哪个数值为0即可。O(n)空间+O(n)时间。解法四：高斯求和 求和公式算出结果后，依次 - 数组中的元素，被减数剩下的就是结果。处理边界情况：如果数组缺的正好是最后一个位置，那么需要特殊处理。可以看出，数组和下标的对应关系，解法一：暴力枚举 O(n);对应的下标，就是缺的那个数字。
: c# Blazor 展示日志
06-02
您可以使用Blazor WebAssembly或Blazor Server来展示日志。下面是一些实现方式： 1. 使用Blazor WebAssembly 您可以将日志作为对象注入到您的服务中，然后将其绑定到UI组件以显示。以下是一个示例： 在Startup.cs文件中，注入日志服务： ```csharp services.AddSingleton<ILoggerService, LoggerService>(); ``` 创建LoggerService类，该类包含记录日志的方法： ```csharp public class LoggerService : ILoggerService { private List<LogEntry> logs = new List<LogEntry>(); public void Log(string message) { logs.Add(new LogEntry { Message = message, Timestamp = DateTime.Now }); } public List<LogEntry> GetLogs() { return logs; } } public class LogEntry { public string Message { get; set; } public DateTime Timestamp { get; set; } } ``` 在Blazor组件中，绑定日志数据： ```csharp @page "/log" <h3>Log</h3> <ul> @foreach (var log in logs) { <li>@log.Timestamp.ToString() - @log.Message</li> } </ul> @code { private List<LogEntry> logs; protected override void OnInitialized() { logs = loggerService.GetLogs(); } [Inject] private ILoggerService loggerService { get; set; } } ``` 2. 使用Blazor Server 在Blazor Server中，您可以使用SignalR连接到服务器，然后通过SignalR获取日志数据。以下是一个示例： 在Startup.cs文件中，注入日志服务： ```csharp services.AddSingleton<ILoggerService, LoggerService>(); ``` 创建LoggerService类，该类包含记录日志的方法： ```csharp public class LoggerService : ILoggerService { private List<LogEntry> logs = new List<LogEntry>(); public void Log(string message) { logs.Add(new LogEntry { Message = message, Timestamp = DateTime.Now }); } public List<LogEntry> GetLogs() { return logs; } } public class LogEntry { public string Message { get; set; } public DateTime Timestamp { get; set; } } ``` 在Blazor组件中，使用SignalR获取日志数据： ```csharp @page "/log" <h3>Log</h3> <ul> @foreach (var log in logs) { <li>@log.Timestamp.ToString() - @log.Message</li> } </ul> @code { private List<LogEntry> logs; protected override async Task OnInitializedAsync() { logs = await hubConnection.InvokeAsync<List<LogEntry>>("GetLogs"); } [Inject] private HubConnection hubConnection { get; set; } } ``` 在服务端创建SignalR Hub，该Hub将日志数据发送到客户端： ```csharp public class LogHub : Hub { private readonly ILoggerService loggerService; public LogHub(ILoggerService loggerService) { this.loggerService = loggerService; } public async Task<List<LogEntry>> GetLogs() { return loggerService.GetLogs(); } } ``` 在Startup.cs文件中，配置SignalR： ```csharp services.AddSignalR(); app.UseEndpoints(endpoints => { endpoints.MapHub<LogHub>("/loghub"); }); ``` 请注意，这只是展示日志的基本示例，您可能需要根据您的实际需求进行适当的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值