Skip to content

Instantly share code, notes, and snippets.

@chaojian-zhang
Last active January 11, 2023 18:53
Show Gist options
  • Save chaojian-zhang/09df5976b8c39bdcc792d3d3481a512b to your computer and use it in GitHub Desktop.
Save chaojian-zhang/09df5976b8c39bdcc792d3d3481a512b to your computer and use it in GitHub Desktop.
Blazor bizarre. #Blazor #C# #.Net Core

Blazor Bizarre

Blazor is NOT procedural. And you cannot define "functional components" - so all the shitty little layouts need to become a seperate component, which quickly makes project messy because each component needs some naming.

Blazor is entirely FUNCTIONAL despite what it looks like, and things like the below can happen that blew your mind:

// The code below depends on Blazorized for <Row> and <Column> definitions

// ProductGalerry.blazor
@using Shared = global::Shared

// Also note that here I used a functional approach rather than a single top-level for loop because otherwise it's not possible to use
// modulus to differentiate when we should create a top-level <Row> element
@for (int row = 0; row < Categories.Length / RowColumnSize; row++)
{
    <Row>
        @for (int col = 0; col < RowColumnSize; col++)
        {
            var index = row * RowColumnSize + col;  // YOU WILL BE SURPRISED TO LEARN THAT AT THIS POINT OF CODE, THE VALUE FOR Row IS ALWAYS 3!
            if (index < Categories.Length)
            {
                var items = Categories[index].Select(t => Selector(t)).Distinct();
                <ProductGalleryPane Category=@Categories[index].Key Names=@items></ProductGalleryPane>                
            }
        }
    </Row>
}

@code {
    public const int RowColumnSize = 3;

    [Parameter]
    public IGrouping<string, ProductInformation>[] Categories { get; set; }
    [Parameter]
    public Func<ProductInformation, string> Selector { get; set; }
}

// ProductGalleryPane
<Column>
    <h4 class="title is-4">@Category</h4>
    @foreach (var name in Names)
    {
        <li>@name</li>
    }
</Column>

@code {
    [Parameter]
    public string Category { get; set; }
    [Parameter]
    public IEnumerable<string> Names { get; set; }
}

Now, I doubt there is any other framework better than Blazor - web programming has been mostly bizarre and chaotic at best (since it's UI).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment