Tag: .net

Suppress UI refreshing in Blazor using ShouldRender

@page "/control-render"

<label>
    <input type="checkbox" @bind="shouldRender" />
    Should Render?
</label>

<p>Current count: @currentCount</p>

<p>
    <button @onclick="IncrementCount">Click me</button>
</p>

@code {
    private int currentCount = 0;
    private bool shouldRender = true;

    protected override bool ShouldRender()
    {
        return shouldRender;
    }

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

ShouldRender is called each time a component is rendered. Override ShouldRender to manage UI refreshing. If the implementation returns true, the UI is refreshed.

Even if ShouldRender is overridden, the component is always initially rendered.

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/rendering?view=aspnetcore-6.0#suppress-ui-refreshing-shouldrender
https://www.syncfusion.com/faq/how-do-i-suppress-the-ui-rendering-in-blazor

Templating components with RenderFragments in Blazor

Sometimes we need to create components that mix consumer-supplied mark-up with their own rendered output.
It would be very messy to pass content to a component as an HTML encoded string parameter:

<Collapsible content="Lots of encoded HTML for your entire view here"/>

And, in addition to the maintenance nightmare, the embedded HTML could only be basic HTML mark-up too, no Blazor components. Basically, it’d be useless, and obviously that’s not how it should be done. The correct approach is to use a RenderFragment.

Without RenderFragment

Index.razor

<table class="table">
    <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Male</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Rose</td>
        <td>Female</td>
        <td>32</td>
    </tr>
    <tr>
        <td>Martin</td>
        <td>Male</td>
        <td>1</td>
    </tr>
</table>

Child Content

These are the criteria Blazor uses to inject embedded content into a component. The embedded content may be anything you wish; plain text, HTML elements, more razor mark-up (including more components), and the content of that embedded content may be output anywhere in your component’s mark-up simply by adding @ChildContent.

TableTemplate.razor

<table class="table">
    <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
    </tr>

    @ChildContent
</table>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Index.razor

@page "/"

<TableTemplate>
    <tr>
        <td>John</td>
        <td>Male</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Rose</td>
        <td>Female</td>
        <td>32</td>
    </tr>
    <tr>
        <td>Martin</td>
        <td>Male</td>
        <td>1</td>
    </tr>
</TableTemplate>

Multiple RenderFragments

When we write mark-up inside a component, Blazor will assume it should be assigned to a Parameter on the component that is descended from the RenderFragment class and is named ChildContent. If we wish to use a different name, or multiple render fragments, then we must explicitly specify the parameter’s name in our mark-up.

TableTemplate.razor

<table class="table">
    <tr>
        @TableHeader
    </tr>

    @ChildContent
</table>

@code {
    [Parameter]
    public RenderFragment TableHeader { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Index.razor

@page "/"

<TableTemplate>
    <TableHeader>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
    </TableHeader>

    <ChildContent>
        <tr>
            <td>John</td>
            <td>Male</td>
            <td>37</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>Female</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Male</td>
            <td>1</td>
        </tr>
    </ChildContent>

</TableTemplate>

Passing data to a RenderFragment

As well as the standard RenderFragment class, there is also a generic RenderFragment<T> class that can be used to pass data into the RenderFragment.

TableTemplate.razor

@using System.Diagnostics.CodeAnalysis
@typeparam TItem

<table class="table">
    <tr>
        @TableHeader
    </tr>

    @foreach (var item  in Items)
    {
        if (RowTemplate is not null)
        {
            <tr>@RowTemplate(item)</tr>
        }
    }
</table>

@code {

    [Parameter]
    public RenderFragment TableHeader { get; set; }

    [Parameter, AllowNull]
    public IReadOnlyList<TItem> Items { get; set; }

    [Parameter]
    public RenderFragment<TItem>? RowTemplate { get; set; }

}

Index.razor

@page "/"

<TableTemplate Items="people" Context="person">
    <TableHeader>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
    </TableHeader>

    <RowTemplate>
        <td>@person.Name</td>
        <td>@person.Gender</td>
        <td>@person.Age</td>
    </RowTemplate>

</TableTemplate>

@code
{
    private List<Person> people = new()
    {
        new Person() { Name = "John", Gender = "Male", Age = 37 },
        new Person() { Name = "Rose", Gender = "Female", Age = 32 },
        new Person() { Name = "Martin", Gender = "Male", Age = 1 },
    };

    private class Person
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public int Age { get; set; }
    }
}

References
https://blazor-university.com/templating-components-with-renderfragements/
https://blazor-university.com/templating-components-with-renderfragements/passing-data-to-a-renderfragement/
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-6.0

Attribute Splatting and Arbitrary Parameters in Blazor

Components can capture and render additional attributes in addition to the component’s declared parameters. Additional attributes can be captured in a dictionary and then splatted onto an element when the component is rendered using the @attributes Razor directive attribute. This scenario is useful for defining a component that produces a markup element that supports a variety of customizations.

[Parameter(CaptureUnmatchedValues =true)]
public Dictionary<string, object> 
ArbitraryAttributeDictionary { get; set; }

Example

DummyText.razor

<div @attributes="TextAttributes">
    @Value
</div>

@code {

    [Parameter]
    public string Value { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> TextAttributes  { get; set; }

}

Index.razor

@page "/"

<DummyText Value="Hello World" Title="Hi"></DummyText>

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0#attribute-splatting-and-arbitrary-parameters
http://www.binaryintellect.net/articles/f52ae3dc-53fd-4342-97d1-e9cdcf47cd11.aspx

ASP.NET Core Blazor State Management

We can use ASP.NET Core Protected Browser Storage:

Use the Local Storage

@page "/"
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedLocalStorage BrowserStorage

<h1>Local Storage!</h1>

<input class="form-control" @bind="currentInputValue" />
<button class="btn btn-secondary" @onclick="Save">Save</button>
<button class="btn btn-secondary" @onclick="Read">Read</button>
<button class="btn btn-secondary" @onclick="Delete">Delete</button>

@code {
  string currentInputValue;

  public async Task Save()
  {
    await BrowserStorage.SetAsync("name", currentInputValue);
  }

  public async Task Read()
  {
    var result = await BrowserStorage.GetAsync<string>("name");
    currentInputValue = result.Success ? result.Value : "";
  }

  public async Task Delete()
  {
    await BrowserStorage.DeleteAsync("name");
  }
}

Use the Session Storage

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-6.0&pivots=server
https://www.thomasclaudiushuber.com/2021/04/19/store-data-of-your-blazor-app-in-the-local-storage-and-in-the-session-storage/

Create Indexes in MongoDB via .NET

static async Task CreateIndexAsync()
{
    var client = new MongoClient();
    var database = client.GetDatabase("HamsterSchool");
    var collection = database.GetCollection<Hamster>("Hamsters");
    var indexKeysDefinition = Builders<Hamster>.IndexKeys.Ascending(hamster => hamster.Name);
    await collection.Indexes.CreateOneAsync(new CreateIndexModel<Hamster>(indexKeysDefinition));
}

References
https://stackoverflow.com/questions/17807577/how-to-create-indexes-in-mongodb-via-net

Setting up Serilog in .NET 6 for ASP.NET

dotnet add package Serilog.AspNetCore

Select Providers:

https://github.com/serilog/serilog/wiki/Provided-Sinks

Program.cs

builder.Host.UseSerilog((ctx, lc) => lc
    .MinimumLevel.Override("Microsoft", LogEventLevel.Warning)
    .Enrich.FromLogContext()
    .WriteTo.Console()
    .WriteTo.File("logs/log-.txt", rollingInterval: RollingInterval.Day)
    .WriteTo.MongoDBBson("mongodb://localhost/interfaces","logs"));

Finally, clean up by removing the remaining configuration for the default logger, including the "Logging" section from appsettings.*.json files

References
https://github.com/serilog/serilog-aspnetcore
https://blog.datalust.co/using-serilog-in-net-6/
https://github.com/serilog/serilog-sinks-console
https://github.com/serilog/serilog-sinks-file
https://github.com/serilog/serilog-sinks-mongodb
https://github.com/saleem-mirza/serilog-sinks-sqlite

Response Caching in ASP.NET Core

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddResponseCaching();

var app = builder.Build();

app.UseHttpsRedirection();

// UseCors must be called before UseResponseCaching
//app.UseCors();

app.UseResponseCaching();
//Near the start
app.UseResponseCompression();

//ensure response compression is added before static files

app.UseStaticFiles();

References
https://docs.microsoft.com/en-us/aspnet/core/performance/caching/middleware?view=aspnetcore-6.0
https://docs.microsoft.com/en-us/aspnet/core/performance/caching/response?view=aspnetcore-6.0
https://stackoverflow.com/questions/46832723/net-core-response-compression-middleware-for-static-files

Response Compression in ASP.NET Core

The following code shows how to enable the Response Compression Middleware for default MIME types and compression providers (Brotli and Gzip):

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddResponseCompression();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseResponseCompression();
    }
}

Customize

public void ConfigureServices(IServiceCollection services)
{
    services.AddResponseCompression(options =>
    {
        options.Providers.Add<BrotliCompressionProvider>();
        options.Providers.Add<GzipCompressionProvider>();
        options.Providers.Add<CustomCompressionProvider>();
        options.MimeTypes = 
            ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "image/svg+xml" });
    });
}

References
https://docs.microsoft.com/en-us/aspnet/core/performance/response-compression?view=aspnetcore-6.0