Envision a more stable tech future using Blazor in MDriven

Blazor comes in 2 flavors – serverside and clientside.

This article will discuss the status of ServerSideBlazor in MDriven Turnkey.

Creating Blazor components usable from MDriven Turnkey

Create an Assembly in VS2022 for BlazorComponents

Use .net5.

Import any 3:th party blazor components that you want to base your work on (or work from scratch)

In this example, I import MatBlazor 2.9.

Create a razor file – in markup. Use any logic you need to build the component from details in the ViewModel you will get access to from the mandatory parameter named VMC with type Eco.ViewModel.Runtime.VMAbstractMember

@using MatBlazor
<div class=”my-component”>
This Blazor component is defined in the <strong>RazorClassLibrary1</strong> package.
<MatTable Items=”@List” >
<MatTableHeader>
<th>@VMC.ViewModelColumn.DetailAssociation.Columns[0].PresentationString</th>
<th>@VMC.ViewModelColumn.DetailAssociation.Columns[1].PresentationString</th>
<th>@VMC.ViewModelColumn.DetailAssociation.Columns[2].PresentationString</th>
</MatTableHeader>
<MatTableRow>
<td>@((context[“Attribute1”] as Eco.ViewModel.Runtime.VMNativeTypeAttribute).ValueAsString)</td>
<td>@((context[“Attribute2”] as Eco.ViewModel.Runtime.VMNativeTypeAttribute).ValueAsString)</td>
<td>@((context[“Attribute3”] as Eco.ViewModel.Runtime.VMNativeTypeAttribute).ValueAsString)</td>
</MatTableRow>
</MatTable>

</div>
@code
{
[Parameter]
public Eco.ViewModel.Runtime.VMAbstractMember VMC { set; get; }
public Eco.ViewModel.Runtime.VMManyAssociation<Eco.ViewModel.Runtime.VMClass> List {
get{ return VMC as Eco.ViewModel.Runtime.VMManyAssociation<Eco.ViewModel.Runtime.VMClass>; }
}

}

You must also declare a class implementing IUIComponentFactory. In this class, Turnkey will discover the linking between a component name and the type:

public class UIComponentFactory : IUIComponentFactory
{
public Dictionary<string, Type> GetComponentTypes()
{
var res = new Dictionary<string, Type>();
res.Add(“Component1”, typeof(Component1));
res.Add(“BlazorDateTime”, typeof(BlazorDateTime));
return res;
}
}

Including Blazor components where MDriven Turnkey expects them

Set your build output of the component file to AssetsTK/EXT_ComponentsRazor

Your project must have EnableDynamicLoading. This makes .net provide all the needed references in the output:

<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<BaseOutputPath>C:\temp\SampleModleForAssociations_AssetsTK\EXT_ComponentsRazor</BaseOutputPath>
<!– This prepares the assembly to be used as a plugin–>
   <EnableDynamicLoading>true</EnableDynamicLoading>
</PropertyGroup>

Referencing a Blazor component from a ViewModel

To use a component, set the tagged value Ext_ComponentRazor to the assembly-name ; component-name – like so: RazorClassLibrary1;Component1

Set this on the ViewModelColumn you want to have as the mandatory VMC parameter in the component you have defined.

Make turnkey load a page as Blazor instead of MVC or AngularJS

To bring up the page rendered with Blazor, use the blaapp controller like so: http://localhost:5020/blaapp/ViewOneThing/9!1

Tricky things with AssemblyLoaderContext

It was tricky to discover how to intercept the reflection loading that takes place when .net sees a razor page referring to your components – but basically, we load all assemblies from EXT_ComponentsRazor at the same time as any ModelCodeAssemblies for CodeDress. We then also intercept the AppDomain.CurrentDomain.AssemblyResolve event to see if the loader discovers missing assemblies upon compilation of the razor page. If so, we check our loaded list of EXT_ComponentsRazor assemblies and return the correct one.

Early days – what is left

If you do not provide components for a given datatype, we send out our default Blazor implementation. Our Blazor DataGrid is very rudimentary and not intended for actual use now.

Save context and left-side menus are not all there yet.