0 Comments

After some hiatus there’s now a new 2.0.0 version available of Event Aggregator for Blazor. For those who are not familiar with Event Aggregator for Blazor, Event aggregator is used for indirect component to component communication. In the event aggregator pattern you have message/event publishers and subscribers. In the case of Blazor, a component can publish its events and other component(s) can react to those.

Project home: https://github.com/mikoskinen/Blazor.EventAggregator

There’s few changes and additions in this release:

Easier initialization

Event Aggregator for Blazor now contains a ServiceCollectionExtension, making it easier to start using the component. From version 2.0.0 you can use the following initialization code in your ConfigureServices:

public void ConfigureServices(IServiceCollection services)
{
    services.AddEventAggregator();
}

Note: The library has been tested only with the latest server side version of Blazor. It should work with Blazor WebAssembly, but more testing is required. In Blazor WebAssembly you register the library in application’s Main-method.

Auto refresh is disabled by default

Previously, Event Aggregator for Blazor tried always to execute subscriber’s StateHasChanged-method after it had handled a message. This made (and can still make) working with the Event Aggregator easier as it means you don’t have to manually call StateHasChanged in your Handle-method, if you want to update the UI. Unfortunately in some situations the auto refresh can cause performance issues so from version 2.0.0 onwards the auto refresh is disabled by default.

You can enable auto refresh through options:

services.AddEventAggregator(options => options.AutoRefresh = true);

Auto refresh is based on reflection and it assumes that the subscriber inherits from ComponentBase.

Auto refresh now understands component’s SynchronizationContext

Previously, Event Aggregator for Blazor’s auto refresh just executed component’s StateHasChanged-method. In the preview versions of Blazor this worked OK but as Blazor now uses SynchronizationContext to enforce a single logical thread of execution, auto refresh had a habit of crashing the application. This is now fixed.

0 Comments

If you’re using ASP.NET Core 3.1.1 and are seeing HTTP Error 500 when deploying your application into Azure App Service, there’s a high change that the issue is caused by a known issue:

If your project has a package reference that transtively references certain assemblies in the Microsoft.AspNetCore.App shared framework
that are also available as NuGet packages and executes on a runtime other than 64-bit Windows, you will receive a runtime exception at the time the assembly is loaded with a message like:

Could not load file or assembly 'Microsoft.AspNetCore.DataProtection.Abstractions, Version=3.1.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'. The located assembly's manifest definition does not match the assembly reference. (0x80131040)

 

Solution is to switch to 64 bit Azure App Service or to manually reference the problematic package.

Debugging this can be a pain as Azure App Service’s diagnostic tools think that everything is running smoothly and IIS’ stdout only reports that application has successfully started. What can help is wrapping the CreateWebHostBuilder inside a try-catch. Here’s an example which uses nLog:

        public static void Main(string[] args)
        {
            var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
            var isDev = string.Equals(environment, "development", StringComparison.InvariantCultureIgnoreCase);
            var configFileName = isDev ? "nlog.Development.config" : "nlog.config";

            var logger = NLogBuilder.ConfigureNLog(configFileName).GetCurrentClassLogger();

            logger.Info("Starting application. {Environment}, {LoggingConfigurationFileName}", environment, configFileName);

            try
            {
                CreateWebHostBuilder(args).Build().Run();
            }
            catch (Exception e)
            {
                logger.Error(e, "Failed to start application", e);
            }
            finally
            {
                NLog.LogManager.Shutdown();
            }
        }

0 Comments

There’s now a new version 2.0.0 of Adaptive Cards for Blazor available.

This update changes two things:

  • It targets .NET Core 3.1 instead of .NET Core 3.0.
  • It also updated Adaptive Cards SDK to the latest version.

There’s also some internal changes on how the package is created. This makes it easier to use the library with Blazor WebAssembly.

How to learn more about Adaptive Cards for Blazor

As before, the best way to start learning about Adaptive Cards for Blazor is the “Getting Started” –tutorial. There’s also a “Quick start” available.

There’s also more than 40 samples available which show you how to use features like Card Collections and how to handle submit actions in C#.

For the source code and current issues & feature requests, please see GitHub.

0 Comments

Last month I wrote about a new library called Blazor.Animate which aims to make it easier to add animations into Blazor Applications. There’s now a new version 2.0.0 available from NuGet.

blazoranimate

The new version adds couple things:

  • The library now targets .NET Core 3.1, which is a LTS-version of .NET Core.
  • The library now works better with Blazor WebAssembly (thanks to Matthias Gernand)

The project repository now contains a new WebAssembly sample. 

Background

If you’re new to Blazor.Animate, here’s a quick introduction to the library. Blazor.Animate is a Blazor Component which allows you to animate how other components are brought into the view. The library is powered by AOS.

To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:

<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" >
    <Counter></Counter>
</Animate>

The library currently supports the following animations:

  • Fade
  • FadeIn
  • FadeUp
  • FadeDown
  • FadeLeft
  • FadeRight
  • FadeUpRight
  • FadeUpLeft
  • FadeDownRight
  • FadeDownLeft
  • FlipUp
  • FlipDown
  • FlipLeft
  • FlipRight
  • SlideUp
  • SlideDown
  • SlideLeft
  • SlideRight
  • ZoomIn
  • ZoomInUp
  • ZoomInDown
  • ZoomInLeft
  • ZoomInRight
  • ZoomOut
  • ZoomOutUp
  • ZoomOutDown
  • ZoomOutLeft
  • ZoomOutRight

0 Comments

Blazor.Animate is a new MIT-licensed Blazor-component which allows you to easily add fade, slide and zoom-effects into your Blazor applications. Blazor.Animate is powered by the AOS-library.

blazoranimate

Blazor.Animate is available through Nuget. Its source code and project home can be found from GitHub.

What can it do?

With Blazor.Animate you can animate how other components are brought into the view.

How to use it?

To animate a component, wrap it inside Animate-component and use the Animation-parameter to define the animation:

    <Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" >
        <Counter></Counter>
    </Animate>

Is it really that easy?

Yes, after you have added the required Nuget-package and JSInterop. For guidance, please see the readme for a more throughout Getting Started guide: https://github.com/mikoskinen/Blazor.Animate

What animations are supported?

Here’s the built-in animations provided by Blazor.Animate:

  • Fade
  • FadeIn
  • FadeUp
  • FadeDown
  • FadeLeft
  • FadeRight
  • FadeUpRight
  • FadeUpLeft
  • FadeDownRight
  • FadeDownLeft
  • FlipUp
  • FlipDown
  • FlipLeft
  • FlipRight
  • SlideUp
  • SlideDown
  • SlideLeft
  • SlideRight
  • ZoomIn
  • ZoomInUp
  • ZoomInDown
  • ZoomInLeft
  • ZoomInRight
  • ZoomOut
  • ZoomOutUp
  • ZoomOutDown
  • ZoomOutLeft
  • ZoomOutRight

Are there any samples of these animations?

Blazor.Animate’s sample site contains a testbed-page which can be used to check all the animations: https://animateblazorsamplessvc.azurewebsites.net/testbed

image

Is that all?

There’s also easings. And default animations. And named animations. And anchoring.

All these are demonstrated in the sample and in the readme.

Did you do all the animations?

No. All the animations are provided by AOS.

Where to learn more?

The best way to learn more is to head to GitHub and to browse the source or the sample code. If you have any questions, please submit a GitHub issue on the repo.