The intersection of cloud-native architecture and AI capabilities presents exciting opportunities for .NET developers. In this post, I'll walk through a practical implementation that combines .NET Aspire's orchestration capabilities with Ollama's local LLM hosting and the ModelContextProtocol (MCP) for tool usage.

This architecture allows AI models to leverage strongly-typed .NET methods through a clean, extensible interface - enabling us to build applications where LLMs can reason about problems while delegating specific operations to specialized tools.

The Components

Our solution consists of three main parts:

1. AppHost: The .NET Aspire orchestrator that coordinates our distributed application
2. McpServer: A server exposing mathematical operations as tools via ModelContextProtocol
3. ApiService: A web API that connects client requests to the LLM and enables function calling

Let's explore how these components work together.

Setting Up the Aspire Host

First, our AppHost project coordinates the various services:

// AppHost
var builder = DistributedApplication.CreateBuilder(args);

var ollama = builder.AddOllama("ollama")
    .WithDataVolume()
    .WithGPUSupport();

var mistral = ollama.AddModel("mistral", "mistral:7b");

builder.AddProject<Projects.McpServer>("mcpserver");

builder.AddProject<Projects.ApiService>("apiservice")
    .WithReference(mistral)
    .WaitFor(mistral);

builder.Build().Run();

This configuration:

• Sets up an Ollama instance with GPU support and persistent storage
• Loads the Mistral 7B model
• Adds our McpServer and ApiService projects
• Establishes dependencies between services

Creating the MCP Server for Tool Definitions

The McpServer project defines our mathematical tools:

// McpServer
using ModelContextProtocol.Server;
using System.ComponentModel;

var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddMcpServer()
    .WithTools<MathTools>();

var app = builder.Build();

app.MapMcp();

app.Run();

[McpServerToolType]
public sealed class MathTools
{
    [McpServerTool, Description("Calculate the square root of a number.")]
    public static string SquareRoot(double number)
    {
        return number < 0 
            ? "Error: Cannot compute square root of a negative number." 
            : Math.Sqrt(number).ToString("F2");
    }

    [McpServerTool, Description("Calculate the factorial of a non-negative integer.")]
    public static string Factorial(int n)
    {
        if (n < 0)
        {
            return "Error: Factorial is not defined for negative numbers.";
        }
        if (n > 20)
        {
            return "Error: Input too large; maximum supported value is 20 to avoid overflow.";
        }

        long result = 1;
        for (int i = 2; i <= n; i++)
        {
            result *= i;
        }
        return result.ToString();
    }

    [McpServerTool, Description("Raise a number to a power.")]
    public static string Power(double baseNum, double exponent)
    {
        double result = Math.Pow(baseNum, exponent);
        return double.IsNaN(result) || double.IsInfinity(result) 
            ? "Error: Result is undefined or too large." 
            : result.ToString("F2");
    }
}

This server exposes three mathematical operations as tools, each with proper input validation and error handling.

Connecting Everything with the API Service

The ApiService acts as the glue between user requests, the LLM, and our tools:

// ApiService
builder
    .AddKeyedOllamaApiClient(ServiceKeys.Mistral)
    .AddKeyedChatClient()
    .UseFunctionInvocation()

app.MapPost("/ollama", async ([FromKeyedServices(ServiceKeys.Mistral)] IChatClient client, string prompt) =>
{
    var serverConfig = new McpServerConfiguration
    {
        Name = "Ollama Math MCP Server",
        Command = "http://localhost:5062/sse",
        TransportType = McpServerTransportType.Sse
    };

    var mcpTools = await Tools.GetFromMcpServers(serverConfig);

    var tools = mcpTools.Cast<McpClientTool>()
        .Select(t => new McpFunctionAdapter(t))
        .ToList();

    var response = await client.GetResponseAsync(prompt, new ChatOptions
    {
        Tools = [.. tools]
    });

    return response.Text;
});

public class ServiceKeys
{
    public const string Mistral = "mistral";
}

The Crucial Adapter

The McpFunctionAdapter is key to making this work - it bridges the gap between MCP tools and AI functions:

public class McpFunctionAdapter(McpClientTool mcpTool) : AIFunction
{
    private readonly McpClientTool _mcpTool = mcpTool ?? throw new ArgumentNullException(nameof(mcpTool));

    private static readonly JsonSerializerOptions DefaultJsonSerializerOptions = new()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
        Converters = { new JsonStringEnumConverter() }
    };

    public override string Name => _mcpTool.Function?.Name ?? "Unknown Function";

    public override string Description => _mcpTool.Function?.Description ?? "No description available";

    public override IReadOnlyDictionary<string, object?> AdditionalProperties =>
        _mcpTool.Function?.Parameters?.Properties?.ToDictionary(
            kvp => kvp.Key, kvp => new { kvp.Value.Type, kvp.Value.Description }
        ) ?? new Dictionary<string, object?>();

    public override JsonElement JsonSchema => GetJsonSchema();

    public override JsonSerializerOptions JsonSerializerOptions => DefaultJsonSerializerOptions;

    protected override async Task<object?> InvokeCoreAsync(IEnumerable<KeyValuePair<string, object?>> arguments,
        CancellationToken cancellationToken)
    {
        var argsDict = arguments.ToDictionary(kvp => kvp.Key, kvp => kvp.Value);
        return await _mcpTool.InvokeMethodAsync(argsDict);
    }

    private JsonElement GetJsonSchema()
    {
        if (_mcpTool.Function?.Parameters == null)
        {
            return JsonDocument.Parse("{}").RootElement;
        }

        var schema = new
        {
            type = _mcpTool.Function.Parameters.Type,
            properties = _mcpTool.Function.Parameters.Properties?.ToDictionary(
                kvp => kvp.Key, kvp => new { type = kvp.Value.Type, description = kvp.Value.Description }
            ) ?? new Dictionary<string, object?>(),
            required = _mcpTool.Function.Parameters.Required
        };

        var json = JsonSerializer.Serialize(schema, JsonSerializerOptions);
        return JsonDocument.Parse(json).RootElement;
    }
}

This adapter handles:

• Converting between MCP tool definitions and AI function schemas
• Managing parameter serialization/deserialization
• Proper handling of function invocation

Why This Architecture Matters

This implementation pattern offers several advantages:

1. Separation of Concerns: The LLM handles reasoning while specialized .NET code handles computations
2. Type Safety: We get all the benefits of .NET's strong typing and validation
3. Extensibility: Adding new tools is as simple as creating new methods with appropriate attributes
4. Cloud-Native Design: Using .NET Aspire means this solution is ready for containerized deployments

Example Usage

With everything set up, users can send natural language queries to the API endpoint like:

• "What's the square root of 144?"
• "Calculate 5 to the power of 3"
• "What's the factorial of 7?"

The LLM interprets these requests and calls the appropriate mathematical tools to get accurate results.

Technical Details

For this implementation, I used:

• ModelContextProtocol 0.1.0-preview.6
• OllamaSharp.ModelContextProtocol 5.1.9
• .NET 8.0
• Mistral 7B model via Ollama

Conclusion

The integration of .NET Aspire, Ollama, and ModelContextProtocol demonstrates the power of combining cloud-native architecture with AI capabilities. This pattern enables developers to create sophisticated applications where LLMs work alongside traditional code, each playing to their strengths.

As these technologies mature, we can expect to see more patterns emerge for effectively incorporating AI into distributed applications. The clean separation between tool definition and tool usage provided by ModelContextProtocol is particularly promising for building maintainable AI-enhanced systems.

What interesting integrations are you building with these technologies? I'd love to hear about your experiences in the comments below.

In Blazor applications, managing state effectively is crucial for building robust and maintainable applications. As applications grow in complexity, handling state becomes increasingly challenging. This is where Fluxor, a state management library for Blazor, comes into play. In this article, we'll explore how Fluxor simplifies state management in Blazor applications by implementing a simple counter example.

Understanding Fluxor:

Fluxor follows the Flux architecture, a design pattern introduced by Facebook for managing application state in web applications. At its core, Fluxor enforces a unidirectional data flow pattern, which helps in maintaining a predictable state management process.

Key Concepts in Fluxor:

1. Actions: Actions represent events or commands that occur within the application. They trigger state changes by dispatching to reducers.
2. Reducers: Reducers are pure functions responsible for updating the application state based on dispatched actions. They take the current state and an action as input and produce a new state as output.
3. Features: Features are logical groupings of related state, actions, and reducers. Each feature encapsulates its own state and behavior.
4. Effects: Effects handle side effects such as asynchronous operations or interacting with external services. They are triggered in response to dispatched actions.

Implementing a Counter Example with Fluxor:

Let's dive into a simple counter example implemented using Fluxor in a Blazor application.

Register the Fluxor services in the Program.cs file,

builder.Services.AddFluxor(o =>
{
    o.ScanAssemblies(typeof(Program).Assembly);
    o.UseRouting();
#if DEBUG
    o.UseReduxDevTools();
#endif
});

Create a code file and add the following classes and records,

namespace BlazorFluxorStateManagement.Store.CounterUseCase
{
    public record IncrementCounterAction();
}

namespace BlazorFluxorStateManagement.Store.CounterUseCase
{
    [FeatureState]
    public record CounterState
    {
        public int Count { get; init; }

        private CounterState() { }

        public CounterState(int count)
        {
            Count = count;
        }
    }
}

namespace BlazorFluxorStateManagement.Store.CounterUseCase
{
    public class Reducers
    {
        [ReducerMethod(typeof(IncrementCounterAction))]
        public static CounterState ReduceIncrementCounterAction(CounterState state) =>
               state with { Count = state.Count + 1 };
    }
}

In this example, we define an action IncrementCounterAction, a feature state CounterState, and a reducer Reducers to handle the increment action.

@page "/counter"
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @CounterState.Value.Count</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private void IncrementCount()
    {
        Dispatcher.Dispatch(new IncrementCounterAction());
    }
}

This Blazor component represents the counter functionality. It displays the current count and increments it when the button is clicked by dispatching the IncrementCounterAction. Notice that we are inheriting from Fluxor.Blazor.Web.Components.FluxorComponent which is very important.

<Fluxor.Blazor.Web.StoreInitializer />

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Finally, we initialize Fluxor and set up routing in the application.

Implementing Data Fetching with Fluxor:

Let's consider an example where we fetch weather forecast data from a remote service using Fluxor. Here's how the components and Fluxor features are structured:

public record FetchDataAction();
public record FetchDataSuccessAction(IEnumerable<WeatherForecast> Forecasts);
public record FetchDataErrorAction(string Error);

public class Effects
{
    private readonly WeatherForecastService _weatherForecastService;

    public Effects(WeatherForecastService weatherForecastService)
    {
        _weatherForecastService = weatherForecastService;
    }

    [EffectMethod]
    public async Task HandleAsync(FetchDataAction action, IDispatcher dispatcher)
    {
        try
        {
            var forecasts = await _weatherForecastService.GetForecastAsync();
            dispatcher.Dispatch(new FetchDataSuccessAction(forecasts));
        }
        catch (Exception ex)
        {
            dispatcher.Dispatch(new FetchDataErrorAction(ex.Message));
        }
    }
}

public class Reducers
{
    [ReducerMethod]
    public static FetchDataState ReduceFetchDataAction(FetchDataState state, FetchDataAction action) =>
        new(true, null, null);

    [ReducerMethod]
    public static FetchDataState ReduceFetchDataSuccessAction(FetchDataState state, FetchDataSuccessAction action) =>
        new(false, action.Forecasts, null);

    [ReducerMethod]
    public static FetchDataState ReduceFetchDataErrorAction(FetchDataState state, FetchDataErrorAction action) =>
        new(false, null, action.Error);
}

// Weather Forecast Service
public class WeatherForecastService
{
    // Implementation details omitted for brevity
}

In this example, we define actions, effects, reducers, and a service for fetching weather forecast data. The effects handle the asynchronous operation of fetching data and dispatch appropriate success or error actions based on the result.

@page "/weather"
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject IState<FetchDataState> FetchDataState
@inject IDispatcher Dispatcher

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (FetchDataState.Value.IsLoading)
{
    <p><em>Loading...</em></p>
}
else
{
    if (FetchDataState.Value.Forecasts == null)
    {
        <p><em>@FetchDataState.Value.Error</em></p>
    }
    else
    {
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var forecast in FetchDataState.Value.Forecasts)
                {
                    <tr>
                        <td>@forecast.Date.ToShortDateString()</td>
                        <td>@forecast.TemperatureC</td>
                        <td>@forecast.TemperatureF</td>
                        <td>@forecast.Summary</td>
                    </tr>
                }
            </tbody>
        </table>
    }
}

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        Dispatcher.Dispatch(new FetchDataAction());
    }
}

In the Blazor component, we utilize Fluxor's integration to access the application state (FetchDataState) and dispatch actions (Dispatcher) as needed.

GitHub Repository:

https://github.com/fiyazbinhasan/BlazorFluxorStateManagement

.NET Aspire, Microsoft's cloud-native stack, redefines how we approach distributed applications. With RabbitMQ & MassTransit, it's a powerful combination. Let's harness the potential of .NET Aspire, RabbitMQ & MassTransit to build resilient, cloud-native messaging architectures.

• Ensure you have:
  • Latest .NET SDK
  • Visual Studio 2022 Preview

• From Visual Studio Installer, install .NET Aspire SDK (Preview) by navigating to: Modify -> Individual Components -> .NET Aspire SDK (Preview)

Update .NET Aspire Workload:

• Update the .NET Aspire workload via terminal with the following commands:

From a terminal, run the following commands to update the .NET Aspire workload,

dotnet workload update
dotnet workload install aspire

Create a New .NET Aspire Starter Application:

• Start with a fresh .NET Aspire Starter Application.

Update Existing Apps:

• For existing .NET Aspire apps, after installing the latest workload, update all .NET Aspire package references to: 9.0.0-preview.2.24162.2. If you prefer .NET 8, then update to 8.0.0-preview.4.24156.9
• For example, update package references in the AspireMessaging.AppHost.csproj file for Aspire.Hosting.

<PackageReference Include="Aspire.Hosting" Version="9.0.0-preview.2.24162.2" />

Adding RabbitMQ Dependency:

• Add a RabbitMQ resource to the application. It bootstraps a container used for local development. Also add the resource reference to two other projects,

var messaging = builder.AddRabbitMQ("RabbitMQConnection");

var apiService = builder.AddProject<Projects.AspireMessaging_ApiService>("apiservice")
    .WithReference(messaging);

builder.AddProject<Projects.AspireMessaging_Web>("webfrontend")
    .WithReference(cache)
    .WithReference(apiService)
    .WithReference(messaging);

• Your appsettings.json file should contain a RabbitMQConnection property,

"ConnectionStrings": {
  "RabbitMQConnection": "amqp://guest:guest@localhost:5672"
}

Message Contract Library:

• Add a new .NET Class Library e.g. AspireMessaging.Contracts, which will contain the message contract classes. Add a simple record for messaging,

namespace AspireMessaging.Contracts
{
    public record MessageContract
    {
        public Guid Id { get; init; } = Guid.NewGuid();

        public DateTime CreationDate { get; init; } = DateTime.UtcNow;

        public string Message { get; init; } = "";
    }
}

• Add the class library as project dependency to ApiService and Web.

Installing MassTransit:

• Add the MassTransit.RabbitMQ package to both ApiService and Web using Nuget

<PackageReference Include="MassTransit.RabbitMQ" Version="8.1.3" />

• Register MassTransit service in both ApiService and Web projects,

builder.Services.AddMassTransit(x =>
{
    x.SetKebabCaseEndpointNameFormatter();

    x.UsingRabbitMq((context, cfg) =>
    {
        var configuration = context.GetRequiredService<IConfiguration>();
        var host = configuration.GetConnectionString("RabbitMQConnection");
        cfg.Host(host);
        cfg.ConfigureEndpoints(context);
    });
});

The .NET Aspire RabbitMQ component supports Microsoft.Extensions.Configuration. It loads the RabbitMQClientSettings from configuration.

Publishing Message:

• In the _Imports.razor component of the Web project, add using statement for MassTransit and the AspireMessaging.Contracts project references,

@using MassTransit
@using AspireMessaging.Contracts

• Replace content of the Home.razor with the following,

@page "/"
@rendermode InteractiveServer
@inject IBus Bus

<PageTitle>Home</PageTitle>

<button class="btn btn-primary mt-4" @onclick="DispatchMessage">Publish Hello, world!</button>

@code {
    private async Task DispatchMessage()
    {
        await Bus.Publish(new MessageContract
        {
            Message = "Hello, world!"
        });
    }
}

Consuming Message:

• In the ApiService project, add a class for consuming a message published using the MessageContract class,

using AspireMessaging.Contracts;
using MassTransit;
using System.Diagnostics;

namespace AspireMessaging.ApiService
{
    public class HelloWorldMessageConsumer : IConsumer<MessageContract>
    {
        public async Task Consume(ConsumeContext<MessageContract> context)
        {
            Debug.WriteLine($"Received: {context.Message.Message}");
            await Task.CompletedTask;
        }
    }
}

• Register this consumer with MassTransit service,

builder.Services.AddMassTransit(x =>
{
    x.SetKebabCaseEndpointNameFormatter();
    x.AddConsumer<HelloWorldMessageConsumer>();

    x.UsingRabbitMq((context, cfg) =>
    {
        var configuration = context.GetRequiredService<IConfiguration>();
        var host = configuration.GetConnectionString("RabbitMQConnection");
        cfg.Host(host);
        cfg.ConfigureEndpoints(context);
    });
});

Test It Out Yourself:

• Download the repository from the link below,

https://github.com/fiyazbinhasan/AspireMessaging

• Run the Aspire project and from the home page of the Web, click on the Publish Hello, world! button,
• In Visual Studio's Output panel, you should see the debug message,

Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly build custom designs without having to write custom CSS. Blazor Server, on the other hand, is a Microsoft framework for building interactive web UIs using C# instead of JavaScript. Integrating Tailwind CSS with a Blazor Server application can enhance its styling capabilities and streamline the development process. In this guide, we'll walk through the steps to integrate Tailwind CSS into a Blazor Server app.

Step 1: Create a New Blazor Server Project

Start by creating a new Blazor Server project in Visual Studio. Alternatively, you can use the command-line interface to create a new project. Open your terminal and run the following command:

dotnet new blazorserver-empty -o BlazorAndTailwind
cd BlazorAndTailwind

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and its dependencies using npm. Navigate to the root of your project directory and run the following commands:

npm init -y
npm install tailwindcss postcss autoprefixer postcss-cli

Step 3: Create PostCSS Configuration

Create a postcss.config.js file in the root of your project and add the following content to configure PostCSS:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

Step 4: Generate Tailwind CSS Configuration

tailwindcss provides a convenient method to generate its configuration file. Execute the following command within your project directory:

npx tailwindcss init

It will generate a tailwind.config.js file. For a Blazor project, the files that Tailwind needs to track are .html, .cshtml or Razor files. Add the template paths to the content section of the tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{razor,html,cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Create Tailwind CSS Stylesheet

You should already have a site.css in the wwwroot/css folder. Include the following directives to the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Watch Tailwind CSS Output

To streamline development, watch and compile the Tailwind CSS output with the following command:

npx tailwindcss -i wwwroot/css/site.css -o wwwroot/css/site.min.css --watch

Step 6: Reference Tailwind CSS Stylesheet in _Host.cshtml

In the _Host.cshtml file, add a reference to the generated Tailwind CSS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="app.min.css" />
    <link rel="stylesheet" href="BlazorAndTailwind.styles.css" />
    <script src="app.js"></script>
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Step 7: Testing Tailwind CSS Classes

For testing, add some tailwind classes to the heading element on the Index.razor file:

@page "/"

<h1 class="text-2xl text-purple-500">Hello, world!</h1>

Download Source Code:

https://github.com/fiyazbinhasan/BlazorAndTailwind

In this notebook, we'll explore the implementation of a class-based theme changer for Blazor applications using Tailwind CSS. This approach allows us to seamlessly switch between light and dark themes while leveraging the power and simplicity of Tailwind CSS for styling.

Tailwind CSS is a popular utility-first CSS framework that enables rapid UI development by providing a set of pre-defined classes. Blazor, on the other hand, is a framework for building interactive web UIs using C# instead of JavaScript. By combining Tailwind CSS with Blazor, we can create modern and responsive web applications efficiently.

One common feature in web applications is the ability to switch between different themes, such as light and dark themes. In this notebook, we'll demonstrate how to implement a theme changer using Tailwind CSS classes in a Blazor application.

Create a Blazor Server App. Create a razor component in a new folder named widget. This is the component that toggles between light and dark theme.

@inject IJSRuntime Js
@inject ProtectedLocalStorage ProtectedLocalStorage
@inject AppState AppState

<button class="text-gray-500 hover:bg-bg-gray-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-sm p-2.5 inline-flex items-center"
        @onclick="ToggleTheme">
    @if (AppState.Theme == "dark")
    {
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" /></svg>
    }
    else
    {
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /></svg>
    }
</button>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await SetTheme();
        }
    }

    private async Task SetTheme()
    {
        var result = await ProtectedLocalStorage.GetAsync<string>("theme");
        var theme = result.Success ? result.Value : "light";
        if (theme != null) AppState.SetTheme(theme);
    }

    private async Task ToggleTheme()
    {
        switch (AppState.Theme)
        {
            case "dark":
                await Js.InvokeVoidAsync("toggleTheme", "dark");
                await ProtectedLocalStorage.SetAsync("theme", "light");
                AppState.SetTheme("light");
                break;
            default:
                await Js.InvokeVoidAsync("toggleTheme", "light");
                await ProtectedLocalStorage.SetAsync("theme", "dark");
                AppState.SetTheme("dark");
                break;
        }
    }
}

We have injected the IJSRuntime so that we can call a javascript function, which will toggle the dark class on the document. For the javascript function i.e. toggleTheme, we have created an app.js file in the wwwroot and added the following script,

window.toggleTheme = function (theme) {
    switch (theme) {
        case "dark":
            document.documentElement.classList.remove("dark");
            break;
        default:
            document.documentElement.classList.add("dark");
            break;
    }
};

Add the script in the App.razor file. Notice that we have added some classes to the <body>.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="app.min.css" />
    <link rel="stylesheet" href="BlazorClassBasedThemeChanger.styles.css" />
    <script src="app.js"></script>
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body class="tracking-tight antialiased text-gray-900 dark:text-slate-300 bg-white dark:bg-gray-800">
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
</body>

</html>

flowbite is a component library based on Tailwind CSS. It is optional.

The AppState service is a class having a string property that stores the current theme. It is registered with the scoped lifecycle,

namespace BlazorClassBasedThemeChanger;

public class AppState
{
    public string Theme { get; private set; } = "light";
    
    public void SetTheme(string theme)
    {
        Theme = theme;
    }
}

using BlazorClassBasedThemeChanger;
using BlazorClassBasedThemeChanger.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddScoped<AppState>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
}

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

We should store the theme in the browser's local storage, so that when a user re-opens the app, the previously selected theme is persisted. Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage package could be used for that purpose.

Import it in the _Imports.razor file,

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorClassBasedThemeChanger
@using BlazorClassBasedThemeChanger.Components
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage

The tailwind.config.js file should look like this,

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
    content: ["./**/*.{razor,html,cshtml}", "./node_modules/flowbite/**/*.js"],
    theme: {
        extend: {
            colors: {
                primary: colors.purple,
                secondary: colors.blue,
            },
            fontFamily: {
                sans: ["'Inter Variable'", ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [
        require("@tailwindcss/typography"),
        require('flowbite/plugin')
    ],
    darkMode: "class"
}

That pretty much it! Download the source code,

https://github.com/fiyazbinhasan/BlazorClassBasedThemeChanger

Run the app and you should have the following UI. Use the toggle button to change between dark and light theme,

In this post, I'll guide you through updating your Aspire application to the latest .NET Aspire Preview 3 and incorporating an NPM project, whether it's Angular, React, Vue, or in my case, Qwik. Ensure you have the most recent .NET SDK and Visual Studio 2022 Preview installed before proceeding.

Install Prerequisites:

• Ensure you have:
  • Latest .NET SDK
  • Visual Studio 2022 Preview

• From Visual Studio Installer, install .NET Aspire SDK (Preview) by navigating to: Modify -> Individual Components -> .NET Aspire SDK (Preview)

Update .NET Aspire Workload:

• Update the .NET Aspire workload via terminal with the following commands:

From a terminal, run the following commands to update the .NET Aspire workload,

dotnet workload update
dotnet workload install aspire

Create a New .NET Aspire Starter Application:

• Start with a fresh .NET Aspire Starter Application.

Update Existing Apps:

• For existing .NET Aspire apps, after installing the latest workload, update all .NET Aspire package references to: 8.0.0-preview.3.24105.21
• For example, update package references in the SampleAspireApp.AppHost.csproj file for Aspire.Hosting.

<PackageReference Include="Aspire.Hosting" Version="8.0.0-preview.3.24105.21" />

Bootstrap Qwik Application:

• Change directory to the created Aspire project in your terminal.
• Use the following command to create a Qwik project, specifying the directory name for the project files.

npm create qwik@latest

Add Dockerfile and Environment Variables:

• Add a Dockerfile to the Qwik project.

FROM node:20.7

WORKDIR /app

COPY package.json package.json
COPY package-lock.json package-lock.json

RUN npm i

COPY . .

EXPOSE 5173

CMD [ "npm", "start" ]

• Also, include a .env file with the environment variable pointing to the Aspire ApiService project running on the Docker container.

PUBLIC_QWIK_APP_WEATHER_API=$services__apiservice__1

Update Program.cs File:

• Add the following to your Program.cs file in the AppHost project:

builder.AddNpmApp("qwik", "../SampleAspireApp.Spa")
    .WithReference(apiservice)
    .WithHttpEndpoint(containerPort: 5173, env: "PORT")
    .AsDockerfileInManifest();

• Use AddNpmApp to incorporate the Qwik app, specifying the node project name and path.
• Set the container port to 5173, meaning the Qwik app will be hosted on http://localhost:5173.

Final Touches:

• Run the Aspire project, and two browser windows should pop up.

Fetching Forecast Data:

• Fetch the forecast from the ApiService and display it in the UI by adding the necessary code to the index.tsx file.

import { Resource, component$, useResource$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";

export default component$(() => {
  const forecast = useResource$<Forecast[]>(async () => {
    const response = await fetch(
      `${import.meta.env.PUBLIC_QWIK_APP_WEATHER_API}/weatherforecast`
    );
    const data = await response.json();
    return data as Forecast[];
  });

  return (
    <>
      <Resource
        value={forecast}
        onPending={() => <p>Loading...</p>}
        onResolved={(forecast: Forecast[]) => <table>
          <thead>
            <tr>
              <th>Date</th>
              <th>Temp. (C)</th>
              <th>Temp. (F)</th>
              <th>Summary</th>
            </tr>
          </thead>
          <tbody>
            {forecast.map((f: Forecast, i: number) => {
              return (
                <tr key={i}>
                  <td>{f.date}</td>
                  <td>{f.temperatureC}</td>
                  <td>{f.temperatureF}</td>
                  <td>{f.summary}</td>
                </tr>
              );
            })}
          </tbody>
        </table>}
      />
    </>
  );
});

type Forecast = {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

export const head: DocumentHead = {
  title: "Welcome to Qwik",
  meta: [
    {
      name: "description",
      content: "Qwik site description",
    },
  ],
};

Check Results:

• Ensure the app displays the forecast in a styled table.

Resources:

• For reference, you can find the complete repository and important links below.

QwikAspire

That's it! You've successfully updated your Aspire application and integrated a Qwik project. Enjoy exploring the possibilities of your enhanced application.

Important Links

Aspire Samples

.NET Aspire Overview

Make sure you have the latest .NET SDK and Visual Studio 2022 Preview installed.

.NET SDK

Visual Studio 2022 Preview

From the visual studio installer install .NET Aspire SDK (Preview).

Modify -> Individual Components -> .NET Aspire SDK (Preview)

Create a new .NET Aspire Starter Application

The starter template should look like the following.

Right click on the AppHost project (e.g. SampleAspireApp.AppHost) and click Manage NuGet packages... . Go to the updates tab and check the Include prerelease checkbox. Update to the latest Aspire Hosting package.

Time to bootstrap a Qwik application. From the terminal change your directory to the created Aspire project.

Use the following command to create a  Qwik project,

npm create qwik@latest

Type in the directory name under which the project files will reside.

Add a Dockerfile to the Qwik project,

FROM node:20.7

WORKDIR /app

COPY package.json package.json
COPY package-lock.json package-lock.json

RUN npm i

COPY . .

EXPOSE 5173

CMD [ "npm", "start" ]

Also add a .env file containing the following environment variable that points to the Aspire ApiService project running on the Docker container.

PUBLIC_QWIK_APP_WEATHER_API=$services__apiservice__1

Go back to the AppHost project and add the following to your Program.cs file

builder.AddNpmApp("qwik", "../SampleAspireApp.Spa")
    .WithReference(apiservice)
    .WithServiceBinding(containerPort: 5173, scheme: "http", env: "PORT")
    .AsDockerfileInManifest();

AddNpmApp takes two arguments, first argument is the name of the node project and the second one is the project path to your node project. The container port is set to 5173 means the Qwik app will be hosted on http://localhost:5173.

The final Program.cs file should look like this,

var builder = DistributedApplication.CreateBuilder(args);

var cache = builder.AddRedisContainer("cache");

var apiservice = builder.AddProject<Projects.SampleAspireApp_ApiService>("apiservice");

builder.AddProject<Projects.SampleAspireApp_Web>("webfrontend")
    .WithReference(cache)
    .WithReference(apiservice);

builder.AddNpmApp("qwik", "../SampleAspireApp.Spa")
    .WithReference(apiservice)
    .WithServiceBinding(containerPort: 5173, scheme: "http", env: "PORT")
    .AsDockerfileInManifest();

builder.Build().Run();

And done, Run the Aspire project and two browser window should pop up.

Let's fetch the forcast from the ApiService and show it in the UI. Add the following to the index.tsx file.

import { Resource, component$, useResource$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";

export default component$(() => {
  const forecast = useResource$<Forecast[]>(async () => {
    const response = await fetch(
      `${import.meta.env.PUBLIC_QWIK_APP_WEATHER_API}/weatherforecast`
    );
    const data = await response.json();
    return data as Forecast[];
  });

  return (
    <>
      <Resource
        value={forecast}
        onPending={() => <p>Loading...</p>}
        onResolved={(forecast: Forecast[]) => <table>
          <thead>
            <tr>
              <th>Date</th>
              <th>Temp. (C)</th>
              <th>Temp. (F)</th>
              <th>Summary</th>
            </tr>
          </thead>
          <tbody>
            {forecast.map((f: Forecast, i: number) => {
              return (
                <tr key={i}>
                  <td>{f.date}</td>
                  <td>{f.temperatureC}</td>
                  <td>{f.temperatureF}</td>
                  <td>{f.summary}</td>
                </tr>
              );
            })}
          </tbody>
        </table>}
      />
    </>
  );
});

type Forecast = {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

export const head: DocumentHead = {
  title: "Welcome to Qwik",
  meta: [
    {
      name: "description",
      content: "Qwik site description",
    },
  ],
};

The app should show the forecast in a styled table like the following,

Repository

QwikAspire

Important Links

Aspire Samples

.NET Aspire Overview

FIDO2 adds an extra layer of security to your application. FIDO keys are the only way to guard against online phishing attacks. FIDO is also safe in case of a data breach since only the public keys are exposed. As FIDO keys are physical devices or platform-integrated interfaces, user interaction has to be present to authenticate themself.

Fido2 is the umbrella term and branding of two new w3c standards: WebAuthn and CTAP2. WebAuthn is the JS API that allows browser to talk to the operating system to generate assertions and CTAP2 is the API that allows the operating system to talk to Authenticators (usb security keys etc)

FEITIAN Technologies Co., Ltd. has many FIDO key solutions, and they were kind enough to send me the FIDO2 NFC K9 to review. I will use this key as an MFA authenticator for an ASP.NET Core application.

Before diving into the code, let's clarify some terms.

WebAuthn

The Web Authentication API (WebAuthn) is a specification written by the W3C and FIDO. The API allows servers to register and authenticate users using public key cryptography instead of passwords.

It allows servers to integrate with strong authenticators. Instead of a password, a private-public key pair (a credential) is created for a website. The private key is stored securely on the user's device; a public key and randomly generated credential ID are sent to the server for storage. The server can then use that public key to prove the user's identity.

Authenticator

A cryptographic entity existing in hardware or software that can register a user with a given Relying Party and later assert possession of the registered public key credential, and optionally verify the user, when requested by the Relying Party.

Registration

The ceremony where a user, a Relying Party, and the user's client (containing at least one authenticator) work to create a public key credential and associate it with the user's Relying Party account.

Relying Party

In the context of the WebAuthn API, a relying party identifier is a valid domain string identifying the WebAuthn Relying Party on whose behalf a given registration or authentication ceremony is being performed.

Attestation

Attestation is a statement serving to bear witness, confirm, or authenticate. In the WebAuthn context, attestation is employed to attest to the provenance of an authenticator and the data it emits, including, for example, credential IDs, credential key pairs, signature counters, etc.

Assertion

When a user chooses to log into a service, the server sends a challenge, and the authenticator signs over it with a key pair previously registered to that service. This creates an assertion. Unlike the attestation, the assertion format is always the same regardless of the device used.

The assertion is returned through the WebAuthn API as the AuthenticatorAssertionResponse.

Workflow

In a regular ASP.NET Core application configured with the Identity platform, users are typically registered using the IdentityUser entity in the AspNetUser table. For the sake of simplicity, this post is not focused on the Identity aspect of the application. It only demonstrates the idea of enabling  MFA for a pre-defined user.

TL;DR. Download the source code from here,

https://github.com/fiyazbinhasan/AspNetCoreFido2MFA

Run the following command before running the sample,

dotnet-ef database update

The WebAuthn library used for this demo is fido2-net-lib. In an ASP.NET Core web application (Razor Pages), add these packages,

Install-Package Fido2
Install-Package Fido2.AspNet

The required Fido services are registered in the Program.cs file,

builder.Services.AddMemoryCache();
builder.Services.AddDistributedMemoryCache();

builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(2);
    options.Cookie.HttpOnly = true;
    options.Cookie.SameSite = SameSiteMode.Unspecified;
});

builder.Services.AddFido2(options =>
    {
        options.ServerDomain = builder.Configuration["Fido2:ServerDomain"];
        options.ServerName = "FIDO2 Test";
        options.Origins = builder.Configuration.GetSection("Fido2:Origins").Get<HashSet<string>>();
        options.TimestampDriftTolerance = builder.Configuration.GetValue<int>("Fido2:TimestampDriftTolerance");
        options.MDSCacheDirPath = builder.Configuration["Fido2:MDSCacheDirPath"];
    })
    .AddCachedMetadataService(config =>
    {
        config.AddFidoMetadataRepository(httpClientBuilder =>
        {
            //TODO: any specific config you want for accessing the MDS
        });
    });

AddFido2 service reads configuration from the appsettings.json file where the necessary information is provided to make the web server act as a Relying Party (RP)

"Fido2": {
  "ServerDomain": "localhost",
  "Origins": [ "https://localhost:44388", "https://localhost:7123" ],
  "TimestampDriftTolerance": 300000
}

Rather than storing the credentials and user registration info in memory, a relational database is configured with two entities, i.e. Fido2User and StoredCredential. Entity framework is used to configure these two entities,

using System.Text;
using AspNetCoreFido2MFA.Models;
using Fido2NetLib;
using Microsoft.EntityFrameworkCore;

namespace AspNetCoreFido2MFA.Data;

public class AppDbContext : DbContext
{
    public DbSet<Fido2User> Fido2Users => Set<Fido2User>();
    public DbSet<StoredCredential> StoredCredentials => Set<StoredCredential>();

    public AppDbContext(DbContextOptions<AppDbContext> optionsBuilder) : base(optionsBuilder) 
    {

    }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Fido2User>()
            .HasData(new List<Fido2User>()
            {
                new()
                {
                    Id = Encoding.UTF8.GetBytes("fiyazhasan@fido.local"), 
                    DisplayName = "fiyazhasan@fido.local",
                    Name = "fiyazhasan@fido.local"
                }
            });
    }
}

Note that Fido2User is already available in the Fido2NetLib as well as StoredCredential. But we are using a modified version of StoredCredential,

public class StoredCredential
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }
    public string UserName { get; set; } = string.Empty;
    public byte[] UserId { get; set; }
    public byte[] PublicKey { get; set; }
    public byte[] UserHandle { get; set; }
    public uint SignatureCounter { get; set; }
    public string CredType { get; set; }
    public DateTime RegDate { get; set; }
    public Guid AaGuid { get; set; }

    [NotMapped]
    public PublicKeyCredentialDescriptor Descriptor {
        get => string.IsNullOrWhiteSpace(DescriptorJson) ? null : JsonSerializer.Deserialize<PublicKeyCredentialDescriptor>(DescriptorJson);
        set => DescriptorJson = JsonSerializer.Serialize(value);
    }

    public string DescriptorJson { get; set; }
}

Storing the PublicKeyCredentialDescriptor as a JSON string in the DescriptorJson column helps filter public keys easier.

Note that migration on the database creates a pre-defined user with an Id saved as a byte representation of the user's email address.

Registration of a user with a Fido credential is a two-step process.

MakeCredentialOptions

We perform an attestation process to add FIDO2 credentials to an existing user account. It starts with returning options to the client.

MakeCredential

When the client returns a response, we verify and register the credentials.

The following shows two action methods of the Fido2MfaController,

[Route("api/[controller]")]
public class Fido2MfaController : Controller
{
    private readonly IFido2 _fido2;
    private readonly AppDbContext _context;

    public Fido2MfaController(IFido2 fido2, AppDbContext context)
    {
        _fido2 = fido2;
        _context = context;
    }

    private string FormatException(Exception e)
    {
        return $"{e.Message}{(e.InnerException != null ? " (" + e.InnerException.Message + ")" : "")}";
    }

    [HttpPost]
    [Route("/makeCredentialOptions")]
    public async Task<JsonResult> MakeCredentialOptions([FromForm] string username,
        [FromForm] string displayName,
        [FromForm] string attType,
        [FromForm] string authType,
        [FromForm] string userVerification,
        [FromQuery] bool requireResidentKey)
    {
        try
        {
            // 1. Get user from DB by username (in our example, auto create missing users)
            var user = await _context.Fido2Users.SingleOrDefaultAsync(u => u.Name.Equals(username));

            if (user is null)
                throw new ArgumentException("User not found");

            // 2. Get user existing keys by username
            var existingKeys = await _context.StoredCredentials
                .Where(c => c.UserId.SequenceEqual(user.Id))
                .Select(c => c.Descriptor)
                .ToListAsync();

            // 3. Create options
            var authenticatorSelection = new AuthenticatorSelection
            {
                RequireResidentKey = requireResidentKey,
                UserVerification = userVerification.ToEnum<UserVerificationRequirement>()
            };

            if (!string.IsNullOrEmpty(authType))
                authenticatorSelection.AuthenticatorAttachment = authType.ToEnum<AuthenticatorAttachment>();

            var extensions = new AuthenticationExtensionsClientInputs()
            {
                Extensions = true,
                UserVerificationMethod = true,
            };

            var options = _fido2.RequestNewCredential(user, existingKeys, authenticatorSelection,
                attType.ToEnum<AttestationConveyancePreference>(), extensions);

            // 4. Temporarily store options, session/in-memory cache/redis/db
            HttpContext.Session.SetString("fido2.attestationOptions", options.ToJson());

            // 5. return options to client
            return Json(options);
        }
        catch (Exception e)
        {
            return Json(new CredentialCreateOptions {Status = "error", ErrorMessage = FormatException(e)});
        }
    }

    [HttpPost]
    [Route("/makeCredential")]
    public async Task<JsonResult> MakeCredential([FromBody] AuthenticatorAttestationRawResponse attestationResponse,
        CancellationToken cancellationToken)
    {
        try
        {
            // 1. get the options we sent the client
            var jsonOptions = HttpContext.Session.GetString("fido2.attestationOptions");
            var options = CredentialCreateOptions.FromJson(jsonOptions);

            // 2. Create callback so that lib can verify credential id is unique to this user
            async Task<bool> Callback(IsCredentialIdUniqueToUserParams args, CancellationToken token)
            {
                var credentialIdString = Base64Url.Encode(args.CredentialId);

                var cred = await _context.StoredCredentials
                    .Where(c => c.DescriptorJson.Contains(credentialIdString))
                    .FirstOrDefaultAsync(token);

                if (cred is null)
                    return true;
                
                var users = await _context.Fido2Users
                    .Where(u => u.Id.SequenceEqual(cred.UserId))
                    .ToListAsync(token);

                return users.Count <= 0;
            }

            // 2. Verify and make the credentials
            var success = await _fido2.MakeNewCredentialAsync(attestationResponse, options, Callback,
                cancellationToken: cancellationToken);

            // 3. Store the credentials in db
            if (success.Result != null)
            {
                var credential = new StoredCredential
                {
                    Descriptor = new PublicKeyCredentialDescriptor(success.Result.CredentialId),
                    PublicKey = success.Result.PublicKey,
                    UserHandle = success.Result.User.Id,
                    SignatureCounter = success.Result.Counter,
                    CredType = success.Result.CredType,
                    RegDate = DateTime.Now,
                    AaGuid = success.Result.Aaguid,
                    UserId = options.User.Id,
                    UserName = options.User.Name,
                };

                await _context.StoredCredentials.AddAsync(credential, cancellationToken);
            }

            await _context.SaveChangesAsync(cancellationToken);

            // 4. return "ok" to the client
            return Json(success);
        }
        catch (Exception e)
        {
            return Json(new Fido2.CredentialMakeResult(status: "error", errorMessage: FormatException(e),
                result: null));
        }
    }
}    

The following snippet shows the corresponding javascript code that calls these two action methods to complete the Fido key registration process,

document.getElementById('register').addEventListener('submit', handleRegisterSubmit);

async function handleRegisterSubmit(event) {
    event.preventDefault();

    let username = this.username.value;
    let displayName = this.displayName.value;

    // passwordfield is omitted in demo
    // let password = this.password.value;

    // possible values: none, direct, indirect
    let attestation_type = "none";
    // possible values: <empty>, platform, cross-platform
    let authenticator_attachment = "";

    // possible values: preferred, required, discouraged
    let user_verification = "preferred";

    // possible values: true,false
    let require_resident_key = "false";

    // prepare form post data
    var data = new FormData();
    data.append('username', username);
    data.append('displayName', displayName);
    data.append('attType', attestation_type);
    data.append('authType', authenticator_attachment);
    data.append('userVerification', user_verification);

    // send to server for registering
    let makeCredentialOptions;
    try {
        makeCredentialOptions = await fetchMakeCredentialOptions(data, require_resident_key);

    } catch (e) {
        console.error(e);
        let msg = "Something wen't really wrong";
        showErrorAlert(msg);
    }


    console.log("Credential Options Object", makeCredentialOptions);

    if (makeCredentialOptions.status !== "ok") {
        console.log("Error creating credential options");
        console.log(makeCredentialOptions.errorMessage);
        showErrorAlert(makeCredentialOptions.errorMessage);
        return;
    }

    // Turn the challenge back into the accepted format of padded base64
    makeCredentialOptions.challenge = coerceToArrayBuffer(makeCredentialOptions.challenge);
    // Turn ID into a UInt8Array Buffer for some reason
    makeCredentialOptions.user.id = coerceToArrayBuffer(makeCredentialOptions.user.id);

    makeCredentialOptions.excludeCredentials = makeCredentialOptions.excludeCredentials.map((c) => {
        c.id = coerceToArrayBuffer(c.id);
        return c;
    });

    if (makeCredentialOptions.authenticatorSelection.authenticatorAttachment === null) makeCredentialOptions.authenticatorSelection.authenticatorAttachment = undefined;

    console.log("Credential Options Formatted", makeCredentialOptions);

    Swal.fire({
        title: 'Registering...',
        text: 'Tap your security key to finish registration.',
        imageUrl: "/images/securitykey.min.svg",
        showCancelButton: true,
        showConfirmButton: false,
        focusConfirm: false,
        focusCancel: false
    });


    console.log("Creating PublicKeyCredential...");

    let newCredential;
    try {
        newCredential = await navigator.credentials.create({
            publicKey: makeCredentialOptions
        });
    } catch (e) {
        var msg = "Could not create credentials in browser. Probably because the username is already registered with your authenticator. Please change username or authenticator."
        console.error(msg, e);
        showErrorAlert(msg, e);
    }


    console.log("PublicKeyCredential Created", newCredential);

    try {
        registerNewCredential(newCredential);
    } catch (e) {
        showErrorAlert(err.message ? err.message : err);
    }
}

async function fetchMakeCredentialOptions(formData, requireResidentKey) {
    let response = await fetch(`/makeCredentialOptions?requireResidentKey=${requireResidentKey}`, {
        method: 'POST', // or 'PUT'
        body: formData, // data can be `string` or {object}!
        headers: {
            'Accept': 'application/json'
        }
    });

    let data = await response.json();

    return data;
}


// This should be used to verify the auth data with the server
async function registerNewCredential(newCredential) {
    // Move data into Arrays incase it is super long
    let attestationObject = new Uint8Array(newCredential.response.attestationObject);
    let clientDataJSON = new Uint8Array(newCredential.response.clientDataJSON);
    let rawId = new Uint8Array(newCredential.rawId);

    const data = {
        id: newCredential.id,
        rawId: coerceToBase64Url(rawId),
        type: newCredential.type,
        extensions: newCredential.getClientExtensionResults(),
        response: {
            AttestationObject: coerceToBase64Url(attestationObject),
            clientDataJson: coerceToBase64Url(clientDataJSON)
        }
    };

    let response;
    try {
        response = await registerCredentialWithServer(data);
    } catch (e) {
        showErrorAlert(e);
    }

    console.log("Credential Object", response);

    // show error
    if (response.status !== "ok") {
        console.log("Error creating credential");
        console.log(response.errorMessage);
        showErrorAlert(response.errorMessage);
        return;
    }

    // show success 
    Swal.fire({
        title: 'Registration Successful!',
        text: 'You\'ve registered successfully.',
        type: 'success',
        timer: 2000
    });

    // redirect to dashboard?
    //window.location.href = "/dashboard/" + state.user.displayName;
}

async function registerCredentialWithServer(formData) {
    let response = await fetch('/makeCredential', {
        method: 'POST', // or 'PUT'
        body: JSON.stringify(formData), // data can be `string` or {object}!
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    });

    let data = await response.json();

    return data;
}

Public keys are stored in the StoredCredentials table when a user is registered. Using the Fido key to sign in the user is also a two-step process.

AssertionOptionsPost

When a user wants to log a user in, we do an assertion based on the registered credentials. First, we create the assertion options and return them to the client.

MakeAssertion

When the client returns a response, we verify it and accept the login.

The following shows two action methods of the Fido2MfaController responsible for signing in the user,

[Route("api/[controller]")]
public class Fido2MfaController : Controller
{
    private readonly IFido2 _fido2;
    private readonly AppDbContext _context;

    public Fido2MfaController(IFido2 fido2, AppDbContext context)
    {
        _fido2 = fido2;
        _context = context;
    }

    private string FormatException(Exception e)
    {
        return $"{e.Message}{(e.InnerException != null ? " (" + e.InnerException.Message + ")" : "")}";
    }

    [HttpPost]
    [Route("/assertionOptions")]
    public async Task<ActionResult> AssertionOptionsPost([FromForm] string username, [FromForm] string userVerification)
    {
        try
        {
            var existingCredentials = new List<PublicKeyCredentialDescriptor>();

            if (!string.IsNullOrEmpty(username))
            {
                // 1. Get user from DB
                var user = await _context.Fido2Users.SingleOrDefaultAsync(u => u.Name.Equals(username));

                if (user is null) throw new ArgumentException("Username was not registered");

                // 2. Get registered credentials from database
                existingCredentials = await _context.StoredCredentials
                    .Where(c => c.UserName.Equals(username))
                    .Select(c => c.Descriptor)
                    .ToListAsync();
            }

            var extensions = new AuthenticationExtensionsClientInputs()
            {
                UserVerificationMethod = true
            };

            // 3. Create options
            var uv = string.IsNullOrEmpty(userVerification)
                ? UserVerificationRequirement.Discouraged
                : userVerification.ToEnum<UserVerificationRequirement>();

            var options = _fido2.GetAssertionOptions(
                existingCredentials,
                uv,
                extensions
            );

            // 4. Temporarily store options, session/in-memory cache/redis/db
            HttpContext.Session.SetString("fido2.assertionOptions", options.ToJson());

            // 5. Return options to client
            return Json(options);
        }

        catch (Exception e)
        {
            return Json(new AssertionOptions {Status = "error", ErrorMessage = FormatException(e)});
        }
    }

    [HttpPost]
    [Route("/makeAssertion")]
    public async Task<JsonResult> MakeAssertion([FromBody] AuthenticatorAssertionRawResponse clientResponse,
        CancellationToken cancellationToken)
    {
        try
        {
            // 1. Get the assertion options we sent the client
            var jsonOptions = HttpContext.Session.GetString("fido2.assertionOptions");
            var options = AssertionOptions.FromJson(jsonOptions);

            // 2. Get registered credential from database
            var credentialIdString = Base64Url.Encode(clientResponse.Id);

            var credential = await _context.StoredCredentials
                .Where(c => c.DescriptorJson.Contains(credentialIdString)).FirstOrDefaultAsync(cancellationToken);

            if (credential is null) throw new Exception("Unknown credentials");

            // 3. Get credential counter from database
            var storedCounter = credential.SignatureCounter;

            // 4. Create callback to check if userhandle owns the credentialId
            async Task<bool> Callback(IsUserHandleOwnerOfCredentialIdParams args, CancellationToken token)
            {
                var storedCredentials = await _context.StoredCredentials
                    .Where(c => c.UserHandle.SequenceEqual(args.UserHandle)).ToListAsync(cancellationToken);
                return storedCredentials.Exists(c => c.Descriptor.Id.SequenceEqual(args.CredentialId));
            }

            // 5. Make the assertion
            var res = await _fido2.MakeAssertionAsync(clientResponse, options, credential.PublicKey, storedCounter,
                Callback,
                cancellationToken: cancellationToken);

            // 6. Store the updated counter
            var cred = await _context.StoredCredentials
                .Where(c => c.DescriptorJson.Contains(credentialIdString)).FirstOrDefaultAsync(cancellationToken);

            cred.SignatureCounter = res.Counter;

            await _context.SaveChangesAsync(cancellationToken);

            // 7. return OK to client
            return Json(res);
        }
        catch (Exception e)
        {
            return Json(new AssertionVerificationResult {Status = "error", ErrorMessage = FormatException(e)});
        }
    }
}

The following snippet shows the corresponding javascript code that calls these two action methods to complete the login process using the Fido key,

document.getElementById('signin').addEventListener('submit', handleSignInSubmit);

async function handleSignInSubmit(event) {
    event.preventDefault();

    let username = this.username.value;

    // passwordfield is omitted in demo
    // let password = this.password.value;


    // prepare form post data
    var formData = new FormData();
    formData.append('username', username);

    // not done in demo
    // todo: validate username + password with server (has nothing to do with FIDO2/WebAuthn)

    // send to server for registering
    let makeAssertionOptions;
    try {
        var res = await fetch('/assertionOptions', {
            method: 'POST', // or 'PUT'
            body: formData, // data can be `string` or {object}!
            headers: {
                'Accept': 'application/json'
            }
        });

        makeAssertionOptions = await res.json();
    } catch (e) {
        showErrorAlert("Request to server failed", e);
    }

    console.log("Assertion Options Object", makeAssertionOptions);

    // show options error to user
    if (makeAssertionOptions.status !== "ok") {
        console.log("Error creating assertion options");
        console.log(makeAssertionOptions.errorMessage);
        showErrorAlert(makeAssertionOptions.errorMessage);
        return;
    }

    // todo: switch this to coercebase64
    const challenge = makeAssertionOptions.challenge.replace(/-/g, "+").replace(/_/g, "/");
    makeAssertionOptions.challenge = Uint8Array.from(atob(challenge), c => c.charCodeAt(0));

    // fix escaping. Change this to coerce
    makeAssertionOptions.allowCredentials.forEach(function (listItem) {
        var fixedId = listItem.id.replace(/\_/g, "/").replace(/\-/g, "+");
        listItem.id = Uint8Array.from(atob(fixedId), c => c.charCodeAt(0));
    });

    console.log("Assertion options", makeAssertionOptions);

    Swal.fire({
        title: 'Logging In...',
        text: 'Tap your security key to login.',
        imageUrl: "/images/securitykey.min.svg",
        showCancelButton: true,
        showConfirmButton: false,
        focusConfirm: false,
        focusCancel: false
    });

    // ask browser for credentials (browser will ask connected authenticators)
    let credential;
    try {
        credential = await navigator.credentials.get({ publicKey: makeAssertionOptions })
    } catch (err) {
        showErrorAlert(err.message ? err.message : err);
    }

    try {
        await verifyAssertionWithServer(credential);
    } catch (e) {
        showErrorAlert("Could not verify assertion", e);
    }
}

/**
 * Sends the credential to the the FIDO2 server for assertion
 * @param {any} assertedCredential
 */
async function verifyAssertionWithServer(assertedCredential) {

    // Move data into Arrays incase it is super long
    let authData = new Uint8Array(assertedCredential.response.authenticatorData);
    let clientDataJSON = new Uint8Array(assertedCredential.response.clientDataJSON);
    let rawId = new Uint8Array(assertedCredential.rawId);
    let sig = new Uint8Array(assertedCredential.response.signature);
    const data = {
        id: assertedCredential.id,
        rawId: coerceToBase64Url(rawId),
        type: assertedCredential.type,
        extensions: assertedCredential.getClientExtensionResults(),
        response: {
            authenticatorData: coerceToBase64Url(authData),
            clientDataJson: coerceToBase64Url(clientDataJSON),
            signature: coerceToBase64Url(sig)
        }
    };

    let response;
    try {
        let res = await fetch("/makeAssertion", {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(data), // data can be `string` or {object}!
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        });

        response = await res.json();
    } catch (e) {
        showErrorAlert("Request to server failed", e);
        throw e;
    }

    console.log("Assertion Object", response);

    // show error
    if (response.status !== "ok") {
        console.log("Error doing assertion");
        console.log(response.errorMessage);
        showErrorAlert(response.errorMessage);
        return;
    }

    // show success message
    await Swal.fire({
        title: 'Logged In!',
        text: 'You\'re logged in successfully.',
        type: 'success',
        timer: 2000
    });


    // redirect to dashboard to show keys
    window.location.href = "/dashboard/" + value("#login-username");
}

There are other essential files available in the repository that are self-explanatory.

Pressing the Create account button after entering the username and display name (password is not mandatory) will prompt you to set a pin for the Fido device. In my case, it's the FEITIAN ePass FIDO2 FIDO U2F USB-A + NFC Security Key | K9

After you set a pin, it will ask you to touch the key for your biometric data. And the registration process is done. Similarly, in the login section, you enter the username (password is not mandatory) and press the Sign in button to prompt you to touch the Fido key.

Once done, it will take you directly to the dashboard, where you can see some general information related to the public key,

Repository Link

https://github.com/fiyazbinhasan/AspNetCoreFido2MFA

To integrate Fido2 MFA with the Identity platform, take a look at this repository from Damien Bowden,

https://github.com/damienbod/AspNetCoreIdentityFido2Mfa

Important Links

Attestation and Assertion

WebAuthn Guide

WebAuthin WC3 Spec

FEITIAN ePass FIDO2 FIDO U2F USB-A

Add Fido2 MFA to an OpenIddict identity provider using ASP.NET Core Identity

The notion of having a generic repository is that you get to write less code for a bunch of similar functionalities for each entity. For example,

public interface IRepository<in TEntity> where TEntity : Entity
{
    Task Create(TEntity entity);
    Task<List<TEntity>> Read();
}

No matter how many types you have, if they extend the Entity base class then you have a common read and write functionality,

public class GenericRepository<TEntity> : 
    IRepository<TEntity>
    where TEntity : Entity
{
    private readonly ApplicationDbContext _dbContext;

    public GenericRepository(ApplicationDbContext dbContext)
    {
        _dbContext = dbContext;
    }
    public Task Create(TEntity entity)
    {
        _dbContext.Set<TEntity>().AddAsync(entity);
        return _dbContext.SaveChangesAsync();
    }

    public Task<List<TEntity>> Read()
    {
        return _dbContext.Set<TEntity>().ToListAsync();
    }
}

The entity we have in our hand is the WeatherForecast which as stated earlier entends the base Entity class,

public abstract class Entity
{
    public int Id { get; set; }
}

public class WeatherForecast : Entity
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public string? Summary { get; set; }
}

In the realm of CQRS, we should consider seperating the read and write functionalities into their respective command and query featues. Using MediatR, you would want to create two features to tackle this,

-  Features                    
  |
   -  Weather                     // Feature for a specific domain entity
     |
      -  Create                   // Generalized command featue
     |  |
     |   - Command             
     |   - CommandHandler
     |   - IRepository            // Feature level repository contract
     | 
      -  Read                     // Generalized query featue
        |
         - Query
         - QueryHandler
         - IRepository

Here comes the time you should get your thinking cap on! What happens if you a are adding another domain entity? Let's just say the new entity is FooBar. You end up with a new enity specific feature folder with same old read and write features,

-  Features                    
  | 
   -  Weather                     // Feature for a specific domain entity
  |  |
  |   -  Create                   // Generalized command featue
  |  |  |
  |  |   - Command             
  |  |   - CommandHandler
  |  |   - IRepository            // Feature level repository contract
  |  | 
  |   -  Read                     // Generalized query featue
  |     |
  |      - Query
  |      - QueryHandler
  |      - IRepository
  |
   -  Foobar                      // Feature for a specific domain entity
     |
      -  Create                   // Generalized command featue
     |  |
     |   - Command             
     |   - CommandHandler
     |   - IRepository            // Feature level repository contract
     | 
      -  Read                     // Generalized query featue
        |
         - Query
         - QueryHandler
         - IRepository

It completely depends on you whether to go with the pain of creating individual features or make a single generic one to rule them all.

For the lack of a better name, let's call the generic feature Crud,

-  Features                    
  |
   -  Crud                        // Generic feature for all domain entity
     |
      -  Create                   // Generalized command featue
     |  |
     |   - Command             
     |   - CommandHandler
     |   - IRepository            // Feature level repository contract
     | 
      -  Read                     // Generalized query featue
        |
         - Query
         - QueryHandler
         - IRepository

The generic Query should look like this,

using GenericMediatRFeatures.Entities;
using MediatR;

namespace GenericMediatRFeatures.Features.Crud.Read;

public partial class Read
{
    public record Query<TEntity> : IRequest<List<TEntity>> where TEntity : Entity;
}

The generic QueryHandler,

using AutoMapper;
using GenericMediatRFeatures.Entities;
using GenericMediatRFeatures.ViewModels;
using MediatR;

namespace GenericMediatRFeatures.Features.Crud.Read;

public partial class Read
{
    public class QueryHandler<TEntity> : IRequestHandler<Query<TEntity>, List<TEntity>> 
        where TEntity : Entity
    {
        private readonly IRepository<TEntity> _repository;

        public QueryHandler(IRepository<TEntity> repository)
        {
            _repository = repository;
        }
        
        public async Task<List<TEntity>> Handle(Query<TEntity> request, CancellationToken cancellationToken)
        {
            return await _repository.Read();
        }
    }
}

Feature level generic repository contract.

using GenericMediatRFeatures.Entities;

namespace GenericMediatRFeatures.Features.Crud.Read;

public partial class Read
{
    public interface IRepository<TEntity> where TEntity : Entity
    {
        Task<List<TEntity>> Read();
    }
}

Generally you would register all the handlers with the DI container just by calling,

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddMediatR(Assembly.GetExecutingAssembly());

But in the case of our generic handlers this won't work as it needs to know the specific type for which you are writing the handler. To overcome this problem, register these hanglers explicity,

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddMediatR(Assembly.GetExecutingAssembly());

builder.Services.AddTransient(typeof(IRequestHandler<Read.Query<WeatherForecast>, List<WeatherForecast>>),
    typeof(Read.QueryHandler<WeatherForecast>));

To call this handler from a specific controller action, inject the IMediator interface in the constructor and call the feature as shown below,

private readonly IMediator _mediator;

public WeatherForecastController(IMediator mediator)
{
    _mediator = mediator;
}

[HttpGet(Name = "GetWeatherForecast")]
public Task<List<WeatherForecast>> Get() => _mediator.Send(new Read.Query<WeatherForecast>());

Bonus:

You might not want to expose an entity directly from a controller. In that scenario, a view-model/dto could come in handy. The mapping of the entity to a view-model could be done inside the handlers. You would want to modify your Query as follows,

public partial class Read
{
    public record Query<TModel> : IRequest<List<TModel>> where TModel : ViewModel { }
}

The handler should be modified as follows,

public partial class Read
{
    public class QueryHandler<TEntity, TModel> : IRequestHandler<Query<TModel>, List<TModel>> 
        where TEntity : Entity
        where TModel: ViewModel
    {
        private readonly IRepository<TEntity> _repository;
        private readonly IMapper _mapper;

        public QueryHandler(IRepository<TEntity> repository, IMapper mapper)
        {
            _repository = repository;
            _mapper = mapper;
        }
        
        public async Task<List<TModel>> Handle(Query<TModel> request, CancellationToken cancellationToken)
        {
            return _mapper.Map<List<TModel>>(await _repository.Read());
        }
    }
}

AutoMapper  for mapping an entity to a view-model/dto

The registration of the handler is also modified,

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddMediatR(Assembly.GetExecutingAssembly());

builder.Services.AddTransient(typeof(IRequestHandler<Read.Query<WeatherForecastModel>, List<WeatherForecastModel>>),
    typeof(Read.QueryHandler<WeatherForecast, WeatherForecastModel>));

The WeatherForecastModel view-model is nothing but a `POCO `exposing only the properties that are intended. To make the mapping work, Automapper needs a mapping configuration as follows,

public partial class Read
{
    public class MapperConfiguration : Profile
    {
        public MapperConfiguration()
        {
            CreateMap<WeatherForecast, WeatherForecastModel>(MemberList.Destination)
                .ForMember(d => d.TemperatureF, opts => opts.MapFrom(s => 32 + (int) (s.TemperatureC / 0.5556)));
        }
    }
}

Here, TemperatureF is a computed property which is only available in the view-model

One last thing you would want to do is to register Automapper services in the DI container,

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAutoMapper(Assembly.GetExecutingAssembly());

Just like before, call the feature from a controller's action method,

[HttpGet(Name = "GetWeatherForecast")]
public Task<List<WeatherForecastModel>> Get() => _mediator.Send(new Read.Query<WeatherForecastModel>());

And here you have it; a generic feature to handle all crud related operations for every entiy. Browse the repository source code to find the implementation of the generic Write command which is pretty similar to the Read feature that I've demonstrated.

Repository:

GitHub - fiyazbinhasan/GenericMediatRFeatures

Contribute to fiyazbinhasan/GenericMediatRFeatures development by creating an account on GitHub.

GitHubfiyazbinhasan

Links:

AutoMapper

AutoMapper : A convention-based object-object mapper. 100% organic and gluten-free. Takes out all of the fuss of mapping one object to another.

Home · jbogard/MediatR Wiki

Simple, unambitious mediator implementation in .NET - Home · jbogard/MediatR Wiki

GitHubjbogard

Mediator is one of the 23 design patterns stated inside the GOF Design Patterns book. All it does is encapsulates the communication between objects, hence no coupling. It falls into the object behavior patterns category.

Nevertheless, this pattern is widely used in many productions ready libraries; MediatR is such as one. Recently I've been dwelling in the world of messaging frameworks. In the land of so many awesome libraries, one caught my eyes. Ladies and gentlemen, I present to you MassTransit.

Anyways, I was glad to find out that MassTransit has a Mediator implementation that may/may not (depends on your use case) replace the need of MediatR.

MassTransit Mediator runs in-process and in-memory, no transport (RabbitMQ, Service Bus, etc.) is required i.e. pretty similar to MediatR. So, why using two separate libraries when you can use one? Am I right or am I right?

No more talking. Here goes an example.

• Start with the default ASP.NET Core Web API project. I'm using .NET 6.
• Add MassTransit.AspNetCore package from NuGet.
• Configure the MassTransit Mediator services as follows,

using MassTransit;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddMediator();

/* Code removed for brevity */

var app = builder.Build();

/* Code removed for brevity */

app.Run();

MassTransit is consumer-based, unlike MediatR that uses RequestHandlers for handling Queries and Commands. You can write a consumer for GetWeatherForecast like this:

using MassTransit;

namespace WeatherAPI;

public class GetWeatherForecastConsumer : IConsumer<GetWeatherForecasts>
{
    private static readonly string[] Summaries = new[] 
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public async Task Consume(ConsumeContext<GetWeatherForecasts> context)
    {
        var forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateTime.Now.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        }).ToArray();

        await context.RespondAsync<WeatherForecasts>(new
        {
            Forecasts = forecasts
        });
    }
}

Both GetWeatherForecasts and WeatherForecasts are message contracts. In MassTransit, contracts are simply interfaces,

public interface GetWeatherForecasts
{
}

public interface WeatherForecasts
{
    WeatherForecast[] Forecasts {  get; }
}

GetWeatherForecasts is empty cause we ain't passing any input arguments to get the forecasts.

Getting back to the WeatherForecastController, a request client is needed to get a response from the GetWeatherForecastConsumer,

using MassTransit;
using Microsoft.AspNetCore.Mvc;

namespace WeatherAPI.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private readonly IRequestClient<GetWeatherForecasts> _requestClient;

        public WeatherForecastController(IRequestClient<GetWeatherForecasts> requestClient)
        {
            _requestClient = requestClient;
        }

        [HttpGet]
        public async Task<IEnumerable<WeatherForecast>> Get()
        {
            var response = await _requestClient.GetResponse<WeatherForecasts>(new { });
            return response.Message.Forecasts;
        }
    }
}

Pretty much done accept for the service registrations for GetWeatherForecastConsumer and IRequestClient<GetWeatherForecats>. Going back to the Program.cs, configure the AddMediator service as follows,

builder.Services.AddMediator(cfg =>
{
    cfg.AddConsumers(Assembly.GetExecutingAssembly());
    cfg.AddRequestClient<GetWeatherForecasts>();
});

AddConsumers(Assembly.GetExecutingAssembly()) will register all the consumers available in the current assembly. AddRequestClient<GetWeatherForecasts>() will register a request client for GetWeatherForecasts.

Done! Run the application and everything should work properly.

Extras:

Wondering whether you can register request clients on demand? Sure, you can! Inject the IMediator interface in the constructor of WeatherForecastController and use it to create a request client like this:

using MassTransit.Mediator;
using Microsoft.AspNetCore.Mvc;

namespace WeatherAPI.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private readonly IMediator _mediator;

        public WeatherForecastController(IMediator mediator)
        {
            _mediator = mediator;
        }

        [HttpGet]
        public async Task<IEnumerable<WeatherForecast>> Get()
        {
            var client = _mediator.CreateRequestClient<GetWeatherForecasts>();

            var response = await client.GetResponse<WeatherForecasts>(new { });
            return response.Message.Forecasts;
        }
    }
}

Remove the AddRequestClient<GetWeatherForecasts>() from Program.cs as it is no longer needed.

Github Repository:

GitHub - fiyazbinhasan/MassTransitMediator

Contribute to fiyazbinhasan/MassTransitMediator development by creating an account on GitHub.

GitHubfiyazbinhasan

Important Links:

Mediator | MassTransit

A free, open-source distributed application framework for .NET.

MassTransit

Requests | MassTransit

A free, open-source distributed application framework for .NET.

MassTransit

Consumers | MassTransit

A free, open-source distributed application framework for .NET.

MassTransit

Roslyn Analyzers | MassTransit

A free, open-source distributed application framework for .NET.

MassTransit

There are only two hard things in Computer Science: cache invalidation and naming things. - Phil Karlton

Static Files:

The StaticFiles middleware is responsible for serving static files (CSS, javascript, image, etc.) from a configurable file location (typically from the wwwroot folder). A simple HTTP call for a static file would look something like the following,

If you try the same thing from a browser, for successive requests you will get a 304 Not Modified. That is because of the ETag and Last-Modified headers. By default, the StaticFiles middleware uses these headers for cache invalidation purposes.

The integrity of the cache is  assessed by comparing the If-Modified-Since and If-None-Match header values with the previously sent Etag and Last-Modified header values respectively. If it matches; means our cache is still valid and the server sends a 304 Not Modified status to the browser. On the browser's end, it handles the status by serving up the static file from its cache.

The reason behind taking an approach like this is that you don't want your server getting worked up for handling a file that doesn't change frequently.

You might be wondering, to check the integrity of the cache, we are calling the server again. So how does it benefit me? Although it's a new HTTP request, the request payload is much less than a full-body request. It checks if the request passes cache validation. A valid cache will make a request to opt-out of further processing.

Along the way, if you want to have total control over the caching of a static file, you can configure the StaticFiles middleware with StaticFileOptions. The following will remove the ETag and Last-Modified headers and only add a Cache-Control header,

app.UseStaticFiles(new StaticFileOptions()
{
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Remove("ETag");
        ctx.Context.Response.Headers.Remove("Last-Modified");
        ctx.Context.Response.Headers.Append("Cache-Control", "private,max-age=100");
    }
});

The cache invalidation part is now gone forever, and the file is in the memory-cache for 100 seconds only. After 100 seconds, the browser will again request the server to get the file like it was the first time.

File Action Results:

You typically use one of the following FileResult to write a file to the response,

All of these FileResult inherit from the IActionResult interface. So you would want to use a less derived type for the return type,

public IActionResult Download()
{
    return File("/assets/guitar.mp3", 
        "audio/mpeg", 
        "guitar.mp3");
}

Using FileResult in earlier versions of .NET Core (1.*), you could have served files. However, there wasn't any way of configuring cache headers for the responses.

Now, FileResult can be overloaded with the following parameters,

• DateTimeOffset? lastModified
• EntityTagHeaderValue entityTag
• bool enableRangeProcessing

With help of these parameters now you can add cache headers to any file that you want to write to the response. Here is an example of how you will do it,

[HttpGet("download")]
[ResponseCache(Duration = 10, Location = ResponseCacheLocation.Client)]
public IActionResult Download()
{
    return File("/assets/guitar.mp3", 
        "audio/mpeg", 
        "guitar.mp3",
        lastModified: DateTime.UtcNow.AddSeconds(-5),
        entityTag: new EntityTagHeaderValue($"\"{Convert.ToBase64String(Guid.NewGuid().ToByteArray())}\""),
        enableRangeProcessing: true);
}

This is just a simple example. In production, you would set entityTag and lastModified to some real-world values.

You can take a look at the AvatarController to see how to validate an in-memory cache entry using Etag

How do you add other cache headers like Cache-Control in this scenario? Well you can use the Response Caching Middleware and decorate your action with the ResponseCache attribute like the following,

[HttpGet("download")]
[ResponseCache(Duration = 10, Location = ResponseCacheLocation.Client)]
public IActionResult Download()
{
    return File("/assets/guitar.mp3",
        "audio/mpeg",
        "guitar.mp3",
        lastModified: DateTime.UtcNow.AddSeconds(-5),
         entityTag: new EntityTagHeaderValue($"\"{Convert.ToBase64String(Guid.NewGuid().ToByteArray())}\""),
        enableRangeProcessing: true);
}

For static files, the value for entityTag and lastModified is calculated using the following code snippet,

if (_fileInfo.Exists)
{
    _length = _fileInfo.Length;

    DateTimeOffset last = _fileInfo.LastModified;
            // Truncate to the second.
    _lastModified = new DateTimeOffset(last.Year, last.Month, last.Day, last.Hour, last.Minute, last.Second, last.Offset).ToUniversalTime();

     long etagHash = _lastModified.ToFileTime() ^ _length;
     _etag = new EntityTagHeaderValue('\"' + Convert.ToString(etagHash, 16) + '\"');
}

Anyways, you can also request partial resources by adding a Range header in the request. The value of the header would be a bytes=to-from range. Following is an example of the Range header in action,

Note: every resource can be partially delivered. Some partial requests can make the resource unreadable/corrupted. So, use the Range header wisely.

Repository Link:

fiyazbinhasan/RangeEtagsLastModified

Contribute to fiyazbinhasan/RangeEtagsLastModified development by creating an account on GitHub.

GitHubfiyazbinhasan

Important Links:

Response Caching Middleware in ASP.NET Core

Learn how to configure and use Response Caching Middleware in ASP.NET Core.

Microsoft DocsRick-Anderson

Fiyaz Bin Hasan (Fizz) on LinkedIn: Caching - Ins & Outs - Fiyaz Hasan

At #Cefalo, it’s not always about coding! Sometimes we do take time for R&D and stuff on topics we are interested in. Then we share our insights on what...

LinkedIn334 Posts

https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

I'm a massive fan of the Redux pattern. I would say one thing, though, it's not everyone's cup of tea. It adds extra boilerplate code and may look overwhelming at first. But you get used to it and start to appreciate its power once your application grows to be a giant where state management becomes a nightmare.

Talking of sidekicks, React has Redux; Angular has NGRX; what does Blazor have? I'm really into this library called Fluxor recently. You can carry over your existing knowledge of any Redux based state management library over here, and you are good to go.

You start by adding the following packages to your Blazor Server/WASM application,

dotnet add package Fluxor.Blazor.Web

dotnet add package Fluxor.Blazor.Web.ReduxDevTools

Register Fluxor services with the default IoC container. You would do that in the Program.cs file,

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    
    /* Code removed for brevity */

    builder.Services.AddFluxor(opt =>
    {
        opt.ScanAssemblies(typeof(Program).Assembly);
        opt.UseRouting();
        opt.UseReduxDevTools();
    });

    await builder.Build().RunAsync();
}

Inside index.html, add the script reference for Fluxor.Blazor.Web,

<!DOCTYPE html>
<html>

<head>
    <!-- Code removed for brevity -->
</head>

<body>
    <!-- Code removed for brevity -->
    
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
</body>

</html>

Store:

As the name suggests, a store persists in an application state tree, i.e., the build-out of different feature states. The Store has to be initialized when the application first kicks off. Hence, it is best to put out the Store initialization logic in the App component,

<Fluxor.Blazor.Web.StoreInitializer />

<Router AppAssembly="@typeof(Program).Assembly">
    <!-- Code remve for brevity -->
</Router>

Feature:

Feature is an area that provides a new piece of state for the Store. To declare a feature, you would want to extend the abstract Feature<T> class available in Fluxor. Feature<T> takes a state type. The following feature class can be used to name a feature and an initial state for the CounterState type,

public class Feature : Feature<CounterState>
{
    public override string GetName()
    {
        throw new NotImplementedException();
    }

    protected override CounterState GetInitialState()
    {
        throw new NotImplementedException();
    }
}

The state contains nothing but some properties. A state should be immutable in nature. You should never mutate a state directly, rather return a new state by changing its different properties. Hence, we can go for a record instead of a class,

public record CounterState(int Count);

public class Feature : Feature<CounterState>
{
    public override string GetName() => "Counter";

    protected override CounterState GetInitialState() => new(0);
}

CounterState contains a init only property Count and it is initialized with the value 0.

Action:

A state should change based on different actions dispatched on it. An action may or may not have arguments. For example, an IncrementCounterAction does nothing but increment the Count property by 1; but if you want to change the increment value to something more dynamic, use arguments.

public record IncrementCounterAction();
public record IncrementCounterByAction(int IncrementBy);

Reducer:

A reducer is a pure function that takes the current state and action being dispatched upon it. Depending on the action type, it produces a new state and returns it.

public class Reducers
{
    [ReducerMethod]
    public static CounterState ReduceIncrementCounterAction(CounterState state, IncrementCounterAction action) =>
           state with { Count = state.Count + 1 };

    [ReducerMethod]
    public static CounterState ReduceIncrementCounterByAction(CounterState state, IncrementCounterByAction action) =>
           state with { Count = state.Count + action.IncrementBy };
}

Effect:

Effects are used to handle side effects in your application. A side effect can be anything from a long-running task to an HTTP call to service. In these cases, state changes are not instantaneous. Effects perform tasks, which are synchronous/asynchronous, and dispatch different actions based on the outcome. The following uses the HttpClient to asynchronously get the content of the sample-data/weather.json file.

public class Effects
{
    private readonly HttpClient _httpClient;

    public Effects(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    [EffectMethod]
    public async Task HandleAsync(FetchDataAction action, IDispatcher dispatcher)
    {
        try
        {
            var forecasts = await _httpClient.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
            dispatcher.Dispatch(new FetchDataSuccessAction(forecasts));
        }
        catch (Exception ex)
        {
            dispatcher.Dispatch(new FetchDataErrorAction(ex.Message));
        }
    }
}

Check the FetchDataUseCase to get a better understanding of the related state, actions, reducers and effects.

Accessing State:

Feature states can be injected into a razor component using the IState<T> interface. The following shows how to inject the Counter state into the Counter.razor component,

@page "/counter"

@using Fluxord
@inject IState<CounterState> _counterState

<h1>Counter</h1>

<p>Current count: @_counterState.Value.Count</p>

You use the Value property to get access to different properties of the injected state

Dispatching Action:

To dispatch an action on the store depending on a UI event, inject the IDispatcher service and use the Dispatch the method passing the type of action.

@page "/counter"

@using Fluxor
@using FlashCardsWasm.Store.CounterUseCase
@inject IState<CounterState> _counterState
@inject IDispatcher _dispatcher

<h1>Counter</h1>

<p>Current count: @_counterState.Value.Count</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private void IncrementCount()
    {
        _dispatcher.Dispatch(new IncrementCounterAction());
    }
}

A similar approach is taken FetchData component. Although one thing to notice here is the inheritance of the component from FluxorComponent. Dispatching of the FetchDataSuccessAction and FetchDataErrorAction is happening from within the Effects. The UI has to be notified i.e. call StateHasChanged when these actions are dispatched. Using the FluxorComponent takes care of that.

@page "/fetchdata"

@using Fluxor
@using FlashCardsWasm.Store.FetchDataUseCase
@using static FlashCardsWasm.Store.FetchDataUseCase.Actions
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject IState<FetchDataState> _fetchDataState


@if (_fetchDataState.Value.Error != null)
{
    <MudAlert Severity="Severity.Error">@_fetchDataState.Value.Error</MudAlert>
}
else
{
    <MudGrid Class="mt-4">
        <MudItem xs="12" sm="12" md="12">
            <MudText Typo="Typo.h3">Weather forecast</MudText>
            <MudText Typo="Typo.subtitle1">This component demonstrates fetching data from a service.</MudText>
        </MudItem>
        <MudItem xs="12" sm="12" md="12">
            <MudTable Items="@_fetchDataState.Value.Forecasts" Hover="true" Breakpoint="Breakpoint.Md" Loading="@_fetchDataState.Value.IsLoading"
        LoadingProgressColor="Color.Info">
                <HeaderContent>
                    <MudTh>Date</MudTh>
                    <MudTh>Temp. (C)</MudTh>
                    <MudTh>Temp. (F)</MudTh>
                    <MudTh>Summary</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd DataLabel="Date">@context.Date</MudTd>
                    <MudTd DataLabel="TempC">@context.TemperatureC</MudTd>
                    <MudTd DataLabel="TempF">@context.TemperatureF</MudTd>
                    <MudTd DataLabel="Summary">@context.Summary</MudTd>
                </RowTemplate>
            </MudTable>
        </MudItem>
    </MudGrid>
}



@code {
    [Inject]
    public IDispatcher Dispatcher { get; set; }

    protected override void OnInitialized()
    {
        Dispatcher.Dispatch(new FetchDataAction());
        base.OnInitialized();
    }
}

Redux DevTools

To tinker around with the application state, you should have the Redux DevTools extension installed in your preferred browser. Open up the Developer Console of your browser and go to the Redux tab. You will see what actions are dispatched and how your application state is modified.

Repository Link:

Part II - https://github.com/fiyazbinhasan/FlashCardsWasm/tree/Part-II-State-Management-With-Fluxor

fiyazbinhasan/FlashCardsWasm

Contribute to fiyazbinhasan/FlashCardsWasm development by creating an account on GitHub.

GitHubfiyazbinhasan

Important Links:

mrpmorris/Fluxor

Fluxor is a zero boilerplate Flux/Redux library for Microsoft .NET and Blazor. - mrpmorris/Fluxor

GitHubmrpmorris

GeekHour.AspNetCore.BlazorFluxor.Templates 1.0.1

Project templates Blazor and Fluxor.

Bootstrap is all good and graceful, but let's go for different cuisine. MudBlazor is an open-source library that you want to look at if you are into Material Design. The community is welcoming, and they are pushing new updates every once in a while.

MudBlazor - Blazor Component Library

Blazor Component Library based on Material Design. MudBlazor is easy to use and extend, especially for .NET devs because it uses almost no Javascript.

MudBlazor

Consider this post as an intro to MudBlazor. The default template for a Blazor WebAssembly comes in with some layouts and pages. Although our flashcards application doesn't require these boilerplate markups, I'm keeping them for the time being. I'm going to try out some MudBlazor components on these pages and layouts.

After creating a Blazor WASM application, you would need to install the NuGet package for MudBlazor,

dontet new blazorwasm --no-https

dotnet add package MudBlazor

Inside _Imports.razor, add the following,

@using MudBlazor

Add the Roboto font-face & MudBlazor style references in index.html,

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

While you are at it, delete the references of bootstrap.min.css and app.css files. Also, delete MainLayout.razor.css & NavMenu.razor.css as we want to start from scratch.

You can delete the css folder under wwwroot altogether. We will add a custom css file whenever we need one.

Add the script file reference for MudBlazor inside the body right after _framework/blazor.webassembly.js

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Register the MudBlazor services with the built-in IoC container. For Blazor WASM, Program.cs class is the place where you register your services,

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    
    /* Code removed for brevity */
    
    builder.Services.AddMudServices();
    
    await builder.Build().RunAsync();
}

Some MudBlazor components need initialization beforehand. Here are the components you need to add in the MainLayout.razor,

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

Hot Reload

Before moving forward, I would like to point out a new feature in .NET 6.0 called Hot Reload.

Hot reload is used to refresh only the file in which code is changed while preserving the application state

In every SPA framework (React/Angular/Vue), this feature is available. It is hugely beneficial if you think from a designer's perspective. You don't have to stop and start an application every time a tiny design change is needed.

To enable Hot Reload in a Blazor WASM app, in your launchSettings.json add the following lines under the profiles tag,

To try out hot reload with an existing ASP.NET Core project based on .NET 6, add the "hotReloadProfile": "aspnetcore" property

You would run your application in watch mode using the following command,

dotnet watch run

And you will never have to stop and start your application from now on for a small change.

Wire Frames

There are some ready-to-use wireframes from MudBlazor. These are some frequently seen layouts on the web built with different MudBlazor components like MudLayout, MudAppBar, MudDrawer, and MudMainContent.  Replace the existing markup in the MainLayout.razor with the following,

There are some ready-to-use wireframes from MudBlazor. These are frequently seen layouts on the web built with different MudBlazor components like MudLayout, MudAppBar, MudDrawer, and MudMainContent. Replace the existing markup in the MainLayout.razor with the following,

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"
            OnClick="@((e) => DrawerToggle())" />
        <MudAppBarSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="2">
        <MudDrawerHeader>
            <MudText Typo="Typo.h5">Flash Cards</MudText>
        </MudDrawerHeader>
        <MudDivider />
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="px-8" MaxWidth="MaxWidth.False">
        @Body
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

Moving on to the NavMenu component, I'm using MudNavMenu and MudNavLink. MudNavLink automatically assigns an active class on a selected menu item based on the current route.

 <MudNavMenu>
    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Filled.Dashboard" IconColor="Color.Inherit">Home</MudNavLink>
    <MudNavLink Href="counter" Icon="@Icons.Filled.Timer" IconColor="Color.Inherit">Counter</MudNavLink>
    <MudNavLink Href="fetchdata" Icon="@Icons.Filled.FileDownload" IconColor="Color.Inherit">Fetch data</MudNavLink>
</MudNavMenu>

For structuring individual pages, try out the MudGrid. Starting with index.razor page,

@page "/"

<MudGrid Class="mt-4">
    <MudItem xs="12" sm="12" md="12">
        <MudText Typo="Typo.h3">Hello, world!</MudText>
        <MudText Typo="Typo.subtitle1">Welcome to your new app.</MudText>
    </MudItem>
</MudGrid>

With xs, sm and md, you define how many units in the grid the MudItem will take based on different display real-estates. To stay consistent with the typography, MudText has been used with different Typo attributes.

The same thing goes for the Counter.razor page. Here, we have a new MudButton component,

@page "/counter"

<MudGrid Class="mt-2">
    <MudItem xs="12" sm="12" md="12">
        <MudText Typo="Typo.h3">Counter</MudText>
        <MudText Typo="Typo.subtitle1">Current count: @currentCount</MudText>
    </MudItem>
    <MudItem xs="12" sm="12" md="12">
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="IncrementCount">Click me</MudButton>
    </MudItem>
</MudGrid>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

For FetchData.razor page, I'm using the MudTable. It has cool features like binding items directly to the Items attribute instead of having to create a foreach loop and a progress bar. Also, it changes its layout based on the screen width.

@page "/fetchdata"
@inject HttpClient Http

<MudGrid Class="mt-4">
    <MudItem xs="12" sm="12" md="12">
        <MudText Typo="Typo.h3">Weather forecast</MudText>
        <MudText Typo="Typo.subtitle1">This component demonstrates fetching data from a service.</MudText>
    </MudItem>
    <MudItem xs="12" sm="12" md="12">
        <MudTable Items="@forecasts" Hover="true" Breakpoint="Breakpoint.Md" Loading="@(forecasts == null)"
            LoadingProgressColor="Color.Info">
            <HeaderContent>
                <MudTh>Date</MudTh>
                <MudTh>Temp. (C)</MudTh>
                <MudTh>Temp. (F)</MudTh>
                <MudTh>Summary</MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd DataLabel="Date">@context.Date</MudTd>
                <MudTd DataLabel="TempC">@context.TemperatureC</MudTd>
                <MudTd DataLabel="TempF">@context.TemperatureF</MudTd>
                <MudTd DataLabel="Summary">@context.Summary</MudTd>
            </RowTemplate>
        </MudTable>
    </MudItem>
</MudGrid>

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

The last bit I wanna talk about is wiring up your modified theme to the <MudThemeProvider/>. You can create an instance of MudTheme and add different Palettes, Shadows, Typography, Layout Properties, and z-index for your components to use universally.

Here is how you should do it in the MainLayout.razor,

<MudThemeProvider Theme="_customTheme" />

@code {
	readonly MudTheme _customTheme = new MudTheme()
    {
        Palette = new Palette()
        {
            Primary = "#de5c9d",
            Secondary = "#0d6efd",
            AppbarBackground = "#6f42c1",
            Error = "#dc3545",
            Success = "#198754",
            Info = "#0d6efd"
        },

        LayoutProperties = new LayoutProperties()
        {
            DrawerWidthLeft = "320px"
        }
    };
}

Repository Links:

Part I - https://github.com/fiyazbinhasan/FlashCardsWasm/tree/Part-I-Hot-Reload-And-MudBlazor

fiyazbinhasan/FlashCardsWasm

Contribute to fiyazbinhasan/FlashCardsWasm development by creating an account on GitHub.

GitHubfiyazbinhasan

fiyazbinhasan/FlashCards

Learning Blazor By Creating A Flash Cards Application - fiyazbinhasan/FlashCards

GitHubfiyazbinhasan

Useful Links:

.NET 6 Preview 3 Furthers ‘Hot Reload Everywhere’ Push for Blazor, More -- Visual Studio Magazine

.NET 6 Preview 3 includes early Hot Reload support for ASP.NET Core/Blazor web apps, furthering a push to make it available across the entire tooling gamut.

Visual Studio MagazineDavid Ramel

What formatters do is format your response and request in your preferred data formats. For example, JSON formatters; if used, would format your response (returned value from controller's action) and request (value passed as a parameter to the controller) in JSON. The same goes for the XML and other formatters. Out of the box, .NET provides some response data formatters. This official documentation described them briefly.

But let’s not talk too much about formatters;  rather let's see how we can make one. I think that’s what we are here for, right? Yeah! Let’s get started.

We have two abstract classes provided by the framework, InputFormmeter, and OutputFormatter. You would want to extend from these classes to make your custom formatters. To make things a bit easier to work with responses that are simple string representations of data formats there are two other abstract formatter classes i.e. TextInputFormatter and TextOuputFormatter.

When using the Yaml output formatter you would get the response out of the current HttpContext and serialize them into raw Yaml response text. Pretty much the same goes for the input formatter. In this case, you would deserialize the Yaml content from the request and use them in a generic form. Another important thing is that you have to explicitly set a media type header for these formatters. Doing that will activate the formatters whenever a client defines an Accept header (for output) and Content-Type (for input) with that specific media type format e.g. application/x-yaml.

If you don’t want to use those headers while calling your controller’s actions you can explicitly define the type of the formatter that should be used while getting or posting content. For example, the [Produces("application/x-yaml")] will return the response in Yaml format whether you define an Accept header or not. Again using the [Consumes("application/x-yaml")] attribute would only accept Yaml content whether you define the Content-Type or not.

By the way, I’m using the YamlDotNet library from @antoineaubry for Yaml’s serializing and deserializing process.

Yaml Output Formatter

public class YamlOutputFormatter : TextOutputFormatter
{
    private readonly Serializer _serializer;

    public YamlOutputFormatter(Serializer serializer)
    {
        _serializer = serializer;

        SupportedEncodings.Add(Encoding.UTF8);
        SupportedEncodings.Add(Encoding.Unicode);
        SupportedMediaTypes.Add(MediaTypeHeaderValues.ApplicationYaml);
        SupportedMediaTypes.Add(MediaTypeHeaderValues.TextYaml);
    }

    public override async Task WriteResponseBodyAsync(OutputFormatterWriteContext context, Encoding selectedEncoding)
    {
        if (context == null)
        {
            throw new ArgumentNullException(nameof(context));
        }

        if (selectedEncoding == null)
        {
            throw new ArgumentNullException(nameof(selectedEncoding));
        }

        var response = context.HttpContext.Response;
        using (var writer = context.WriterFactory(response.Body, selectedEncoding))
        {
            WriteObject(writer, context.Object);

            await writer.FlushAsync();
        }
    }

    private void WriteObject(TextWriter writer, object value)
    {
        if (writer == null)
        {
            throw new ArgumentNullException(nameof(writer));
        }

        _serializer.Serialize(writer, value);
    }
}

The code is pretty much self-explanatory. Get the Yaml content from the request body and deserialize them into a generic type and you are done.

The same goes for the input formatter. In this case, you would serialize the Yaml content from the client's request and use them in a generic form.

Yaml Input Formatter

public class YamlInputFormatter : TextInputFormatter
{
    private readonly Deserializer _deserializer;

    public YamlInputFormatter(Deserializer deserializer)
    {
        _deserializer = deserializer;

        SupportedEncodings.Add(Encoding.UTF8);
        SupportedEncodings.Add(Encoding.Unicode);
        SupportedMediaTypes.Add(MediaTypeHeaderValues.ApplicationYaml);
        SupportedMediaTypes.Add(MediaTypeHeaderValues.TextYaml);
    }

    public override async Task<InputFormatterResult> ReadRequestBodyAsync(InputFormatterContext context, Encoding encoding)
    {
        if (context == null)
        {
            throw new ArgumentNullException(nameof(context));
        }

        if (encoding == null)
        {
            throw new ArgumentNullException(nameof(encoding));
        }

        var request = context.HttpContext.Request;

        using (var streamReader = context.ReaderFactory(request.Body, encoding))
        {
            var type = context.ModelType;

            try
            {
                var content = await streamReader.ReadToEndAsync();
                var model = _deserializer.Deserialize(content, type);
                return await InputFormatterResult.SuccessAsync(model);
            }
            catch (Exception)
            {
                return await InputFormatterResult.FailureAsync();
            }
        }
    }
}

MediaTypeHeaderValues a class where I've set up all the media type headers for my application.

 internal class MediaTypeHeaderValues
 {
     public static readonly MediaTypeHeaderValue ApplicationYaml
         = MediaTypeHeaderValue.Parse("application/x-yaml").CopyAsReadOnly();

     public static readonly MediaTypeHeaderValue TextYaml
         = MediaTypeHeaderValue.Parse("text/yaml").CopyAsReadOnly();
 }

Notice that the YamlInputFormatter’s constructor is accepting a Deserializer where YamlOutputFormatter  is accepting a Serializer. You can build the serialize and deserializer with some options while configuring the formatters in the Startup.cs.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers(options => {
        options.InputFormatters.Add(new YamlInputFormatter(new DeserializerBuilder().WithNamingConvention(namingConvention: new CamelCaseNamingConvention()).Build()));
        options.OutputFormatters.Add(new YamlOutputFormatter(new SerializerBuilder().WithNamingConvention(namingConvention: new CamelCaseNamingConvention()).Build()));
        options.FormatterMappings.SetMediaTypeMappingForFormat("yaml", MediaTypeHeaderValues.ApplicationYaml);
    });
}

A GET request with Accept header set to application/x-yaml

Request
-------

curl -X 'GET' \
  'http://localhost:5000/api/Geeks' \
  -H 'accept: application/x-yaml'

Response
--------

- id: 1
  name: Fiyaz
  expertise: Javascript
  rating: 4.0
- id: 2
  name: Rick
  expertise: .Net
  rating: 5.0

A POST request with Content-Type header set to application/x-yaml

curl -X 'POST' \
  'http://localhost:5000/api/Geeks' \
  -H 'accept: application/x-yaml' \
  -H 'Content-Type: application/x-yaml' \
  -d 'id: 3
name: Jon Doe
expertise: Lorem Ipsum
rating: 5'

FormatterMappings lets you call an action with a specific format defined in a URL segment.

[FormatFilter]
[HttpGet]
[HttpGet("/api/[controller].{format}")]
public IEnumerable<Geek> Get()
{
    return _geeks;
}

You can call the action like,

http://appurl/geeks.yaml

to get the response in Yaml

Or you can call it like,

http://appurl/geeks.json

to get the response in JSON format.

And that’s it. This is all you need to know about building custom formatters in .NET. You can find a bunch of other formatters from other awesome community members scattered around the web if you want.

Repository Link:

fiyazbinhasan/CoreFormatters

.NET Core Custom Formatter for Yaml. Contribute to fiyazbinhasan/CoreFormatters development by creating an account on GitHub.

GitHubfiyazbinhasan

Important Links:

Format response data in ASP.NET Core Web API

Learn how to format response data in ASP.NET Core Web API.

Microsoft DocsRick-Anderson

Custom formatters in ASP.NET Core Web API

Learn how to create and use custom formatters for web APIs in ASP.NET Core.

Microsoft DocsRick-Anderson

There are a bunch of dotnet templates readily available for use. To list out all the templates, open up the command prompt and type in the following command,

dotnet new --list

That's all fine and dandy! But what about creating your templates? Say, for example, you are bootstrapping a multi-project (e.g. Web, Domain, Infrastructure) microservice-based solution and find it super helpful for others to use as well. You can easily ship your template to NuGet or other sources following some easy steps.

Recently, I'm working mostly with Blazor and Fluxor (A state management library just like Redux/Flow). I was doing some tedious work every time I wanted to start from scratch,

• I've to use dotnet new blazorserver or dotnet new blazorwasm to create a new project.

dotnet new blazorserver -o BlazorServer
dotnet new blazorwasm -o BlazorWasm

• Install Fluxor.Balzor.Web and wire it up in the Startup.cs or Program.cs

Fluxor.Blazor.Web 4.1.0

A zero boilerplate Redux/Flux framework for Blazor

services.AddFluxor(opt =>
{
    opt.ScanAssemblies(typeof(Program).Assembly);
    opt.UseRouting();
    opt.UseReduxDevTools();
});

• Add a Store folder and add necessary code files for Actions, Reducers, State, Feature, Effects, so on and so forth
• Initialize the Store in the App.razor

<Fluxor.Blazor.Web.StoreInitializer />

• Import the <script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script> in _Host.razor or index.html

<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>

I figured out that it would be easier if I just create some custom templates where all of this boilerplate stuff is already in place for me. Speaking of creating custom templates for Blazor + Fluxor, here's a shameless plug

GeekHour.AspNetCore.BlazorFluxor.Templates 1.0.1

Project templates Blazor and Fluxor.

Project Structure

The project structure I'm going for is following

BlazorFluxorTemplates
│   GeekHour.AspNetCore.BlazorFluxor.Templates.nuspec
│
└───Content
    ├───BlazorFluxorWasm
    │   │   project files
    │   │
    │   └───.template.config
    │           template.json
    │
    └───BlazorFluxorServer
        │   project files
        │
        └───.template.config
                template.json

There are a couple of ways you can use to pack up a template into a NuGet package,

The dotnet pack command and a .csproj file. Alternatively,  nuget pack command along with a .nuspec file

I'm going for the second route, hence I have a .nuspec file at the root of the project folder. To run nuget pack command, you would need the Nuget.exe. No worries! Just download it from, nuget.org/downloads.

So, I have two project folders under the Content folder, each one containing a different flavor of Blazor wired up with Fluxor. You can get a better look at those here,

GeekyHours/BlazorFluxorTemplates

Contribute to GeekyHours/BlazorFluxorTemplates development by creating an account on GitHub.

GitHubGeekyHours

.NET template engine expects that you have a .template.config folder on the root of your runnable project. To turn that runnable project into a template with some desired configurations, you better have a template.json file under the .template.config folder.

{
    "$schema": "http://json.schemastore.org/template",
    "author": "Geek Hour",
    "classifications": [ "Web", "Blazor", "Fluxor" ],
    "identity": "GeekHour.Web.BlazorFluxorServer.CSharp.6.0",
    "name": "Blazor Fluxor Server Application",
    "shortName": "blazorfluxorserver",
    "tags": {
        "language": "C#",
        "type": "project"
    },
    "sourceName": "BlazorFluxorServer",
    "preferNameDirectory": true,
    "defaultName": "BlazorFluxorServer",
    "description": "Blazor server template wired with Fluxor"
  }

Pretty much everything is self-explanatory in the configuration file. To know more about what each of these flags does, refer to this official doc.

At this point, you are ready to install the templates locally using the following command,

> dotnet new --install .\BlazorFluxorTemplates\Content\

Template Name                     Short Name          Language  Tags
--------------------------------  ------------------  --------  -----------------------------
Blazor Fluxor Server Application  blazorfluxorserver  [C#]      Web/Blazor/Fluxor
Blazor Fluxor Wasm Application    blazorfluxorwasm    [C#]      Web/Blazor/Fluxor/WebAssembly

Time for creating the .nuspec file,

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">
  <metadata>
    <id>GeekHour.AspNetCore.BlazorFluxor.Templates</id>
    <version>1.0.1</version>
    <description>
      Project templates Blazor and Fluxor.
    </description>
    <authors>Geek Hour</authors>
    <license type="expression">MIT</license>
    <projectUrl>https://github.com/GeekyHours/BlazorFluxorTemplates</projectUrl>
    <repository type="git" url="https://github.com/GeekyHours/BlazorFluxorTemplates" branch="main"/>
    <tags>Blazor Fluxor Server WebAssembly Template</tags>
    <packageTypes>
      <packageType name="Template" />
    </packageTypes>
  </metadata>
  <files>
    <file src="Content\**\*.*" exclude="Content\**\bin\**\*.*;Content\**\obj\**\*.*" target="Content" />
  </files>  
</package>

The important thing to notice here is the <files> node; You have to include the location of the template files here.

All done! Time to run the nuget pack command to create a Nuget package (.nupkg). I have downloaded Nuget.exe in C:\ drive, so first I've to go inside the directory and then specify the location of the .nuspec file following the pack command.

Now that you have the Nuget package (.nupkg), you can upload it the nuget.org so that the rest of the world can use your template.

Useful Links:

Custom templates for dotnet new - .NET CLI

Learn about custom templates for any type of .NET project or files.

Microsoft Docsadegeo

dotnet/templating

This repo contains the Template Engine which is used by dotnet new - dotnet/templating

GitHubdotnet

sayedihashimi/template-sample

Contribute to sayedihashimi/template-sample development by creating an account on GitHub.

GitHubsayedihashimi