blazor_dotnet10

Blazor .NET 10 QuickGrid Component

quickgrid

.NET 10: .NET 10 is the latest version of the .NET framework, which provides a robust platform for building web applications, services, and more.

Blazor: Blazor A framework for building interactive web applications using C# instead of JavaScript. It allows developers to create rich web UIs with C#.

QuickGrid: QuickGrid A component that simplifies the process of displaying tabular data in Blazor applications. It offers features like sorting, filtering, and pagination out of the box, making it a powerful tool for developers.

.csproj
<Project Sdk="Microsoft.NET.Sdk.Web">

	<PropertyGroup>
		<TargetFramework>net10.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
		<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
	</PropertyGroup>

	<ItemGroup>
		<PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" Version="10.0.1" />
	</ItemGroup>

</Project>

<PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" Version="10.0.1" /> adds the QuickGrid package to the project, enabling the use of its components for displaying data in a grid format.

Weather.razor
@page "/weather"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

<p>
    (Sorting) (Filtering) (Paging)
</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <p>
        Filter by Summary:
        <input type="search" autofocus @bind="summaryFilter" @bind:event="oninput" placeholder="Summary name..." />
    </p>

    <p>
        Items per page:
        <select @bind="@pagination.ItemsPerPage">
            <option>5</option>
            <option>10</option>
            <option>20</option>
            <option>50</option>
        </select>
    </p>

    <QuickGrid @ref="quickGrid" Items="FilteredWeatherForecasts" Pagination="pagination">
        <PropertyColumn Property="@(forecast => forecast.Date)" Title="Date" Format="yyyy-MM-dd" Sortable="true" />
        <PropertyColumn Property="@(forecast => forecast.TemperatureC)" Title="Temp. (C)" Sortable="true" />
        <PropertyColumn Property="@(forecast => forecast.TemperatureF)" Title="Temp. (F)" Sortable="true" />
        <PropertyColumn Property="@(forecast => forecast.Summary)" Title="Summary" Sortable="true" />
    </QuickGrid>
    <Paginator State="pagination" />

}

@code {
    private QuickGrid<WeatherForecast>? quickGrid;
    private IQueryable<WeatherForecast>? forecasts;
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
    string summaryFilter = "";

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate a loading indicator
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };

        forecasts = Enumerable.Range(1, 50).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).AsQueryable();
    }

    IQueryable<WeatherForecast>? FilteredWeatherForecasts
    {
        get
        {
            var result = forecasts;
            if (!string.IsNullOrEmpty(summaryFilter))
            {
                result = result?.Where(c => c.Summary.Contains(summaryFilter, StringComparison.CurrentCultureIgnoreCase));
            }

            return result;
        }
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

Filtering: The FilteredWeatherForecasts property filters the forecasts based on the user input in the search box. It checks if the summaryFilter is not empty and applies the filter accordingly.

Pagination: The PaginationState object manages the number of items displayed per page, allowing users to select their preference from a dropdown.

The Weather component exemplifies how to effectively implement sorting, filtering, and paging in a Blazor application using .NET 10 and C#. By understanding the structure and functionality of this component, developers can create dynamic and user-friendly interfaces for displaying data.

Source

Full source code is available at this repository in GitHub:
https://github.com/akifmt/DotNetCoding/tree/main/src/BlazorAppQuickGridComponent