Category: Blazor

Blazor and RowNumber in Grid

The data that comes from the backend does not, usually, provide a row number . So how to obtain this ? Create a class, will say any programmer …

public  record DataWithNumber<T>(int number, T data) 
    where T: class

And the usage

 var data = HttpClient_WebApi.GetFromJsonAsAsyncEnumerable<Order_Details_Extended>(url);
 int i = 0;

 await foreach (var item in data)
     if (item == null) continue;
     dataArr.Add(new DataWithNumber<Order_Details_Extended>(i, item));
     if ((i < 500 && i % 100 == 0) || (i > 500 && i % 1000 == 0))
         nrRecordsLoaded = i;

         await InvokeAsync(StateHasChanged);
         await Task.Delay(1000);
 nrRecordsLoaded = i;

And the grid:

<FluentDataGrid Items="@dataForQuery" Virtualize="true" GenerateHeader="GenerateHeaderOption.Sticky">
    <PropertyColumn Property="@(p => p.number)" Sortable="true" />
    <PropertyColumn Property="@(p =>" Sortable="true">
            <div class="search-box">
                <FluentSearch type="search" Autofocus=true @bind-Value=nameOrderIdFilter @oninput="HandleOrderIdFilter" @bind-Value:after="HandleClearIdFilter" Placeholder="Order Id..." />
    <PropertyColumn Property="@(p =>" Sortable="true" />
    <PropertyColumn Property="@(p =>" Sortable="true" />
    <PropertyColumn Property="@(p =>" Sortable="true" />
    <PropertyColumn Property="@(p =>" Sortable="true" />
    <PropertyColumn Property="@(p =>" Sortable="true" />

Aspire Blazor WebAssembly and WebAPI


Aspire is the new visualizer – see

I am very fond of WebAPI  –  it allows for all people to see the functionality of a site , in a programmatic way ( side note: , my nuget package, , allows to make workflows from your WebAPI)

And Blazor WebAssembly is a nice addition that the WebAPI . I am talking about Interactive WebAssembly (  )  . I do want ( for the moment ) to use Interactive Server because

  1. it is easy to forget to add functionality to the WebAPI
  2. it is not separating UI from BL

So I decided to add an Blazor WebAssembly and WebAPI into Aspire to see how they work together.

The first problem that  I have is how to transmit the WebAPI URL to the Blazor WebAssembly . Think that is not Interactive Server or Auto – in order to have the environment or configuration . Blazor Interactive WebAssembly  are just static files that are downloaded to the client. And they are executed in the browser.

But I have tried with adding to the Environment in usual way

.WithEnvironment(ctx =&gt;
if (api.Resource.TryGetAllocatedEndPoints(out var end))
if (end.Any())
	ctx.EnvironmentVariables["HOSTAPI"] = end.First().UriString;


And no use!

After reading ASP.NET Core Blazor configuration | Microsoft Learn  and aspire/src/Microsoft.Extensions.ServiceDiscovery at main · dotnet/aspire ( and API review for Service Discovery · Issue #789 · dotnet/aspire ( I realized that the ONLY way is to put in wwwroot/appsettings.json

So I came with the following code that tries to write DIRECTLY to wwwroot/appsettings.json file

namespace Aspire.Hosting;
public static class BlazorWebAssemblyProjectExtensions
    public static IResourceBuilder<ProjectResource> AddWebAssemblyProject<TProject>(
        this IDistributedApplicationBuilder builder, string name,
        IResourceBuilder<ProjectResource> api) 
        where TProject : IServiceMetadata, new()
        var projectbuilder = builder.AddProject<TProject>(name);
        var p=new TProject();
        string hostApi= p.ProjectPath;
        var dir = Path.GetDirectoryName(hostApi);
        var wwwroot = Path.Combine(dir, "wwwroot");
        if (!Directory.Exists(wwwroot)) {
        var file = Path.Combine(wwwroot, "appsettings.json");
        if (!File.Exists(file))
            File.WriteAllText(file, "{}");
        projectbuilder =projectbuilder.WithEnvironment(ctx =>
            if (api.Resource.TryGetAllocatedEndPoints(out var end))
                if (end.Any())
                    var fileContent = File.ReadAllText(file);

                    Dictionary<string, object>? dict;
                    if (!string.IsNullOrWhiteSpace(fileContent))
                        dict = new Dictionary<string, object>();
                        dict = JsonSerializer.Deserialize<Dictionary<string,object>>(fileContent!);

                    dict["HOSTAPI"] = end.First().UriString;                    
                    JsonSerializerOptions opt = new JsonSerializerOptions(JsonSerializerOptions.Default)
                            { WriteIndented=true};

        return projectbuilder;


And in Aspire

var api = builder.AddProject<Projects.ExampleWebAPI>(nameof(Projects.ExampleWebAPI));
builder.AddWebAssemblyProject<Projects.ExampleBlazorApp>(nameof(Projects.ExampleBlazorApp), api);

And in Blazor Interactive WebAssembly

var hostApi = builder.Configuration["HOSTAPI"];
if (string.IsNullOrEmpty(hostApi))
    hostApi = builder.HostEnvironment.BaseAddress;
    var dict = new Dictionary<string, string?> { { "HOSTAPI", hostApi } };

builder.Services.AddKeyedScoped("db",(sp,_) => new HttpClient { BaseAddress = new Uri(hostApi) });

What about deploying the code to production ? Well, I think that is better to wrote yourself to wwwroot/appsettings.json and remove the data . But I will try to deploy and let you know….

Deploy Blazor WASM to Github Pages in 7 steps


You have an Blazor Interactive WebAssembly ( CSR ) , not a Server ( static or interactive)

I will make as the repo is  . Change my name with yours and TILT  with your repo

So let’s start

Step 1   You must configure GitHub Pages – create a docs folder and put an index.html  . Then  goto github Settings => Pages ( )  and put there main / docs  . 

Step 2  Verify it is working. If your repo is , then browse to and ensure that you can see the index. If not, goto Step 1

Step 3  Add 2 files .nojekyll (content : null , empty …. just create it ) and .gitattributes ( content : *.js binary )

Step 4 dotnet publish your Blazor WASM csproj . Find the folder wwwroot where was published.

Step  5  Find index.html  in the folder . Edit base href , put the repo name  (<base href=”/TILT/” />  ). Also you can modify the css/js  by adding the date ( e.g.  <link rel=”stylesheet” href=”css/app.css?202312162300″ /> ) .

Step 6  Copy the index.html and the other files inside the docs folder . Also, copy the index.html as 404.html file

Step 7 Commit and push. Now you can enjoy your Blazor site hosted for free in github  : 

Note 1 : If some url’s do not work , then try to add the following

@inject IWebAssemblyHostEnvironment HostEnvironment
     var baseAddress = HostEnvironment.BaseAddress;
     if (!baseAddress.EndsWith(“/”)) baseAddress += “/”;


to the url

Note 2:  For more deployments please read

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.