做服务的网站起名,视觉中国设计网站,工程业绩在建设厅网站都能查到,杭州建设网杨赟#xff2e;#xff2f;#xff37;现在行动#xff01;Blazor是一个基于C##xff0c; Razor和 HTML的新的Web UI框架。它通过WebAssembly运行在浏览器中。有利于使用C#而不是JavaScript构建交互式的Web UI。这篇文章演示了如何使用Blazor构建SPA应用。Blazor简化了可在任… 现在行动Blazor是一个基于C# Razor和 HTML的新的Web UI框架。它通过WebAssembly运行在浏览器中。有利于使用C#而不是JavaScript构建交互式的Web UI。这篇文章演示了如何使用Blazor构建SPA应用。Blazor简化了可在任何浏览器中运行的快速且美观的SPA的任务。它通过使开发人员能够编写基于Dotnet的Web应用程序来实现此目的。这些应用程序可以在使用了开放Web标准的浏览器中运行。让我们开始使用Blazor吧。在这篇文章中我们将讨论一下内容主机模型启用身份验证和授权深入了解默认Blazor页面前期准备Visual Sudtion 2019Install .NET Core 3.1安装Blazor项目模版主机模型Hosting models你有两种选择来托管应用程序。首先在服务器端使用Razor组件接下来在浏览器中将应用程序作为Web Assembly运行。服务器端支持在 ASP.NETCore 应用程序的服务器上托管 Razor组件。用户交互将通过 SignalR连接和处理。客户端Blazor应用程序以及.NET运行时和其他依赖项已下载到浏览器中。另外你可以在客户端和服务器端之间共享模型、验证和其他业务逻辑。此外你还可以利用在浏览器上直接运行的几个.NET 库。显然每个模型都有其自身的优缺点。特别是它们大多数与依赖性性能浏览器兼容性等有关。选择其中的一种实现方法依赖于你的决定。在本文中我们将以一个示例讨论服务器端托管。但是这个决定不是这篇文章的主要目的。开始使用首先在创建新项目时搜索“Blazor”然后选择“Blazor 应用”。点击“下一步”在出现的页面上输入项目名称并选择适当的项目存储的位置。在下一页上选择要创建的应用程序的类型。为此在这篇文章中我将创建一个“Blazor Server 应用”的应用程序。在创建项目之前点击“身份验证”部分下面的“更改”链接。选择“个人用户账户(I)”并在右侧的下拉选项中选择“存储应用内的用户账户”。其他可用的选项包括“不进行身份验证”、“工作或学校账户”和“Windows 身份验证”。点击“确定”按钮之后点击“创建”按钮实现项目的创建工作。项目创建完成后可以从项目的属性页“调试”选项卡禁用HTTPS。现在我们创建了启用身份验证的Blazor项目运行项目后可以看到以下界面。了解项目结构该项目的结构与MVC应用程序的结构相似你可以在项目中看到 Areas appsetting.json Program.cs、 Startup.cs。除此之外你还可以看到带 razor扩展名的文件这些文件特定于“Blazor”。让我们详细的看一下。Identity — 这个文件夹被创建是因为我们在创建项目时选择了身份验证方法。它具有“AuthenticationStateProvider”类和用于登录和注销的HTML文件。Data — 项目创建时默认情况下会提供与Entity Framework相关的nuget软件包。这个文件夹包含一个迁移文件用于创建和身份验证相关的表例如用户角色等。此外它还包含“DBContext”文件模型和服务。该服务获取默认演示页面的天气预报详细信息。Pages — 如果你是.NET 开发人员可能听说过Razor。Blazor应用程序基于组件。组件是可重用的构建块。它可以是单个控件也可以是具有多个控件的块。这些组件以 Razor标记编写。但是Blazor的上下文中 Razor的主要区别在于它是基于UI 逻辑构建的而不是基于请求/ 响应传递的。启用身份验证和授权要启用身份验证请执行一下步骤。创建存储用户和角色详细的表添加用户和角色实施授权创建表执行 EntityFramework的 update-database命令进行创建表。默认情况下应用程序在 localdb中创建数据库。或者你可以根据需要在 appsetting.json中修改连接字符串。默认迁移会创建于身份验证相关的表例如 AspNetUsers AspNetRoles等。具体操作为选择 工具- Nuget包管理器- 程序包管理器控制台。在界面上输入 update-database。用户注册第一种选择是使用注册界面这将有助于将用户添加到系统中。public void ConfigureServices(IServiceCollection services)
{services.AddDbContextApplicationDbContext(options options.UseSqlServer(Configuration.GetConnectionString(DefaultConnection)));services.AddDefaultIdentityIdentityUser(options {options.Password.RequireNonAlphanumeric false;options.Password.RequireLowercase false;options.Password.RequireUppercase false;options.Password.RequireDigit false;options.SignIn.RequireConfirmedAccount true;}).AddEntityFrameworkStoresApplicationDbContext();services.AddRazorPages();services.AddServerSideBlazor();services.AddScopedAuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProviderIdentityUser();services.AddSingletonWeatherForecastService();
}
实施授权现在我们已经创建了表添加了用户和角色。让我们启用页面授权。Blazor具有用于授权目的的 AuthorizeView组件。此组件根据授权状态进行显示内容。如果页面内容位于 AuthorizeView中则只有授权用户才能看到它。修改 Counter.razor页面内容。AuthorizeViewh1Counter/h1pCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/button
/AuthorizeView
如果你需要为授权和未授权用户显示不同的内容怎么办你可以在 AuthorizeView中使用 Authorized和 NotAuthorized元素这有助于根据授权状态提供不同的内容。AuthorizeViewAuthorizedh1Counter/h1pCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/button/AuthorizedNotAuthorizedYou are not authorized to view this page!/NotAuthorized
/AuthorizeView
深入探索 Blazor页面让我们分析 razor组件并尝试了解它的基本组成部分。我将使用 FetchData.razor进行介绍。page /fetchdata
using BlazorServerApp.Data
inject WeatherForecastService ForecastService
h1Weather forecast/h1
pThis component demonstrates fetching data from a service./p
if (forecasts null)
{pemLoading.../em/p
}
else
{table classtabletheadtrthDate/ththTemp. (C)/ththTemp. (F)/ththSummary/th/tr/theadtbodyforeach (var forecast in forecasts){trtdforecast.Date.ToShortDateString()/tdtdforecast.TemperatureC/tdtdforecast.TemperatureF/tdtdforecast.Summary/td/tr}/tbody/table
}
code {private WeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts await ForecastService.GetForecastAsync(DateTime.Now);}
}
page - 使用 page属性设置组件中的 route属性。这指定组件的路由端点。一个组件可以通过具有多个 page指令来具有多个路由属性。inject - 你可以使用 inject属性将服务注入组件。在该示例中 WeatherForecastService已注入以用于检索数据。你可以通过 Startup.cs中注册他们来使用服务。该服务类似于 ASP.NET CORE MVC。code - 该块包含用于渲染和事件处理的代码。它可以像方法的变量声明一样。有一个类似于 code的东西 function具有相同的功能。从 ASP.NET CORE3.0开始建议使用 code而不是 function。总结简而言之本文试图介绍 Blazor以及如何使用 Blazor创建你的第一个应用程序。除此之外我们还讨论了托管模型身份验证授权的实现以及默认页面中使用的指令。下一步工作除了此篇文章外我还计划写其他几篇文章使用 Blazor和 EntityFrameworkCore进行CRUD操作Blazor中模型验证Blazor应用程序的容器化Blazor的路由
