外贸视频网站,友情链接交换统计表,咖啡色网站模板,电商网站建设与运营哦帘粤萌显Blazor 是由Microsoft开发的一款基于.NET的开源交互式Web UI框架。Blazor使开发人员能够使用C#和HTML建立全堆栈的单页应用程序#xff0c;并避免使用JavaScript。Blazor基于组件模型#xff0c;该模型提供了以具有强类型的符合Razor标准的页面和组件的形式构建用户界…帘粤萌显Blazor 是由Microsoft开发的一款基于.NET的开源交互式Web UI框架。Blazor使开发人员能够使用C#和HTML建立全堆栈的单页应用程序并避免使用JavaScript。Blazor基于组件模型该模型提供了以具有强类型的符合Razor标准的页面和组件的形式构建用户界面的能力。Blazor的加入使得.NET开发人员有机会在客户端和服务器上使用同一种编程模型同时享受到.NET的优势比如其功能强大的运行时标准库语言互操作性和辅助开发者高效开发的工具等。在Blazor中有两个主要的托管模型Blazor Server: 在此模式下应用程序在服务器端运行并使用SignalR实时通讯框架与浏览器进行交互。这种模型要求永久的有效连接但是客户端的计算和下载需求会大大减低所有的逻辑运行都在服务器端。Blazor WebAssembly: 在此模式下应用程序直接在客户端的WebAssembly中运行允许C#代码在浏览器中执行不依赖服务器。Blazor 支持的浏览器下表所示的浏览器在移动平台和桌面平台上均支持 Blazor WebAssembly 和 Blazor Server。浏览器VersionApple Safari当前版本Google Chrome当前版本Microsoft Edge当前版本Mozilla Firefox当前版本Blazor三种托管模型及其各自特点1、Blazor Server简介Blazor Server 应用程序在服务器上运行可享受完整的 .NET Core 运行时支持。所有处理都在服务器上完成UI/DOM 更改通过 SignalR 连接回传给客户端。这种双向 SignalR 连接是在用户第一次从浏览器中加载应用程序时建立的。 由于 .NET 代码已经在服务器上运行因此您无需为前端创建 API。您可以直接访问服务、数据库等并在传统的服务端技术上做任何您想做的事情。在客户端上Blazor 脚本 (blazor.server.js) 与服务器建立 SignalR 连接。 脚本由 ASP.NET Core 共享框架中的嵌入资源提供给客户端应用。 客户端应用负责根据需要保持和还原应用状态。Blazor Server 托管模型优点下载项大小明显小于 Blazor WebAssembly 应用且应用加载速度快得多。应用可以充分利用服务器功能包括对 .NET Core API 的使用。服务器上的 .NET Core 用于运行应用因此调试等现有 .NET 工具可按预期正常工作。支持瘦客户端。 例如Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。应用的 .NET/C# 代码库其中包括应用的组件代码不适用于客户端。Blazor Server 托管模型局限性通常延迟较高。 每次用户交互都涉及到网络跃点。不支持脱机工作。 如果客户端连接失败应用会停止工作。若要缩放具有许多用户的应用需要使用服务器资源处理多个客户端连接和客户端状态。需要 ASP.NET Core 服务器为应用提供服务。 无服务器部署方案不可行例如通过内容分发网络 (CDN) 为应用提供服务的方案。2、Blazor WebAssembly简介Blazor WebAssemblyWASM应用程序在浏览器中基于WebAssembly的.NET运行时运行客户端。Blazor应用程序及其依赖项和.NET运行时被下载到浏览器中。该应用程序直接在浏览器的UI线程上执行。UI更新和事件处理在同一进程中进行。应用程序的资产被作为静态文件部署到能够为客户提供静态内容的网络服务器或服务上。当Blazor WebAssembly应用被创建用于部署而没有后端ASP.NET Core应用为其提供文件时该应用被称为独立的Blazor WebAssembly应用。当应用程序被创建用于部署并有一个后端应用程序为其提供文件时该应用程序被称为托管的Blazor WebAssembly应用程序。Blazor WebAssembly 托管模型优点从服务器下载应用后没有 .NET 服务器端依赖项因此如果服务器脱机应用将保持正常运行。可充分利用客户端资源和功能。工作可从服务器转移到客户端。无需 ASP.NET Core Web 服务器即可托管应用。 无服务器部署方案可行例如通过内容分发网络 (CDN) 为应用提供服务的方案。Blazor WebAssembly 托管模型局限性应用仅可使用浏览器功能。需要可用的客户端硬件和软件例如 WebAssembly 支持。下载项大小较大应用加载耗时较长。Blazor WebAssembly 支持预先 (AOT) 编译你可以直接将 .NET 代码编译到 WebAssembly 中。 AOT 编译会提高运行时性能代价是应用大小增加。3、Blazor Hybrid简介Blazor 还可用于使用混合方法生成本机客户端应用。 混合应用是利用 Web 技术实现其功能的本机应用。 在 Blazor Hybrid 应用中Razor 组件与任何其他 .NET 代码一起直接在本机应用中而不在 WebAssembly 上运行并通过本地互操作通道基于 HTML 和 CSS 将 Web UI 呈现到嵌入式 Web View 控件。可以使用不同的 .NET 本机应用框架包括 .NET MAUI、WPF 和 Windows 窗体生成 Blazor Hybrid 应用。 Blazor 提供 BlazorWebView 控件将 Razor 组件添加到使用这些框架生成的应用。 通过结合使用 Blazor 和 .NET MAUI可以便捷地生成适用于移动和桌面的跨平台 Blazor Hybrid 应用而将 Blazor 与 WPF 和 Windows 窗体集成可以更好地实现现有应用的现代化。由于 Blazor Hybrid 应用是本机应用它们可以支持只有 Web 平台所没有的功能。 通过正常的 .NET APIBlazor Hybrid 应用对本机平台功能具有完全访问权限。 Blazor Hybrid 应用还可以与现有 Blazor Server 或 Blazor WebAssembly 应用共享和重复使用组件。 Blazor Hybrid 应用结合了 Web、本机应用和 .NET 平台的优点。Blazor Hybrid 托管模型优点重复使用可在移动、桌面和 Web 之间共享的现有组件。利用 Web 开发技能、体验和资源。应用对设备的本机功能具有完全访问权限。Blazor Hybrid 托管模型局限性必须为每个目标平台生成、部署和维护单独的本机客户端应用。与在浏览器中访问 Web 应用相比查找、下载和安装本机客户端应用通常需要更长的时间。2、安装 .NET SDK 和 Visual Studio/VS Code如何安装.NET SDK是否单独安装.NET SDK取决于你使用的开发工具如果选择使用Visual Studio开发则不需要单独安装.NET SDK如果选择使用VS Code进行开发则需要单独安装.NET SDK。1. 下载 .NET SDK打开浏览器访问 .NET 官方下载页面。在页面中选择最新版本的 .NET SDK通常会有多个版本可供选择。建议选择最新或稳定版本根据你的需求而定。2. 安装 .NET SDK下载完成后双击运行下载的安装程序。按照安装向导的提示进行安装。一般情况下我们可以接受默认设置。安装完成后重新启动计算机如果有提示的话。3. 验证安装安装完成后我们需要验证 .NET SDK 是否安装成功。打开命令提示符cmd或 PowerShell输入以下命令dotnet --version如果您看到版本号的输出那就表示您成功安装了 。如何安装Visual Studio这里我们以VS2022为例1. 下载打开官网下滑找到如下界面点击下载下拉菜单选择Community2022这个是免费的进行下载。下载后得到安装包VisualStudioSetup.exe如下图所示。2. 安装双击下载的安装包打开》点击继续等待下载安装完成》选择需要的应用程序和组件以及相应的SDK左下角修改安装路径和缓存路径。在选择安装路径时要注意以下两点缓存文件与安装文件不能放一起即二者的安装路径不能一样安装路径中不要出现中文否则之后容易报错或者安装不成功路径选择好后点击右下角安装出现如下安装界面等待安装即可安装时间较长请耐心等待安装完成后会出现“安装完毕”的提示点击确定即可。下一步点击“重启”按钮即可。如何安装VS Code下载并安装在官网首页选择适合你操作系统的版本进行下载。下载完成后双击安装包进行安装。1.下载访问VSCode官网首先打开浏览器访问VSCode官网地址https://code.visualstudio.com/点击Download下载2.安装下载后直接点击打开文件将选项都选中尤其注意添加到PATH。然后点击下一步进入安装页面等待安装完毕。安装完成点击完成并打开vscode。3、创建第一个 Blazor Server 和 Blazor WebAssembly 项目已Visual Studio 2022 为例1.Blazor Server 项目在这里我们创建一个Blazor Server 模式的程序。启动 Visual Studio 2022 并选择“创建新项目”。在“创建新项目”窗口中在搜索框中键入 Blazor Server然后按 Enter。选择“Blazor Server 应用”模板并选择“下一步”。在“配置新项目”窗口中输入 BlazorApp 作为项目名称然后选择“下一步”。在“其他信息”窗口中如果尚未选择则在“框架”下拉列表中选择“.NET 6.0 ”然后单击“创建”按钮。项目文件说明wwwroot 文件夹包含应用的公共静态资产如 CSS、JavaScript 文件等。Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。App.razor 为应用的根组件。Pages 目录包含应用的一些示例网页。BlazorApp.csproj 定义应用项目及其依赖项且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。运行应用单击 Visual Studio 调试工具栏中的“开始调试”按钮(绿色箭头)以运行应用。首次在 Visual Studio 中运行 Web 应用时它将设置用于通过 HTTPS 托管应用的开发证书然后提示你信任该证书。建议同意信任该证书。证书将仅用于本地开发如果没有证书大多数浏览器都会对网站的安全性进行投诉。等待应用在浏览器中启动。转到以下页面后你已成功运行第一个 Blazor 应用!2.Blazor WebAssembly 项目添加新项目上面我们已经创建了一个Blazor Server的项目现在我们可以直接在当前解决方案中继续创建Blazor WebAssembly 项目或者重新打开VS 2022 进行创建都是可以的这里我们就直接在当前解决方案中来进行创建新项目。点击解决方案》鼠标右键》添加》新建项目在“创建新项目”窗口中在搜索框中键入 Blazor WebAssembly然后按 Enter。选择“Blazor WebAssembly 独立应用”模板并选择“下一步”。在“配置新项目”窗口中输入 BlazorAppWasm 作为项目名称然后选择“下一步”。在“其他信息”窗口中如果尚未选择则在“框架”下拉列表中选择“.NET 6.0 ”然后单击“创建”按钮。项目文件说明wwwroot 文件夹包含应用的公共静态资产如 CSS、JavaScript 文件等。Pages 文件夹包含可路由的 Razor 组件每个页面的路由通过 page 指令指定。Shared 文件夹包含共享组件如布局组件。Program.cs应用的入口点用于设置 WebAssembly 主机注册服务和配置应用。App.razor应用的根组件使用 Router 组件设置客户端路由。运行应用将此项目设为启动项单击 Visual Studio 调试工具栏中的“开始调试”按钮(绿色箭头)以运行应用。等待应用在浏览器中启动。转到以下页面后你已成功运行第一个 Blazor WebAssembly 应用!使用VS Code创建Blazor项目教程 https://dotnet.microsoft.com/zh-cn/learn/aspnet/blazor-tutorial/create3.如何选择要使用的托管模型根据应用的功能要求选择 Blazor 托管模型。 下表显示了选择托管模型的主要注意事项。Blazor Hybrid 应用包括 .NET MAUI、WPF 和 Windows 窗体框架应用。功能Blazor ServerBlazor WebAssembly (WASM)Blazor Hybrid与 .NET API 完全兼容??支持????支持直接访问服务器和网络资源??支持?不支持??不支持?较小的有效负载较快的初始加载速度??支持????接近本机执行速度??支持??支持???支持服务器上安全且专用的应用代码??支持?不支持??不支持?下载后即可脱机运行应用????支持??支持静态站点托管????支持??将处理过程转移至客户端????支持??支持对本机客户端功能具有完全访问权限??????支持基于 Web 的部署??支持??支持???Blazor WebAssembly 和 Blazor Hybrid 应用可以使用基于服务器的 API 来访问服务器/网络资源并访问专用和安全的应用代码。?Blazor WebAssembly 仅通过预先 (AOT) 编译达到接近本机性能。总之Blazor 的三种模式各有特点可以根据应用场景选择适当的模式。如果需要访问服务器端资源或者需要实现实时通信功能可以选择 Server 模式如果需要实现离线访问或者减少网络流量可以选择 WebAssembly 模式如果需要兼顾两种模式的优势可以选择 Hybrid 模式。4、理解组件化开发思想1. 组件化核心理念什么是组件化组件化是将UI拆分为独立、可复用、自包含的代码单元的思想。在Blazor中每个组件都是一个完整的功能模块。// 传统方式 vs 组件化方式// 传统整个页面写在一起// 组件化拆分为多个职责单一的小组件// 传统方式 vs 组件化方式// 传统整个页面写在一起// 组件化拆分为多个职责单一的小组件2. Blazor组件的基本结构Razor组件示例计数器组件当前计数: currentCount点击 1code {private int currentCount 0;[Parameter]public int InitialCount { get; set; }[Parameter]public EventCallback OnCountChanged { get; set; }private void IncrementCount(){currentCount;OnCountChanged.InvokeAsync(currentCount);}protected override void OnInitialized(){currentCount InitialCount;}}计数器组件当前计数: currentCount点击 1code {private int currentCount 0;[Parameter]public int InitialCount { get; set; }[Parameter]public EventCallback OnCountChanged { get; set; }private void IncrementCount(){currentCount;OnCountChanged.InvokeAsync(currentCount);}protected override void OnInitialized(){currentCount InitialCount;}}3. 组件化的核心特征3.1 封装性UserNameEmail注册时间: JoinDate.ToString(yyyy-MM-dd)code {[Parameter] public string UserName { get; set; } string.Empty;[Parameter] public string Email { get; set; } string.Empty;[Parameter] public string AvatarUrl { get; set; } string.Empty;[Parameter] public DateTime JoinDate { get; set; }}UserNameEmail注册时间: JoinDate.ToString(yyyy-MM-dd)code {[Parameter] public string UserName { get; set; } string.Empty;[Parameter] public string Email { get; set; } string.Empty;[Parameter] public string AvatarUrl { get; set; } string.Empty;[Parameter] public DateTime JoinDate { get; set; }}3.2 可复用性UserName张三Emailzhangsanemail.comAvatarUrl/images/avatar1.jpgJoinDatenew DateTime(2023, 1, 1) /UserName李四Emaillisiemail.comAvatarUrl/images/avatar2.jpgJoinDatenew DateTime(2023, 2, 1) /UserName张三Emailzhangsanemail.comAvatarUrl/images/avatar1.jpgJoinDatenew DateTime(2023, 1, 1) /UserName李四Emaillisiemail.comAvatarUrl/images/avatar2.jpgJoinDatenew DateTime(2023, 2, 1) /3.3 数据传递ItemstodosOnItemAddedHandleItemAddedOnItemDeletedHandleItemDeleted /code {private List todos new();private void HandleItemAdded(TodoItem newItem){todos.Add(newItem);StateHasChanged();}private void HandleItemDeleted(TodoItem deletedItem){todos.Remove(deletedItem);StateHasChanged();}}ItemstodosOnItemAddedHandleItemAddedOnItemDeletedHandleItemDeleted /code {private List todos new();private void HandleItemAdded(TodoItem newItem){todos.Add(newItem);StateHasChanged();}private void HandleItemDeleted(TodoItem deletedItem){todos.Remove(deletedItem);StateHasChanged();}}3.4 组件组合4. 高级组件化模式4.1 渲染片段Title×ChildContentFooterContentcode {[Parameter] public string Title { get; set; } string.Empty;[Parameter] public bool IsVisible { get; set; }[Parameter] public RenderFragment ChildContent { get; set; }[Parameter] public RenderFragment FooterContent { get; set; }[Parameter] public EventCallback OnClose { get; set; }private void Close() OnClose.InvokeAsync();}Title×ChildContentFooterContentcode {[Parameter] public string Title { get; set; } string.Empty;[Parameter] public bool IsVisible { get; set; }[Parameter] public RenderFragment ChildContent { get; set; }[Parameter] public RenderFragment FooterContent { get; set; }[Parameter] public EventCallback OnClose { get; set; }private void Close() OnClose.InvokeAsync();}4.2 泛型组件typeparam TItemforeach (var column in Columns){column.Title}foreach (var item in Items){foreach (var column in Columns){column.Value(item)}}code {[Parameter] public IEnumerable Items { get; set; } null!;[Parameter] public List Columns { get; set; } new();}public class ColumnDefinition{public string Title { get; set; } string.Empty;public Func Value { get; set; } null!;}typeparam TItemforeach (var column in Columns){column.Title}foreach (var item in Items){foreach (var column in Columns){column.Value(item)}}code {[Parameter] public IEnumerable Items { get; set; } null!;[Parameter] public List Columns { get; set; } new();}public class ColumnDefinition{public string Title { get; set; } string.Empty;public Func Value { get; set; } null!;}5、学习 Razor 语法基础Razor语法简介Razor 是一种轻量级的标记语法用于将服务器端代码如 C# 或 VB.NET嵌入到 HTML 页面中。它广泛用于 ASP.NET Web 应用程序开发支持动态内容生成。核心语法规则Razor 代码块包含在 { ... } 中内联表达式变量和函数以 开头例如 DateTime.Now代码语句用分号结束变量使用 var 关键字声明字符串用引号括起来C# 代码区分大小写C# 文件的扩展名是 .cshtml使用示例基本用法示例{var UserName CSharp精选营;var currentTime DateTime.Now;}欢迎来到UserName 当前时间是: currentTime{var UserName CSharp精选营;var currentTime DateTime.Now;}欢迎来到UserName 当前时间是: currentTime输出: Hello, Razor! 当前时间是: 2023-10-13 10:30:00条件判断 if, else if, else, and switch{var hour DateTime.Now.Hour;var message hour 12 ? 下午好 : 上午好;}message{var hour DateTime.Now.Hour;var message hour 12 ? 下午好 : 上午好;}message输出: 根据当前时间显示“上午好”或“下午好”。循环结构Razor 支持多种循环如 for, foreach, whiledo while 等。for (int i 1; i 5; i) {第 i 项}for (int i 1; i 5; i) {第 i 项}输出: 生成一个包含 5 项的无序列表。动态用户输入处理Razor 可以通过 Request[参数名] 获取用户输入。{var name Request[name] ?? 游客;}欢迎, name!{var name Request[name] ?? 游客;}欢迎, name!