Skip to content

Instantly share code, notes, and snippets.

Loving BLAZOR!

Howard Richards conficient

Loving BLAZOR!
View GitHub Profile
conficient / NugetManager.cs
Created Nov 20, 2020 — forked from cpyfferoen/NugetManager.cs
NuGet API wrapper to search/install packages WITH AUTHENTICATION the same way Nuget.Exe/Client does it - looks up CredentialProviders and plugins (also for Credentials). Specific use case was Azure DevOps feed access.
View NugetManager.cs
using NuGet.Common;
using NuGet.Configuration;
using NuGet.Credentials;
using NuGet.PackageManagement;
using NuGet.Packaging;
using NuGet.Packaging.Core;
using NuGet.Packaging.Signing;
using NuGet.ProjectManagement;
using NuGet.Protocol;
using NuGet.Protocol.Core.Types;
conficient / Loading.razor
Created Sep 1, 2020
Loading content control for Razor
View Loading.razor
/* shows a loading gif/text if a value is null */
@if (Value == null)
<div><img src="/img/SmallLoader.gif" alt="loading" /> Loading</div>
@code {
conficient / Test.cs
Last active Aug 6, 2020
IEnumerable does not protect your list..
View Test.cs
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System;
using System.Collections.Generic;
namespace Tests
public class Test
conficient / GreyOutZone.razor
Created Jul 30, 2020
Blazor - GreyOutZone - adapted from FlightFinder but with embedded styles so works stand-alone
View GreyOutZone.razor
@* creates a container component that greys-out the content when the `IsGreyedOut` parameter is set to true *@
<div style="@(IsGreyedOut ? greyout : null)">
<div style="@cover"></div>
@code {
const string greyout = "position: absolute; width: 100%; min-height: 100%;";
const string cover = "background: rgba(150, 150, 150, 0.5); position: absolute; width: 100%; height: 100%; z-index: 1;";
conficient / SizeCheck.razor
Last active Jul 30, 2020
Blazor SizeCheck - puts a small badge top-right of the screen on Bootstrap 4.x - see also the DevOnly component
View SizeCheck.razor
@* see DevOnly at *@
@* a small coloured badge appears on the top right of the screen to show the current Bootstrap 4.x
screen breakpoint (see
This component can be put into your `MainLayout.razor` template so it appears on every page.
It's wrapped in a `<DevOnly>` component, so will only render in Debug mode. In production it won't appear.
<div style="position:absolute; top: 10px; right: 10px;">
<span class="badge badge-primary d-none d-xl-inline">xl</span>
<span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>
conficient / DevOnly.razor
Created Jul 30, 2020
Blazor DevOnly component - only show the content of the component in Development mode
View DevOnly.razor
@using Microsoft.Extensions.Hosting
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
@if (isDevelopment)
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
conficient /
Last active Jun 24, 2020
AppSettings - in different environments


In a JSON file, appsettings can be a nested heirachy, e.g.

    "Top": {
        "Second": {
            "Key": "value"
conficient / AppState.cs
Created Sep 13, 2019
Blazor - State machines with events - example from FlightFinder
View AppState.cs
using FlightFinder.Shared;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;
namespace FlightFinder.Client.Services
public class AppState
conficient / BlazorModalExample.razor
Last active Dec 25, 2020
Blazor Modal Dialog with no JS interop
View BlazorModalExample.razor
<button class="btn btn-primary" @onclick="@ModalShow">Show Dialog!</button>
@if (showModal)
<div class="modal fade show" id="myModal" style="display:block" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
View tinyMCE.html
<!DOCTYPE html>
<script src="//"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<textarea>Easy (and free!) You should check out our premium features.</textarea>
You can’t perform that action at this time.