sgcHTML: Web UI Components for Delphi, C++ Builder & .NET

// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false);  // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor();   // SgcDataRequest binder, grid state, /sgcHTML.css
// ...
app.UseWebSockets();   // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();

// Controllers/OrdersController.cs
public class OrdersController : Controller
{
    private readonly ShopDb FDb;

    public OrdersController(ShopDb db) { FDb = db; }

    // An IQueryable projection: EF Core turns paging, sort and filters into SQL.
    private IQueryable<OrderRow> Rows() =>
        FDb.Orders.AsNoTracking().Select(o => new OrderRow
        {
            Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
            OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
        });

    public IActionResult Index() => View(Rows());

    // Every page, sort, filter and search click of the grid lands here.
    public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());

    // The toolbar export links: the filtered and sorted rows as XLSX or PDF.
    public IActionResult Export(SgcDataRequest request) =>
        this.SgcGridExport(request, Rows(), "orders");
}

@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
    .Key(o => o.Id)
    .Columns(c =>
    {
        c.Bound(o => o.Reference).Searchable();
        c.Bound(o => o.Customer).Searchable();
        c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Paid);
    })
    .Items(Model)
    .Read("Read")
    .Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
    .ExportAction("Export")
    .Pageable(15)
    .Sortable().Filterable().Searchable().PushUrl())

@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />

@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
    <sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>

// builder.Services.AddHostedService<LiveSalesFeed>();
public sealed class LiveSalesFeed : BackgroundService
{
    private readonly ISgcHtmlHub FHub;
    private readonly Queue<string> FLabels = new Queue<string>();
    private readonly Queue<double> FValues = new Queue<double>();

    public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        var oRandom = new Random();
        while (!stoppingToken.IsCancellationRequested)
        {
            await Task.Delay(1000, stoppingToken);
            FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
            FValues.Enqueue(oRandom.Next(0, 20));
            if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }

            // One WebSocket message redraws the chart in every open browser.
            await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
                new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
        }
    }
}