Cool2Feel的博客

Blazor 是一个免费的开源单页应用程序 (SPA) 开发框架，它使开发人员能够使用 HTML、CSS 和 C# 而不是 JavaScript 来构建交互式 Web 应用程序。我们可以使用这个流行的框架构建 Blazor WebAssembly 或 Blazor 服务器应用程序，这两种托管模型各有优缺点。 Blazor 服务器应用在服务器上运行，在那里它们可以享受 .NET 运行时的完全支持并使用任何 .NET 库。我已经写了几篇关于 Blazor 的教程，很多人让我写一篇关于使用 Entity Fr..

Blazor 是关于组件的。我们创建不同类型的组件并在整个项目中重复使用它们。没有人想重新发明轮子，因此创建一个可重用 Blazor 组件库始终是一个好主意，这些组件不仅可以在多个项目之间共享，还可以作为 NuGet 包与其他人共享。 Blazor 允许我们在名为 Razor 类库的新项目模板的帮助下创建此类组件库，在这篇文章中，我将向您展示如何创建此类库，并不仅共享组件，还共享静态内容，如图像、样式表、等等。下载：Download Source CodeBlazor 组件库的开发在 Razor ..

在之前的文章在 Blazor 服务器应用程序中发出 HTTP 请求中，介绍了在 Blazor 服务器应用程序中发出 HTTP 请求的不同技术，您可以访问所有 .NET 库和组件。如果您正在创建 Blazor WebAssembly 应用程序，那么您的代码在浏览器沙箱中的客户端上运行，并且您的选择在某种程度上受到限制。在本教程中，我将向您展示如何从 Blazor WebAssembly 应用程序发出 HTTP 请求。Blazor WebAssembly 应用程序中发出 HTTP 请求Blazor We..

Blazor 服务器应用程序使用标准的 ASP.NET Core 应用程序，它们在服务器上执行 .NET 代码。我们可以按照在 ASP.NET Core Web 应用程序中使用的相同方式访问这些应用程序中的任何 .NET 库或服务器端功能。其中一项功能是使用 HTTP 客户端实例向第三方 Web API 发出 HTTP 请求。在本教程中，我将向您展示创建 HTTP 客户端实例的不同方法。我还将向您展示如何使用第三方 API 在 Blazor 服务器应用程序中获取和显示数据。下载：Download S..

在我之前的文章 Blazor 组件初学者指南中，我介绍了组件参数，并向您展示了如何将数据作为参数传递给 Blazor 组件以自定义其功能。在这篇文章中，我将更进一步，向您展示如何将一个或多个 UI 模板作为参数传递到称为模板化组件的不同类型的 Blazor 组件中。下载：Download Source CodeBlazor 模板化组件概述Blazor 模板化组件是一种接受一个或多个 UI 模板作为参数的组件。这有助于组件的可重用性，因为您只需要创建一次模板化组件，然后使用该组件的每个页面都可以提..

检查传入的请求 URL 并将它们路由到适当的视图或页面是每个单页应用程序 (SPA) 框架的基本功能。 Blazor Server 和 WebAssembly 应用程序还支持使用一些内置组件和服务进行路由。 在本教程中，我将介绍在 Blazor 应用中实现路由所需的所有内容。Blazor 应用中的路由配置在开始为不同的 Blazor 组件/页面创建路由之前，我们需要了解 Blazor 服务器应用程序如何集成到 ASP.NET Core 端点路由中。 Blazor 服务器应用程序通过 SignalR..

Blazor 应用程序是多个相互交互的 Blazor 组件的集合，我们还可以在其他父组件中使用子组件。在实际应用中，将数据或事件信息从一个组件传递到另一个组件是一种非常常见的场景。也许您有一个页面，其中一个组件中发生的用户操作需要更新其他组件中的某些 UI。这种类型的通信通常使用 EventCallback 委托进行处理。在本教程中，我们将介绍如何使用 EventCallback 在父组件和子组件之间进行通信。以下是使用 EventCallback 从子组件到父组件进行通信所涉及的常见步骤。在子..

![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/a30c91f6ef1ae9b2b3359d897f5bb1fb.png如果您正在开发交互式 Web 应用程序，根据不同的应用程序事件和用户操作动态更新用户界面是非常常见的做法。这些操作会引发事件，作为开发人员，我们的工作是使用一些事件处理技术来处理这些事件。 Blazor 内置支持处理多个事件，例如 onclick、onchange 和 onmousemove 等，它还为开发人员提供了多种处理这些

如今，大多数网络应用程序要么在页面上显示某种数据，要么使用表单从用户那里收集数据。这意味着每个 SPA 框架都必须支持数据绑定，以便开发人员可以将数据与标签、表单控件等元素进行绑定。 Blazor 组件内置了对数据绑定的支持，它们同时支持单向和双向数据使用多种技术进行绑定。在本教程中，我将通过一个简单的卡片设计器示例介绍 Blazor 数据绑定功能的基础知识，其中用户将能够实时查看其卡片设计的更新情况。下载：Download Source CodeBlazor 数据绑定单向绑定双向绑定实战应用总结..

下载: Download Source Code.文章目录Blazor 组件概述在 Visual Studio 2019 中创建 Blazor 组件拆分 Blazor 组件标记和代码使用基类拆分组件使用分部类拆分组件创建和使用子组件使用参数自定义 Blazor 组件将路由参数传递给 Blazor 组件总结概括Blazor 组件概述Blazor 组件是 UI 的一个独立部分，例如页面、侧边栏菜单、联系表单或仪表板小部件等。它包括用于呈现 UI 的 HTML 标记和用于处理数据或处理用户事件。组件可以相互

如果您一直在了解 .NET 世界的最新发展趋势，那么您现在一定听说过 Blazor。目前在 .NET 社区中对 Blazor 进行了大量炒作，这种炒作的最常见原因是它引入了大多数 .NET 开发人员几十年来一直梦想的东西，即不仅可以在服务器上运行 C#但也在浏览器中。 Blazor 允许我们使用 HTML、CSS 和 C# 而不是 JavaScript 来构建交互式 Web 应用程序。在本教程中，我将介绍 Blazor 的基本概念，并将概述可用于 Blazor 的不同托管模型。我还将介绍每种托管模型的优..

目前，我们在页面内部显示了一个组件，但是内容是静态的。我们真正想要的是能够动态输出内容。如果我们更改/Components/MyFirstComponent.razor的内容，我们可以引入一个私有成员，并使用@符号输出该成员的值。 <div> CurrentCounterValue in MyFirstComponent is @CurrentCounterValue </div> @code { private int Curren

在客户端应用程序中，创建一个名为Components的新文件夹。这不是一个特殊的名称，我们可以选择任何希望的名称。创建新的Components文件夹后，在其中创建一个名为MyFirstComponent.razor的文件，然后输入以下标记。 <div> <h2>This is my first component</h2> </div>现在编辑Index.razor文件。此时，我们可以使用完全限定的名称来引用该组件：&l

所有渲染的Blazor视图均来自ComponentBase类，其中包括Layouts，Pages和Components。Blazor页面本质上是具有@page指令的组件，该指令指定浏览器必须导航到的URL，以便呈现该URL。实际上，如果我们比较组件和页面的生成代码，则几乎没有什么不同。可以在Counter.razor.g.cs中的obj \ Debug \ netcoreapp3.0 \ Razor \ Pages文件夹中找到以下生成的源代码。 namespace MyFirstBlazorA.

指定@layout（显式或通过_Imports.razor文件）时，Blazor将使用LayoutAttribute装饰生成的目标类。 [Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))] public class AdminUsers : Microsoft.AspNetCore.Components.ComponentBase { }注意：生成的.cs文件可以在项目的obj \ D

指定应用程序的默认布局指定布局的最通用方法是编辑**/Pages/_Imports.razor**文件，然后编辑单行代码以标识其他布局。@layout MainLayout布局的名称是强类型的。 Blazor仅在存在具有指定名称的布局的情况下才正确语法突出显示代码，如果标识符不正确，则编译器也会失败。注意：显然，如果您只想更改现有布局的外观，则可以更改**/Shared/MainLayout.razor**文件。为应用程序区域指定默认模板如果您的应用程序具有单独的区域，例如“管理员”区域，

对应打算用作页面布局模板的任何内容都必须来自LayoutComponentBase类。为了表明您希望页面内容出现的位置，您只需输出Body属性的内容。 @inherits LayoutComponentBase <div class="main"> <header> <h1>This is the header</h1> </header> <div class="conte

Blazor布局类似于母版页的ASP Webforms概念，并且与ASP MVC中的Razor布局相同。Web上几乎每个网站都有一个模板，该模板可在整个网站（页面顶部的品牌，底部的版权）或网站的特定子部分（例如管理员的特定菜单结构）中使用网站页面）。这是通过创建一个用作当前页面内容周围的HTML包装程序的视图来实现的，该模板包含一个占位符，用于指示应在其中显示所包装页面内容的位置。 <h1>This is the start of my reusable layout</h1&

1.安装 Blazor环境Blazor服务器端和WebAssembly现在都作为.NET Core 3.2.0的一部分提供。现在，安装Blazor就像安装Visual Studio版本16.6或更高版本一样简单！您可以通过以下链接下载最新版本的Visual Studio。安装时，请确保在“工作负载”选项卡下选择选项ASP.NET和Web开发。2.创建一个新项目打开Visual Studio预览。单击创建一个新项目。选择Blazor应用。点击下一步。输入项目名称，例如MyFirstBla

Blazor当前具有两种托管模型，服务器端Blazor和Web Assembly。服务器端托管于2019年9月发布，Web Assembly于2020年5月正式发布。Blazor Web Assembly优点Web Assembly在浏览器内部的客户端上运行，因此可以将其部署为静态文件。尽管如此，由于浏览器安全限制，Blazor Wasm应用程序将无法直接从本地文件系统运行。Blazor Wasm可以离线工作。当与服务器的网络连接断开时，客户端应用可以继续运行（显然，它无法与服务器通信以检索新数据

Blazor是单页应用程序开发框架。 Blazor名称是Browser和Razor（.NETHTML视图生成引擎）一词的组合/突变。含义是Blazor不必在服务器上执行Razor视图才能将HTML呈现给浏览器，而是能够在客户端上执行这些视图。Blazor还支持在服务器上执行SPA。Blazor的不同Blazor与Silverlight不同，后者是Microsoft以前托管浏览器内应用程序的尝试。 Silverlight需要一个浏览器插件才能在客户端上运行，这使其无法在iOS设备上运行。Bla.