Global Developers, CIOs and CTOs
Chrome 69.09%
Firefox 12.51%
Internet Explorer 7.86%
Safari 5.60%
Edge 3.27%
Opera 0.79%
Opera Mini 0.18%
Safari (in-app) 0.18%
Android Browser 0.10%
UC Browser 0.09%
using System.Security.Claims;
using Microsoft.AspNetCore.Authorization; // dotnet add package Microsoft.AspNetCore.Authorization
namespace BlazorServer.Common
{
public static class PolicyTypes
{
public const string RequireAdmin = nameof(RequireAdmin);
public const string RequireCustomer = nameof(RequireCustomer);
public const string RequireEmployee = nameof(RequireEmployee);
public const string RequireEmployeeOrCustomer = nameof(RequireEmployeeOrCustomer);
public static AuthorizationOptions AddAppPolicies(this AuthorizationOptions options)
{
options.AddPolicy(RequireAdmin, policy => policy.RequireRole(ConstantRoles.Admin));
options.AddPolicy(RequireCustomer, policy =>
policy.RequireAssertion(context =>
context.User.HasClaim(claim => claim.Type == ClaimTypes.Role
&& (claim.Value == ConstantRoles.Admin || claim.Value == ConstantRoles.Customer))
));
options.AddPolicy(RequireEmployee, policy =>
policy.RequireAssertion(context =>
context.User.HasClaim(claim => claim.Type == ClaimTypes.Role
&& (claim.Value == ConstantRoles.Admin || claim.Value == ConstantRoles.Employee))
));
options.AddPolicy(RequireEmployeeOrCustomer, policy =>
policy.RequireAssertion(context =>
context.User.HasClaim(claim => claim.Type == ClaimTypes.Role
&& (claim.Value == ConstantRoles.Admin ||
claim.Value == ConstantRoles.Employee ||
claim.Value == ConstantRoles.Customer))
));
return options;
}
}
} namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddAuthorization(options => options.AddAppPolicies());
// ... namespace BlazorWasm.Client
{
public class Program
{
public static async Task Main(string[] args)
{
// ...
builder.Services.AddAuthorizationCore(options => options.AddAppPolicies());
// ...
}
}
} @page "/hotel-room-details/{Id:int}"
// ...
@*
@attribute [Roles(ConstantRoles.Customer, ConstantRoles.Employee)]
*@
@attribute [Authorize(Policy = PolicyTypes.RequireEmployeeOrCustomer)] <AuthorizeView Policy="@PolicyTypes.RequireEmployeeOrCustomer">
<p>You can only see this if you're an admin or an employee or a customer.</p>
</AuthorizeView> dotnet add package Blazored.TextEditor
libman install quill --provider unpkg --destination wwwroot/lib/quill
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorServer.App</title>
<base href="~/" />
<link href="lib/quill/dist/quill.snow.css" rel="stylesheet" />
<link href="lib/quill/dist/quill.bubble.css" rel="stylesheet" /> <script src="lib/quill/dist/quill.min.js"></script> <script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script> <script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script> <script src="_framework/blazor.server.js"></script> </body>
@using Blazored.TextEditor
<div class="form-group">
<label>Details</label>
@*<InputTextArea @bind-Value="HotelRoomModel.Details" class="form-control"></InputTextArea>*@
<BlazoredTextEditor @ref="@QuillHtml">
<ToolbarContent>
<select class="ql-header">
<option selected=""></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</ToolbarContent>
<EditorContent>
</EditorContent>
</BlazoredTextEditor>
</div> <BlazoredTextEditor @ref="@QuillHtml">
@code
{
private BlazoredTextEditor QuillHtml; 
<div class="form-group pb-4" style="height:250px;">
<label>Details</label>
<BlazoredTextEditor @ref="@QuillHtml" Placeholder="Please enter the room's detail"> private async Task SetHTMLAsync()
{
if(!string.IsNullOrEmpty(HotelRoomModel.Details))
{
await QuillHtml.LoadHTMLContent(HotelRoomModel.Details);
}
} protected override async Task OnInitializedAsync()
{
if (Id.HasValue)
{
// Update Mode
Title = "Update";
HotelRoomModel = await HotelRoomService.GetHotelRoomAsync(Id.Value);
await SetHTMLAsync();
}
// ...
} private async Task HandleHotelRoomUpsert()
{
// ...
// Create Mode
HotelRoomModel.Details = await QuillHtml.GetHTML();
// ...
} protected override async Task OnAfterRenderAsync(bool firstRender)
{
await SetHTMLAsync();
} private async Task SetHTMLAsync()
{
if(!string.IsNullOrEmpty(HotelRoomModel.Details))
{
await QuillHtml.LoadHTMLContent(HotelRoomModel.Details);
StateHasChanged();
}
} protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender)
{
return;
}
while (true)
{
try
{
await SetHTMLAsync();
break;
}
catch
{
await Task.Delay(100); // Quill needs some time to load
}
}
} 
15 Essential Free Icon Sets
Improve how you architect webapps
Patterns.dev is a free online resource design, render, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.
By creators, we mean enthusiasts who create content for Blogs, YouTube, Twitch, Books, and tutorial platforms (e.g. Pluralsight). The content can be free or paid.
"7 days. Thousands of free courses. Unlimited potential. Sign up for #FreeWeek to build in-demand tech skills 10/12-10-18.
Look no further! This free collection of beautiful long text shadows includes the fonts, colors, and CSS code to render it for your own site.
