Trust the ASP.NET Core HTTPS development certificate on Ubuntu

Ubuntu trust the certificate for service-to-service communication

dotnet dev-certs https
sudo -E dotnet dev-certs https -ep /usr/local/share/ca-certificates/aspnet/https.crt --format PEM
sudo update-ca-certificates

Trust HTTPS certificate on Linux using Edge or Chrome

sudo apt install libnss3-tools
dotnet dev-certs https
sudo -E dotnet dev-certs https -ep /usr/local/share/ca-certificates/aspnet/https.crt --format PEM
certutil -d sql:$HOME/.pki/nssdb -A -t "P,," -n localhost -i /usr/local/share/ca-certificates/aspnet/https.crt
certutil -d sql:$HOME/.pki/nssdb -A -t "C,," -n localhost -i /usr/local/share/ca-certificates/aspnet/https.crt

Trust the certificate with Firefox on Linux

dotnet dev-certs https
sudo -E dotnet dev-certs https -ep /usr/local/share/ca-certificates/aspnet/https.crt --format PEM
sudo touch /usr/lib/firefox/distribution/policies.json
sudo cat <<EOF | sudo tee /usr/lib/firefox/distribution/policies.json
{
    "policies": {
        "Certificates": {
            "Install": [
                "/usr/local/share/ca-certificates/aspnet/https.crt"
            ]
        }
    }
}
EOF

References
https://docs.microsoft.com/en-us/aspnet/core/security/enforcing-ssl?view=aspnetcore-6.0&tabs=visual-studio#trust-https-certificate-on-linux

Working With Query String In ASP.NET Core Blazor

@page "/counter"  
@using Microsoft.AspNetCore.WebUtilities;  
@using Microsoft.Extensions.Primitives;  
@inject NavigationManager navManager  
  
<h1>Counter</h1>  
  
<p>Current count: @currentCount</p>  
  
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>  
  
@code {  
    private int currentCount = 0;  
  
    protected override void OnInitialized()  
    {  
        StringValues initCount;  
        var uri = navManager.ToAbsoluteUri(navManager.Uri);  
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("initialCount", out initCount))  
        {  
            currentCount = Convert.ToInt32(initCount);  
        }  
  
    }  
  
    private void IncrementCount()  
    {  
        currentCount++;  
    }  
}

References
https://www.c-sharpcorner.com/article/working-with-query-string-or-query-parameter-in-blazor/
https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing#query-strings

Route Parameters in ASP.NET Core Blazor

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }
}

Optional parameters

@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

Permit app navigation to the same component with a different optional parameter value

protected override void OnParametersSet()
{
    Text = Text ?? "fantastic";
}

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing#route-parameters
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/#route-parameters
https://blazor-university.com/routing/route-parameters/
https://blazor-university.com/routing/optional-route-parameters/

Install Redis on Ubuntu 20.04

sudo apt install redis-server

Configure Redis

sudo nano /etc/redis/redis.conf

find the line specifying the supervised directive. By default, this line is set to no. However, to manage Redis as a service, set the supervised directive to systemd (Ubuntu’s init system).

Secure Redis

sudo nano /etc/redis/redis.conf

locate the requirepass directive under the SECURITY section and uncomment it (by removing #).Once you have uncommented the line, replace foobared with the password of your choice.

sudo systemctl restart redis.service

References
https://phoenixnap.com/kb/install-redis-on-ubuntu-20-04

Applying Layouts in ASP.NET Core Blazor

Apply a layout to a component

@page "/episodes"
@layout DoctorWhoLayout

<h2>Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Apply a layout to a folder of components

_Imports.razor:

@layout DoctorWhoLayout
...

Apply a default layout to an app

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Apply a layout to arbitrary content (LayoutView component)

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0#apply-a-layout

Navigate from One Component to another Component in ASP.NET Core Blazor

Navigating from link

<h3>Anchor Link</h3>
<p>
    <a href="/navigate1">Navigate 1</a><br />
</p>

<h3>Nav Link</h3>
<p>
    <NavLink href="/navigate2">Navigate 2</NavLink><br />
</p>

Navigate from code

@page "/page1"
@inject NavigationManager UriHelper

<h3>Naviagte to another component Programatically</h3>
<button @onclick=@Navigate>Navigate</button>


@code {
void Navigate()
{
    UriHelper.NavigateTo("page2");
}
}

References
https://www.syncfusion.com/faq/blazor/routing/how-do-you-navigate-from-one-component-to-another-component-in-asp-net-core-blazor

Built-in Event Arguments in ASP.NET Core Blazor

@page "/event-handler-example-3"

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling#built-in-event-arguments