As some of my colleagues and friends may already know, I’m a live concert enthusiast. I think I’ve been to hundreds of concerts since the age of 14. But as I get older, it becomes more complicated to remember them all. That’s the idea behind this sample application. It might be a bit over-engineered, but it also serves as a demonstration project for using Blazor with ASP.NET Core and the Fluent Design Language.

This project will demonstrate the following Blazor topics:
– Navigation
– URLs for pages
– Displaying data
– Editing data
– Dialogs

App Structure

When you start from scratch, as I described in this [post](https://oliverscheer.net/posts/en/2024/06/05/getting-started-with-blazor-and-fluent/), you’ll have a quite simple project structure with a few sample pages. What I really like about Blazor is that you can structure your folders as you like, without affecting the final URL of the pages. This can be controlled completely independently.

For example, the artists list of my application is in the folder `/Components/Pages/Artists/Index.razor`.

In the code of this file, the `@page` attribute defines the route of this page. Some examples in the Razor file can look like this:

@page "/artists"
@page "/artist/{ItemID:guid}"
@page "/artists"

This leads to quite simple URLs for my page about `Artists`, such as https://www.myawesomeconcertdatabase.com/artists or https://www.myawesomeconcertdatabase.com/artist/123456.

The following image describes the structure of the websites I build in this project. I also created some additional folders and files that contain more of the business logic, which we will discuss later.

Navigation

For navigation, it is quite common to use the hamburger menu with flyouts. The template uses this, and so do I.

The navigation menu on the left side of the app can be configured via `NavMenu.razor`:

@rendermode InteractiveServer

<div class="navmenu">
    <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Href="artists" Icon="@(new Icons.Regular.Size20.BuildingLighthouse())" IconColor="Color.Accent">Artists</FluentNavLink>
            <FluentNavLink Href="concerts" Icon="@(new Icons.Regular.Size20.People())" IconColor="Color.Accent">Concerts</FluentNavLink>
        </FluentNavMenu>
    </nav>
</div>

@code {
    private bool expanded = true;
}

The component `<FluentNavLink Href=“artists“ …>Artists</FluentNavLink>` will generate an `<a href>` to our artist page, which contains the path defined by `@page „/artists“`.

`NavMenu` is just a part of another file called `MainLayout.razor`. This demonstrates quite well the way of building components in Blazor. The file `NavMenu.razor` is a component that is used in `MainLayout.razor` as the HTML tag `<NavMenu/>`, which I personally really like.

MainLayout.razor:

@inherits LayoutComponentBase

<FluentLayout>
    <FluentHeader>
        Olivers Concert Database
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
                <FluentDialogProvider @rendermode="RenderMode.InteractiveServer" />
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
       <a style="vertical-align:middle" href="https://www.medialesson.de" target="_blank">
            Made with
            <FluentIcon Value="@(new Icons.Regular.Size12.Heart())" Color="@Color.Warning" />
            by Medialesson
        </a>
    </FluentFooter>
</FluentLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Display Data aka The Artists

Please assume that we are using Entity Framework in combination with the repository pattern here. You can see the details of the implementation in the source code that I will reference at the end of this post.

`Components/Pages/Artists/Index.razor`:

@page "/artists"
@using ConcertDatabase.Components.Pages.Artists.Panels
@using ConcertDatabase.Entities
@using ConcertDatabase.Repositories
@inject IDialogService dialogService
@inject ArtistRepository repository
@inject NavigationManager navigationManager

@rendermode InteractiveServer

<h3>Artist List</h3>

<FluentButton IconStart="@(new Icons.Regular.Size16.Add())" OnClick="@(() => AddInDialog())">Add</FluentButton>

@if (artists != null)
{
    <FluentDataGrid Items="@artists" TGridItem="Artist" Pagination="@pagination">
        <PropertyColumn Property="@(c => c.Name)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Description)" Sortable="true" />
        <TemplateColumn Title="Actions">
            <FluentButton IconStart="@(new Icons.Regular.Size16.Edit())" OnClick="@(() => EditInDialog(context))" />
            <FluentButton IconStart="@(new Icons.Regular.Size16.DesktopEdit())" OnClick="@(() => EditInPanel(context))" />
            <FluentButton IconStart="@(new Icons.Regular.Size16.Delete())" OnClick="@(() => DeleteItem(context))" />
            <FluentButton IconStart="@(new Icons.Regular.Size16.Glasses())" OnClick="@(() => ShowItem(context))" />
        </TemplateColumn>
    </FluentDataGrid>

    <FluentPaginator State="@pagination" />
}
else
{
    <p><em>Loading...</em></p>
}

@code {
    IQueryable<Artist>? artists;
    PaginationState pagination = new PaginationState { ItemsPerPage = 15 };

    protected override void OnInitialized()
    {
        LoadData();
    }

    private void LoadData()
    {
        artists = repository.Entities.ToList().AsQueryable();
    }
    ... more code  ...
}

Some explanations here:

1. The code at the top defines the route with `@page`, imports some namespaces with `@using`, and injects some dependency services with `@inject`.

2. It also defines the render mode. You can have different render modes in Blazor. `@rendermode InteractiveServer` enables interaction with server code.

3. The `<FluentDataGrid>` is the table definition of what we want to render. It contains the data in the `Items` property and enables pagination.

4. Several actions are defined to demonstrate some interesting features. These features are triggered through the `OnClick` event, which calls methods like `EditInDialog` with the current row’s data.

5. The `@code` area is essentially the code-behind. You can create a separate code-behind file if you prefer.

6. In the `@code` section, I define the variable `artists` and fill it in the `LoadData` method with data from a database.

You can see the result of this little code snippet, which looks almost like pure HTML.

Delete Existing Data

I understand that not everyone is a fan of my music. I can tolerate that, most of the time. 🙂

In case you want to delete an entry, you can click the delete symbol in the data grid. The code behind this method is in the `@code` section of the same file as the „HTML.“ You remember the `OnClick` event in the code above? This event calls the following C# function.

private async Task DeleteItem(Artist item)
{
    // Check if the item is null
    if (item is null)
    {
        return;
    }

    // Create and show a dialog to confirm the delete
    IDialogReference dialog = await dialogService.ShowConfirmationAsync(
        $"Are you sure you want to delete the artist '{item.Name}'?",
        "Yes", 
        "No", 
        "Delete Artist?");
    DialogResult result = await dialog.Result;

    // If cancelled, return
    if (result.Cancelled)
    {
        return;
    }

    // Delete the item
    try
    {
        repository.Delete(item);
        await repository.SaveAsync();
        LoadData();
    }
    catch (Exception exc)
    {
        string errorMessage = exc.InnerException?.Message ?? exc.Message;
        await dialogService.ShowErrorAsync("Error", errorMessage);
    }
}

Some remarks on this code: This code is executed on the server, but you don’t need to think about this because you picked the `@rendermode InteractiveServer`.

Before I delete an artist (you always think twice before deleting the Boss), I open a dialog to ask the user if they really want to delete this brilliant artist.

This type of confirmation dialog is a built-in feature of the Fluent library. In the next step, I’ll show you how to build your own dialogs.

Additional remark: You should never, ever delete the Boss, by the way.

Edit or Add Data

If you want to add new artists to the database, you need to enter additional information like name and description. For this scenario, you may need a customized form to enter this data. Like in other frameworks, you can build a new „component“ based on other components.

In Blazor, you create a new component and display it in a „dialog,“ „flyout panel,“ or other components.

Here is the `EditArtistPanel.razor` that I will use later in different kinds of dialogs:

@using ConcertDatabase.Entities
@implements IDialogContentComponent<Artist>

<FluentDialogHeader ShowDismiss="false">
    <FluentStack VerticalAlignment="VerticalAlignment.Center">
        <FluentIcon Value="@(new Icons.Regular.Size24.Delete())" />
        <FluentLabel Typo="Typography.PaneHeader">
            @Dialog.Instance.Parameters.Title
        </FluentLabel>
    </FluentStack>
</FluentDialogHeader>

<FluentTextField Label="Name" @bind-Value="@Content.Name" />
<FluentTextField Label="Description" @bind-Value="@Content.Description" />

<FluentDialogFooter>
    <FluentButton Appearance="Appearance.Accent" IconStart="@(new Icons.Regular.Size20.Save())" OnClick="@SaveAsync">Save</FluentButton>
    <FluentButton Appearance="Appearance.Neutral" OnClick="@CancelAsync">Cancel</FluentButton>
</FluentDialogFooter>

@code {

    [Parameter]
    public Artist Content { get; set; } = default!;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; } = default!;

    private async Task SaveAsync()
    {
        await Dialog.CloseAsync(Content);
    }

    private async Task CancelAsync()
    {
        await Dialog.CancelAsync();
    }
}

This Razor component is quite simple. It implements the `IDialogContentComponent` interface, which means adding a property parameter called `Content` and the cascading parameter `Dialog`.

The `Content` property defines the data that is passed to the component and will also be returned when the dialog is closed. The component contains a header, a footer with save and cancel buttons, and fields for the artist’s name and description.

The code only closes the dialog and does nothing more.

Before I show you my implementation of the call to open the dialog, I want to show you two possible ways to open an editor for the artist item.

**Option 1:** A modal dialog that looks like a classic window

**Option 2:** A flyout panel

Both methods use the exact same component, but they appear differently.

The following code shows how to call both of them:

// Open the dialog for the item
private async Task EditInDialog(Artist originalItem)
{
    var parameters = new DialogParameters
        {
            Title = "Edit Artist",
            PreventDismissOnOverlayClick = true,
            PreventScroll = true
        };

    var dialog = await dialogService.ShowDialogAsync<EditArtistPanel>(originalItem.DeepCopy(), parameters);
    var dialogResult = await dialog.Result;
    await HandleEditConcertDialogResult(dialogResult, originalItem);
}

// Open the panel for the item
private async Task EditInPanel(Artist originalItem)
{
    DialogParameters<Artist> parameters = new()
        {
            Title = $"Edit Artist",
            Alignment = HorizontalAlignment.Right,
            PrimaryAction = "Ok",
            SecondaryAction = "Cancel"
        };
    var dialog = await dialogService.ShowPanelAsync<EditArtistPanel>(originalItem.DeepCopy(), parameters);
    var dialogResult = await dialog.Result;
    await HandleEditConcertDialogResult(dialogResult, originalItem);
}

// Handle the result of the edit dialog/panel
private async Task HandleEditConcertDialogResult(DialogResult result, Artist originalItem)
{
    // If cancelled, return
    if (result.Cancelled)
    {
        return;
    }

    // If the data is not null, update the item
    if (result.Data is not null)
    {
        var updatedItem = result.Data as Artist;
        if (updatedItem is null)
        {
            return;
        }

        // Take the data from the "edited" item and put it into the original item
        originalItem.Name = updatedItem.Name;
        originalItem.Description = updatedItem.Description;

        repository.Update(originalItem);
        await repository.SaveAsync();
        LoadData();
    }
}

The function `EditInDialog` calls the `ShowDialogAsync` method of the `dialogService`, and `EditInPanel` calls the `ShowPanelAsync` function. Both are configured with parameters for visualization.

You may notice that I’m using a variable called `dialogService`. This was injected at the top of the component with `@inject IDialogService dialogService`. To make this work correctly, you also need to add the component `<FluentDialogProvider @rendermode=“RenderMode.InteractiveServer“ />` in the `MainLayout.razor` component or where it will be required. Otherwise, the dialogs will not show up.

I have one more additional remark about the code here. I’m using this code statement: `originalItem.DeepCopy()`, to create a copy of an object. I’m doing this because otherwise, the dialogs would change the object instantly and not only on clicking „OK“.

I’m doing this deep copy with a quite simple extension method:

public static class ExtensionMethods
{
    public static T DeepCopy<T>(this T self)
    {
        var serialized = JsonSerializer.Serialize(self);
        var result = JsonSerializer.Deserialize<T>(serialized) ?? default!;
        return result;
    }
}

This is the simplest way to clone an object, regardless of its depth and complexity. It may not be the most efficient way, but it works for me here.

To be complete on the methods, I also want to show the add method:

private async Task AddInDialog()
{
    // Create new empty object
    Artist newItem = new();

    var parameters = new DialogParameters
        {
            Title = "Add Artist",
            PreventDismissOnOverlayClick = true,
            PreventScroll = true
        };
    // show dialog
    var dialog = await dialogService.ShowDialogAsync<EditArtistPanel>(newItem, parameters);
    var dialogResult = await dialog.Result;
    await HandleAddDialogResult(dialogResult);
}

private async Task HandleAddDialogResult(DialogResult result)
{
    if (result.Cancelled)
    {
        return;
    }

    if (result.Data is not null)
    {
        var newItem = result.Data as Artist;
        if (newItem is null)
        {
            return;
        }
        await repository.AddAsync(newItem);
        await repository.SaveAsync();
        LoadData();
    }
}

And What About Concerts

Each artist I’m tracking in my database, has concerts that I’ve visited. This is handled in the Artist Details Page.

The implementation looks like this:

@page "/artist/{ItemID:guid}"
@using ConcertDatabase.Components.Pages.Artists.Panels
@using ConcertDatabase.Components.Pages.Concerts.Panels
@using ConcertDatabase.Entities
@using ConcertDatabase.Repositories
@inject IDialogService dialogService
@inject ArtistRepository repository
@inject NavigationManager navigationManager

@rendermode InteractiveServer

<h3>Artist Details</h3>

@if (artist != null)
{
    <FluentLabel>@artist.Name</FluentLabel>
    <FluentLabel>@artist.Description</FluentLabel>

    <FluentButton IconStart="@(new Icons.Regular.Size16.Delete())" OnClick="@(() => DeleteArtist())">Delete Artist</FluentButton>

    <FluentButton IconStart="@(new Icons.Regular.Size16.Add())" OnClick="@(() => AddConcert())">Add Concert</FluentButton>

    if (artist.Concerts != null)
    {
        <FluentDataGrid Items="@concerts" TGridItem="Concert">
            <PropertyColumn Property="@(c => c.Name)" Sortable="true" />
            <TemplateColumn Title="Date" Sortable="true">
                <FluentLabel>@context.Date?.ToShortDateString()</FluentLabel>
            </TemplateColumn>
            <PropertyColumn Property="@(c => c.Venue)" Sortable="true" />
            <PropertyColumn Property="@(c => c.City)" Sortable="true" />
            <TemplateColumn Title="Actions">
                <FluentButton IconStart="@(new Icons.Regular.Size16.DesktopEdit())" OnClick="@(() => EditInPanel(context))" />
                <FluentButton IconStart="@(new Icons.Regular.Size16.Delete())" OnClick="@(() => DeleteItem(context))" />
                <FluentButton IconStart="@(new Icons.Regular.Size16.Glasses())" OnClick="@(() => ShowConcert(context))" />
            </TemplateColumn>
        </FluentDataGrid>
    }
}
else
{
    <p><em>Loading...</em></p>
}

@code {
    [Parameter]
    public Guid ItemId { get; set; }

    Artist? artist;
    IQueryable<Concert>? concerts;

    protected override async Task OnInitializedAsync()
    {
        await LoadData();
    }

    private async Task LoadData()
    {
        artist = await repository.GetByIdWithConcerts(ItemId);
        concerts = artist?.Concerts?.AsQueryable() ?? null;
    }

    #region Data Methods

    private async Task DeleteArtist()
    {
        if (artist is null)
        {
            return;
        }

        var dialogParameters = new DialogParameters
            {
                Title = "Delete Artist",
                PreventDismissOnOverlayClick = true,
                PreventScroll = true
            };

        var dialog = await dialogService.ShowConfirmationAsync(
            "Are you sure you want to delete this artist?",
            "Yes",
            "No",
            "Delete Concert?");
        var result = await dialog.Result;
        if (!result.Cancelled)
        {
            repository.Delete(artist);
            await repository.SaveAsync();
            navigationManager.NavigateTo("/artists");
        }
    }

    #region Add

    private async Task AddConcert()
    {
        Concert newItem = new();

        var parameters = new DialogParameters
            {
                Title = "Add Concert",
                PreventDismissOnOverlayClick = true,
                PreventScroll = true
            };

        var dialog = await dialogService.ShowDialogAsync<EditConcertPanel>(newItem, parameters);
        var dialogResult = await dialog.Result;
        await HandleAddDialogResult(dialogResult);
    }

    private async Task HandleAddDialogResult(DialogResult result)
    {
        if (result.Cancelled)
        {
            return;
        }

        if (result.Data is not null)
        {
            var concert = result.Data as Concert;
            if (concert is null)
            {
                return;
            }

            if (artist is null)
            {
                return;
            }

            repository.AddConcert(artist, concert);
            await LoadData();
        }
    }

    #endregion 

    #region Edit

    private async Task EditInDialog(Concert originalItem)
    {
        var parameters = new DialogParameters
            {
                Title = "Edit Concert",
                PreventDismissOnOverlayClick = true,
                PreventScroll = true
            };

        var dialog = await dialogService.ShowDialogAsync<EditConcertPanel>(originalItem.DeepCopy(), parameters);
        var dialogResult = await dialog.Result;
        await HandleEditConcertDialogResult(dialogResult, originalItem);
    }

    private async Task EditInPanel(Concert originalItem)
    {
        DialogParameters<Concert> parameters = new()
            {
                Title = $"Edit Concert",
                Alignment = HorizontalAlignment.Right,
                PrimaryAction = "Ok",
                SecondaryAction = "Cancel"
            };
        var dialog = await dialogService.ShowPanelAsync<EditConcertPanel>(originalItem.DeepCopy(), parameters);
        var dialogResult = await dialog.Result;
        await HandleEditConcertDialogResult(dialogResult, originalItem);
    }

    private async Task HandleEditConcertDialogResult(DialogResult result, Concert originalItem)
    {
        if (result.Cancelled)
        {
            return;
        }

        if (result.Data is not null)
        {
            var concert = result.Data as Concert;
            if (concert is null)
            {
                return;
            }

            originalItem.Name = concert.Name;
            originalItem.Description = concert.Description;
            originalItem.Date = concert.Date;
            originalItem.Venue = concert.Venue;
            originalItem.City = concert.City;
            originalItem.SetList = concert.SetList;
            originalItem.Url = concert.Url;

            repository.UpdateConcert(originalItem);
            await repository.SaveAsync();
            await LoadData();
        }
    }

    #endregion

    #region Delete
    
    private async Task DeleteItem(Concert item)
    {
        if (item is null)
        {
            return;
        }

        var dialogParameters = new DialogParameters
        {
            Title = "Delete Concert",
            PreventDismissOnOverlayClick = true,
            PreventScroll = true
        };

        var dialog = await dialogService.ShowConfirmationAsync(
            "Are you sure you want to delete this concert?", 
            "Yes", 
            "No", 
            "Delete Concert?");
        var result = await dialog.Result;
        if (!result.Cancelled)
        {
            repository.DeleteConcert(item);
            await repository.SaveAsync();
            await LoadData();
        }
    }

    #endregion

    private void ShowConcert(Concert item)
    {
        navigationManager.NavigateTo($"/concert/{item.ID}");
    }

    #endregion
}

More Information

This article documents some (but not all) interesting features and my learnings with Blazor and the Fluent UI. It only took a few hours to set this up. In one of my next posts, I will describe the data infrastructure behind this solution in depth.

🤟 Stay tuned and rock on.

You can find my latest code for the concert database here: https://github.com/oliverscheer/blazor-fluent-ui-demo

This article gives you a snippet to clean up your blob storage frequent, to keep only a specific time of data.

Azure Blob Storage offers a brilliant and straightforward solution for storing vast amounts of data. However, when it’s unnecessary to retain all data indefinitely, such as data only needed for a few days, it becomes essential to periodically clean up the storage. This ensures optimal resource management and cost-effectiveness within your Azure environment.

using Microsoft.Azure.Functions.Worker;
using Microsoft.Extensions.Logging;

namespace OliverSamples
{
    public class CleanupFunction(ILoggerFactory loggerFactory)
    {
        private readonly ILoggerFactory _loggerFactory = loggerFactory;
        private readonly ILogger _logger = loggerFactory.CreateLogger<CleanupFunction>();

        [Function("StorageCleanup")]
        public async Task Run([TimerTrigger("0 */2 * * * *")] TimerInfo myTimer)
        {
            _logger.LogInformation($"C# Timer trigger function executed at: {DateTime.Now}");

            StorageService storageService = new(_loggerFactory);
            await storageService.DeleteOldData();

            if (myTimer.ScheduleStatus is not null)
            {
                _logger.LogInformation($"Next timer schedule at: {myTimer.ScheduleStatus.Next}");
            }
        }
    }
}

The logic for cleaning up the storage resides within a small service helper that I’ve personally developed.

using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Microsoft.Extensions.Logging;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Text.Json;

public class OliverSamples
{
    private readonly string _blogStorageConnectionString;
    private readonly ILogger<StorageService> _logger;
    private CloudStorageAccount? _storageAccount;
    private CloudBlobClient? _blobClient;
    private int _maxHoursToKeep = 24;

    public StorageService(ILoggerFactory loggerFactory)
    {
        _logger = loggerFactory.CreateLogger<StorageService>();

        string blogStorageConnectionString = Environment.GetEnvironmentVariable(Const.AppSettings.STORAGE_ACCOUNT_CONNECTION_STRING) ?? "";
        if (string.IsNullOrEmpty(blogStorageConnectionString))
        {
            throw new Exception($"Configuration '{Const.AppSettings.STORAGE_ACCOUNT_CONNECTION_STRING}' is not set.");
        }
        _blogStorageConnectionString = blogStorageConnectionString;
    }

    private CloudBlobClient GetBlobClient()
    {
        if (_blobClient != null)
        {
            return _blobClient;
        }
        _storageAccount ??= CloudStorageAccount.Parse(_blogStorageConnectionString);
        _blobClient = _storageAccount.CreateCloudBlobClient();
        return _blobClient;
    }

    public async Task DeleteOldData()
    {
        List<string> containerToClean =
        [
            "MyContainer1", 
            "MyContainer2", 
            "MyContainer3"
        ];

        foreach(var container in containerToClean)
        {
            await CleanContainer(container);
        }
    }

    private async Task CleanContainer(string containerName)
    {
        CloudBlobClient blobClient = GetBlobClient();
        CloudBlobContainer container = blobClient.GetContainerReference(containerName);
        BlobContinuationToken continuationToken = null;
        do
        {
            var resultSegment = await container.ListBlobsSegmentedAsync(null, true, BlobListingDetails.Metadata, null, continuationToken, null, null);
            continuationToken = resultSegment.ContinuationToken;
            foreach (IListBlobItem item in resultSegment.Results)
            {
                if (item is CloudBlockBlob blockBlob)
                {
                    DateTimeOffset? created = blockBlob.Properties.Created;
                    if (created.HasValue && DateTimeOffset.UtcNow.Subtract(created.Value).TotalHours > _maxHoursToKeep)
                    {
                        await blockBlob.DeleteAsync();
                    }
                }
            }
        } while (continuationToken != null);
    }

}

Conclusion

With this Azure Function you clean containers in your blob storage ever 5 minutes. Files that are older than 24 hours, will be removed.

Alright, fellow cloud adventurers, let’s talk about Azure Functions and the wild ride that is .NET 8 Isolated Mode. You see, when it comes to authorizing functions for specific user groups, many of us rely on the trusty Authorize-Attribute. It’s been our go-to for granting access to authenticated user groups with ease.

But hold onto your hats, because things take an unexpected turn when you try to wield this power in Azure Functions .NET 8 Isolated Mode. Suddenly, that trusty old Authorize-Attribute seems to have lost its mojo.

What gives, you ask? Well, it seems the way our functions check request headers isn’t quite the same as it used to be. But fear not, intrepid developers! With a dash of brainstorming and a sprinkle of ingenuity, I stumbled upon a solution.

Enter: the DIY token checker. That’s right, folks. When the going gets tough, the tough get coding. I rolled up my sleeves and crafted a nifty little helper to handle token checks for specific user groups.

Because in the ever-evolving world of Azure Functions and .NET 8 Isolated Mode, sometimes you’ve got to take matters into your own hands. So here’s to blazing new trails, overcoming unexpected challenges, and always finding a way to make our functions work for us – no matter what mode they’re in.

using Microsoft.Azure.Functions.Worker.Http;
using System.Security.Claims;
using System.Security.Principal;

namespace OliverS.Helper
{
    public static class ClaimsHelper
    {
        public static bool CheckPrincipalHasClaim(HttpRequestData req, string claimType, string claimValue)
        {
            ClaimsPrincipal? principal = ClaimsPrincipalHelper.ParseFromRequest(req);

            if (principal == null)
            {
                return false;
            }

            if (principal.HasClaim(claimType, claimValue))
            {
                return true;
            }
            return false;
        }

        public static bool ClaimExists(this IPrincipal principal, string claimType)
        {
            if (principal is not ClaimsPrincipal ci)
            {
                return false;
            }

            Claim? claim = ci.Claims.FirstOrDefault(x => x.Type == claimType);
            return claim != null;
        }

        public static bool HasClaim(
            this IPrincipal principal, 
            string claimType,
            string claimValue, 
            string issuer = null)
        {
            if (principal is not ClaimsPrincipal ci)
            {
                return false;
            }

            var claim = ci
                .Claims
                .FirstOrDefault(x => x.Type == claimType && x.Value == claimValue && (issuer == null || x.Issuer == issuer));
            return claim != null;
        }

        public static string GetUserEmail(HttpRequestData req)
        {
            ClaimsPrincipal? principal = ClaimsPrincipalHelper.ParseFromRequest(req);
            if (principal == null)
            {
                return string.Empty;
            }
            string result = principal.FindFirst("unique_name")?.Value ?? string.Empty;
            return result;
        }

        public static string GetUserName(HttpRequestData req)
        {
            ClaimsPrincipal? principal = ClaimsPrincipalHelper.ParseFromRequest(req);
            if (principal == null)
            {
                return string.Empty;
            }
            string result = principal.Identity?.Name ?? string.Empty;
            return result;
        }
    }
}

Now, picture this: a trusty claims helper swoops in to save the day! With this nifty tool, we can determine whether a user possesses a specific claim they’re eager to access.

It’s like having a guardian angel for our authentication process, ensuring that only those with the right credentials can venture forth into the realm of our Azure Functions. So whether it’s a VIP pass to a restricted area or a golden ticket to exclusive features, our claims helper is here to grant access to those who truly deserve it.

[Function("mysamplefunction")]
public async Task<HttpResponseData> GetMyData(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "mydata")] HttpRequestData req)
{
    #region Is User Admin

    if (!ClaimsHelper.CheckPrincipalHasClaim(req, Const.RoleConst.RolesClaim, Const.RoleConst.Admin))
    {
        var unauthorizedResponse = new CustomResponse()
        {
            StatusCode = HttpStatusCode.Unauthorized,
            Message = "Unauthorized."
        };
        return unauthorizedResponse.CreateResponse(req);
    }

    #endregion

    
    HttpResponseData response = new CustomResponse()
    {
        StatusCode = HttpStatusCode.OK,
        Message = "Rolls found",
        Result = rolls
    }.CreateResponse(req);

    return response;
}

In this sample I’m using a helper class to have an easier work with HttpResponse.

using Microsoft.Azure.Functions.Worker.Http;
using System.Net;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace Haehl.IoTRoll.Models.Response
{
    public class CustomResponse
    {
        [JsonIgnore]
        public HttpStatusCode StatusCode { get; set; }

        public string Message { get; set; } = string.Empty;

        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
        public string[]? ErrorMessages { get; set; } = null;

        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
        public object Result { get; set; } = default!;

        public HttpResponseData CreateResponse(HttpRequestData req)
        {
            HttpResponseData response = req.CreateResponse(StatusCode);
            response.Headers.Add("Content-Type", "application/json; charset=utf-8");

            try
            {
                var json = JsonSerializer.Serialize(this);
                response.WriteStringAsync(json);
                return response;
            } 
            catch (Exception exc)
            {
                response.WriteString(exc.Message);
                return response;
            }
            
        }
    }
}

Conclusion

Check the claim of an user is simple, but not automatically available in .net core 8 isolated mode for some reasons.

In a recent project, a unique challenge emerged: the need to temporarily remove authentication from an Azure Function for testing purposes, only to later reinstate it. Surprisingly, finding a straightforward solution proved elusive. Despite extensive exploration, including searching for a Bicep solution or relevant APIs, I encountered obstacles. While some methods disabled authentication, artifacts persisted, preventing a clean removal.

However, amidst this quest for a solution, a breakthrough emerged: the Azure REST API, accessible via Azure CLI, revealed itself as the ultimate tool. Leveraging this powerful API, I devised a pair of PowerShell functions capable of seamlessly managing authentication providers within Azure Functions.

But why is this significant? Consider scenarios where developers need to streamline testing processes or troubleshoot authentication-related issues within Azure Functions. By understanding and harnessing the Azure REST API, developers gain unprecedented control and flexibility, empowering them to tailor authentication settings with precision and efficiency.

Let’s delve into the mechanics behind this solution. The PowerShell functions below exemplify the simplicity and effectiveness of utilizing the Azure REST API to delete and subsequently re-add authentication providers within Azure Functions:

Enable Authentication

param (
  [Parameter(Mandatory=$true)]
  [string]$functionAppName,

  [Parameter(Mandatory=$true)]
  [string]$resourceGroupName,

  [Parameter(Mandatory=$true)]
  [string]$issuer,

  [Parameter(Mandatory=$true)]
  [string]$clientId,

  [Parameter(Mandatory=$true)]
  [string]$subscriptionId
)

$identityProvider = "AzureActiveDirectory"
$resourceProviderName = "Microsoft.Web"
$resourceType = "sites"

$name = $functionAppName + "/config/authsettingsV2"

Write-Host "Enable Authentication"
Write-Host "Resource Group Name               : $resourceGroupName"
Write-Host "Function App Name                 : $functionAppName"
Write-Host "Identity Provider                 : $identityProvider"
Write-Host "Issuer                            : $issuer"
Write-Host "Client Id                         : $clientId"
Write-Host "Resource Provider Name            : $resourceProviderName"
Write-Host "Resource Type                     : $resourceType"
Write-Host "Name                              : $name"

$resourceType = "sites"
$uri = "/subscriptions/" + $subscriptionId + "/resourceGroups/" + $resourceGroupName + "/providers/Microsoft.Web/" + $resourceType + "/" + $name + "?api-version=2021-03-01"
Write-Host "Uri: $uri"

$body = "{ 'properties': { 'globalValidation': { 'requireAuthentication': 'true', 'unauthenticatedClientAction': 'Return401' }, 'identityProviders': { 'azureActiveDirectory': { 'enabled': 'true', 'registration': { 'openIdIssuer': '$issuer', 'clientId': '$clientId', 'clientSecretSettingName': 'MICROSOFT_PROVIDER_AUTHENTICATION_SECRET' } } } } }"
az rest --method Put --uri $uri --verbose --body $body

Disable Authentication

param (
  [Parameter(Mandatory=$true)]
  [string]$functionAppName,

  [Parameter(Mandatory=$true)]
  [string]$resourceGroupName,

  [Parameter(Mandatory=$true)]
  [string]$subscriptionId
)

$identityProvider = "AzureActiveDirectory"
$resourceProviderName = "Microsoft.Web"
$resourceType = "sites"

Write-Host "Enable Authentication"
Write-Host "Resource Group Name               : $resourceGroupName"
Write-Host "Function App Name                 : $functionAppName"
Write-Host "Identity Provider                 : $identityProvider"
Write-Host "Resource Provider Name            : $resourceProviderName"
Write-Host "Resource Type                     : $resourceType"
Write-Host "Name                              : $name"

$resourceType = "sites"
$name = $functionAppName + "/config/authsettingsV2"
$uri = "/subscriptions/" + $subscriptionId + "/resourceGroups/" + $resourceGroupName + "/providers/Microsoft.Web/" + $resourceType + "/" + $name + "?api-version=2021-03-01"
Write-Host "Uri: $uri"

$body = "{ 'globalValidation': { 'requireAuthentication': 'false', 'unauthenticatedClientAction': 'AllowAnonymous' }, 'httpSettings': { 'forwardProxy': { 'convention': 'NoProxy' }, 'requireHttps': 'true', 'routes': { 'apiPrefix': '/.auth' } }, 'identityProviders': { 'azureActiveDirectory': { 'enabled': 'true', 'login': { 'disableWWWAuthenticate': 'false' }, 'registration': {}, 'validation': { 'defaultAuthorizationPolicy': { 'allowedPrincipals': {} }, 'jwtClaimChecks': {} } } } }"

az rest --method Put --uri $uri --verbose --body $body

## Conclusion

These two methods delete an Authentication on an Azure Function and re-add them with the help of the Azure CLI and PowerShell.

Console applications in .NET often lack visual appeal and interactivity. However, Spectre.Console emerges as my personal  game-changer, revolutionizing the way developers craft command-line interfaces (CLIs). Offering a rich set of features, Spectre.Console elevates user experience and developer productivity.

With Spectre.Console, developers can effortlessly create stylish and dynamic text-based UIs. Its intuitive API enables easy customization of colors, styles, and layouts, breathing life into mundane console applications. From progress bars to tables, and interactive prompts to ASCII art, Spectre.Console empowers developers to build immersive command-line experiences with minimal effort.

Say goodbye to boring console applications and embrace the power of Spectre.Console for vibrant, engaging CLI development.

Documentation: https://spectreconsole.net/

Source: [GitHub](https://github.com/spectreconsole/spectre.console)

The Challenge

Azure Stream Analytics exclusively supports functions written in .NET Standard 2.0. Handling JSON data often necessitates the utilization of tools such as Newtonsoft or features from System.Text.Json, both of which are NOT accessible in .NET Standard 2.0. Furthermore, another compelling reason to opt out for .NET is the complexity involved in storing and updating the compiled package to a designated path in Azure Blob Storage, followed by referencing it within the job configuration.

Loosing the comfort of C# and .net and switching to JavaScript wasn’t as hard as it seems to be in the beginning. The biggest challenge was to parse the incoming JSON correctly. Uppercase and lowercase characters can ruin your day.

## JavaScript Calculations

The subsequent function provided is greatly simplified, merely adding two values to produce a new result. However, it’s important to note that you can perform highly intricate calculations as well.

function main(incomingData) {
    try {
        var result = calculateValues(incomingData);
        return result;
    }
    catch (err) {
        var result = {
            'newCalculatedValue': 0.0
        }
        return result;
    }
};

function calculateValues(incomingData) {
    var newCalculatedValue = incomingData.value1 + incomingData.value2;
    var result = {
        'newCalculatedValue': newCalculatedValue
    }
    return result;
}

I’ve implemented a catch block as a precautionary measure in case any „incorrect“ values are received and cannot be converted accurately. Depending on the job’s settings, an uncaught exception could result in halting the job.

## Calling the JavaScript Functions in the Stream Analytics Job Query

The query provided for the job is simplified to illustrate its usage.

WITH iothubstream AS
(
    SELECT
        EventEnqueuedUtcTime,
        EventProcessedUtcTime,
        [IoTHub].ConnectionDeviceId AS ConnectionDeviceId,
        *
    FROM
        inputiothub TIMESTAMP BY EventEnqueuedUtcTime
)
, calculateddata AS
(
    SELECT
        UDF.Calc(joineddata) as calculated,
        *
    FROM
        iothubstream
)
, preparedView AS
(
    SELECT
        calculated.newCalculatedValue as newCalculatedValue,
        *
    FROM calculateddata
)

SELECT *
INTO
     outputblobstorage
FROM
     reducedview

## Conclusion

Creating custom values within a stream job using User-Defined Functions is straightforward in JavaScript. However, it’s not advisable to do so in the CLR (Common Language Runtime) way, as it only supports .NET Standard 2.0.

More Information

The Problem

Stream Analytics Jobs are a powerful means of analyzing and distributing incoming data to various target storages or services in Azure and other locations. You can only update the definition of the job, when it is stopped. However, initiating and halting Stream Analytics Jobs can be time-consuming, often requiring several minutes depending on the query’s complexity and the input/output sources.

When it comes to updating the query within an automated process like CI/CD pipelines, waiting for the job to stop, updating it, and then restarting the service can present a significant challenge.

In a recent project, I devised several PowerShell routines to streamline this task.

Step 1: Stoping a Stream Analytics Job
Step 2: Updating the job
Step 3: Restart the job

Stopping a Stream Analytics Job

The code to stop the job in PowerShell

[CmdletBinding()]
param (

    [Parameter(Mandatory=$true)]
    [string]$streamAnalyticsJobName,
    
    [Parameter(Mandatory=$true)]
    [string]$resourceGroup
)

# Stop Job
Write-Host "Stop Stream Analytics Job"
Write-Host "- streamAnalyticsJobName: $streamAnalyticsJobName"
Write-Host "- resourceGroup         : $resourceGroup"
Write-Host "- We wait max 5 minutes for job to stop"

$isStopping = $false
$waitSeconds = 5
$counter = 0

# try for 5 minutes to start
do {
  $counter++
  $seconds = $counter * $waitSeconds
  
  $result=az stream-analytics job list --resource-group $resourceGroup --query "[?contains(name, '$streamAnalyticsJobName')].name" --output table
  $count = ($result | Measure-Object).Count
  if ($count -eq 1) {
    # Job not found, it is new
    Write-Host "- Job not found in list. We will create new one."
    break
  }

  # Current Status
  $resultRaw = az stream-analytics job show --job-name $streamAnalyticsJobName --resource-group $resourceGroup

  if ($? -eq $false) {
    # Job not found, it is new
    Write-Host "- Job not found. We will create new one."
    break
  }

  $result = $resultRaw | ConvertFrom-Json
  if ($null -eq $result) {
    # Job not found, it is new
    Write-Host "- Job not found. We will create new one."
    break
  } 

  # Job already exists, get job state

  $jobstate = $result.Jobstate
  Write-Host "- Current Jobstate: $jobstate"

  if ($jobstate -eq 'Stopped' -or $jobstate -eq 'Created' -or $jobstate -eq 'Failed') {
    break
  }

  # Only send stop command once
  if ($isStopping -eq $true) {
    Write-Host "- Job is already stopping, waiting for it to stop"
  } else {
    $isStopping = $true
    Write-Host "- Job is not stopped, stopping"
    az stream-analytics job stop --job-name $streamAnalyticsJobName --resource-group $resourceGroup
  }

  Write-Host "- Still stopping ($seconds seconds passed)"
  Start-Sleep -Seconds $waitSeconds

} while ($seconds -lt 300)

if ($seconds -gt 290) {
  Write-Error "- Job did not stop after 5 minutes"
  return
}

This script attempts to halt the specified job and will wait for 300 seconds, equivalent to 5 minutes, for a response. If the process exceeds this time frame, it indicates that stopping the job has likely failed.

[CmdletBinding()]
param (
[Parameter(Mandatory=$true)]
[Alias('name')]
[string]$streamAnalyticsJobName,

[Parameter(Mandatory=$true)]
[Alias('rg')] 
[string]$resourceGroup    
)

Write-Host "Start Stream Analytics Job"
Write-Verbose "- streamAnalyticsJobName: $streamAnalyticsJobName"
Write-Verbose "- resourceGroup         : $resourceGroup"

az stream-analytics job start --job-name $streamAnalyticsJobName --resource-group $resourceGroup --no-wait

$counter = 0
$maxRetries = 60 # 60*10 seconds = 6 minutes

$waitTime = $maxRetries * 10
Write-Host "- Job should start within 120 seconds, we try max $waitTime seconds"

do {
$counter++

# Current Status
$result = az stream-analytics job show --job-name $streamAnalyticsJobName --only-show-errors --resource-group $resourceGroup | ConvertFrom-Json

if ($null -eq $result) {
    # Job not found, it is new
    Write-Error "- Job not found, we have a problem"
    break
}

# Job already exists
$jobstate = $result.Jobstate
$seconds = $counter * 10
Write-Host "- Waiting - Current Jobstate: $jobstate ($seconds seconds passed)"

if ($jobstate -eq 'Started') {
    Write-Host "- Job started successfully"
    break
} 

if ($jobstate -eq 'Running') {
    Write-Host "- Job is running and started successfully"
    break
}

if ($jobstate -eq 'Failed') {
    Write-Error "- Job failed to start"
    break
}

Start-Sleep -Seconds 10

} while ($counter -lt $maxRetries) 

if ($counter -eq $maxRetries || $counter -gt $maxRetries) {
Write-Error "- Job did not start successfully after 5 minutes"
return $false
}

return $true

## Stopping and Starging the Job in a Pipeline

The update of the job is done during a Azure DevOps Pipeline:

parameters:
  - name: deploymentName
    type: string
  
  # ...

jobs:
- deployment: ${{ parameters.deploymentName }}
  displayName: ${{ parameters.deploymentTitle }}
  environment: ${{ parameters.environmentName }}
  workspace:
    clean: all
  strategy: 
    runOnce:
      deploy:
        steps:
        - download: current
          displayName: Download Artifacts

        - task: AzureCLI@2
          displayName: Stop ASA Job
          inputs:
            azureSubscription: ${{ parameters.azConnectionName }}
            scriptType: pscore
            scriptPath: $(Pipeline.Workspace)/Stop-StreamAnalyticsJob.ps1
            scriptArguments: >
              -streamAnalyticsJobName ${{ parameters.streamAnalyticsJobName }}
              -resourceGroup ${{ parameters.resourceGroup}}

        # ... update 
        
        - task: AzureCLI@2
          displayName: Restart ASA Job
          inputs:
            azureSubscription: ${{ parameters.azConnectionName }}
            scriptType: pscore
            scriptPath: $(Pipeline.Workspace)/Start-StreamAnalyticsJob.ps1
            scriptArguments: >
              -streamAnalyticsJobName ${{ parameters.streamAnalyticsJobName }} 
              -resourceGroup ${{ parameters.resourceGroup}}

## Conclusion

With this approach, you are able to wait automatically in a pipeline for Azure Stream Analytics Job to stop and start again, to update the service.

The Problem: Export Old Pull Requests from GitHub

For various (perhaps less than rational) reasons, I find myself needing to document my past work using Pull Requests. Since this is more about quantity than quality, I sought to automate the task. To simplify the process, I crafted a concise bash script that achieves precisely that, generating Markdown files.

The Code in Bash

#!/bin/bash
set -e

# Max number of PRs
LIMIT=500

# Check Output Folder
if [[ -z "${OUTPUT_FOLDER}" ]]; then
    # Set to default
    OUTPUT_FOLDER="ghexport"
# else
    # Folder is set
fi
mkdir -p $OUTPUT_FOLDER

PR_LIST_FILE="$OUTPUT_FOLDER/pr_list.txt"
gh pr list --json number --state closed --jq '.[].number' -L $LIMIT > $PR_LIST_FILE

lines=$(cat $PR_LIST_FILE)
for PR_NUMBER in $lines
do
    # Export PR into md file
    echo "Current PR: $PR_NUMBER "
    FILE_NAME="$OUTPUT_FOLDER/$PR_NUMBER.md"

    echo "Filename: $FILE_NAME"

    gh pr view $PR_NUMBER --json number,title,body,reviews,assignees,author,commits \
        --template   '{{printf "# %v" .number}} {{.title}}

Author: {{.author.name}} - {{.author.login}}

{{.body}}

## Commits
{{range .commits}}
- {{ .messageHeadline }} [ {{range .authors}}{{ .name }}{{end}} ]{{end}}

## Reviews

{{range .reviews}}{{ .body }}{{end}}


' > $FILE_NAME

done

# ## Assignees
# {{range .assignees}}{{.login .name}}{{end}}

The code can be accessed on GitHub: oliverscheer/github-export: Export Pull Requests and contributor information from GitHub projects.

To be unequivocal, mandating developers to document their work through a set number of Pull Requests is among the least productive tasks managers can impose on their teams.