Getting started with ABS Blazor Pages

The Alliance Business Suite Portals include Blazor Support (Server-Side). ABS Blazor Pages are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

To the Alliance Business Suite, Blazor Components are .NET C# classes built into .NET assemblies that:

Define flexible UI rendering logic.
Handle user events.
Can be nested and reused.
Live scoped to a Web Portal, therefore, to a Business Tenant.
Are stored in the Alliance Business Model as Web Pages / Web Components.
Can be shared and distributed as Razor class libraries or NuGet packages.

Creating a Blazor Component inside the Alliance Business Suite requires some basic knowledge of how traditional Blazor Components work.

The component class is usually written in the form of a Razor markup page. Components in Blazor are formally referred to as Razor components and their only difference with ABS Components is the way they are compiled.

Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a Blazor Page that displays a list of Stock Items stored into the Alliance Business Model:

@page "/Pages/test"

@using Microsoft.EntityFrameworkCore
@inject FenixAlliance.ABM.Data.DataContext db

@foreach(var item in Model){
    <h1>@item.Title</h1>
}

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


@code {
    List<FenixAlliance.ABM.Models.Logistics.Stock.Item.Item> Model {get;set;} = new();

    private void GetProducts()
    {
        Model = db.Item.ToList();
    }

}

In this example, GetProducts is a C# method triggered by the button's onclick event. This method queries the Alliance Business Model for Stock items and then projects the results onto a List of Stock Items.

Fundamentals

Enabling Blazor Support

Enabling Blazor Support is a process that's done at the Template/Page Level. This means that to enable Blazor Support, both Web Page and Web Template should meet certain conditions.

Initializing Blazor at the Template level:

To enable Blazor support on a Web Template, you should add at least these two tags to it, as following:

<!DOCTYPE html>

<html class="no-js" lang="en">

<head>
    <!-- This tag is required to enable blazor support -->
    <base href="/" />
    ....
</head>
<body>
    ....

    @Body

    ....

    <!-- This tag is required to enable blazor support -->
    <script src="_framework/blazor.server.js"></script>

</body>

</html>

Initialize Blazor when the document is ready

The following example starts Blazor when the document is ready:

<body>
    ....

    @Body

    ....

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        Blazor.start();
      });
    </script>
</body>

Initializing Blazor at the Page/Component level:

To enable Blazor for a page or component, you just need to select .razor as the Code Type for any WebPage/WebComponent. If .razor Code Type is selected, the Templating Engine will compile that Web Content as a Blazor Component, enabling syntaxis and diagnostics.

Difference between ABS Blazor Pages and ABS Blazor Components.

At a fundamental level, pages and components differ in that pages contain the @page directive. The Templating Engine will enforce this directive on WebPages marked as .razor Code Type and disallow components containing this directive.

Alliance Business Suite Documentation