0 Comments

When Adaptive Cards for .NET is used to render a HTML card, the card renderer automatically adds few classes into the actions. Here’s an example where an adaptive card is rendered in ASP.NET Core using the defaults:

image

We can see that the actions automatically get classes like ac-pushButton and ac-action-openUrl. CSS can be used to customize these classes. But if you’re using something like Bootstrap, it’s quite likely that you want to use classes like btn and btn-primary. This post shows how to use Bootstrap’s btn-classes with Adaptive Cards’ HTML renderer in ASP.NET Core.

Modifying the HTML renderer

You can modify the adaptive cards’ HTML renderer to inject the classes you like. The modifications happen through AdaptiveCardRenderer.ActionTransformers.Register. The modifications can be registered for example in the Configure-method of the application:

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddLocalization();
            services.AddDistributedMemoryCache();
            services.AddSession(options => { options.IdleTimeout = TimeSpan.FromMinutes(20); });

            AdaptiveCardRenderer.ActionTransformers.Register<AdaptiveOpenUrlAction>((action, tag, context) =>
            {
                tag.AddClass("btn");
                tag.AddClass("btn-primary");
            });

The example above adds “btn” and “btn-primary” classes into each OpenUrl action:

image

Conditional classes

Classes can be added conditionally, based on the card’s schema. Here’s an example where action’s style is used to define the applied CSS classes:

            AdaptiveCardRenderer.ActionTransformers.Register<AdaptiveOpenUrlAction>((action, tag, context) =>
            {
                tag.AddClass("btn");

                if (string.Equals(action.Style, "destructive", StringComparison.InvariantCultureIgnoreCase))
                {
                    tag.AddClass("btn-danger");
                }
                else
                {
                    tag.AddClass("btn-primary");
                }
            });

image

As we can see, btn-danger is applied to the button on the right side.

image

Custom attributes

Register-method can be used for more than just adding custom classes. AddAttribute can be used to add new custom attributes to the button:

            AdaptiveCardRenderer.ActionTransformers.Register<AdaptiveOpenUrlAction>((action, tag, context) =>
            {
                tag.Attr("id", AdaptiveCardRenderer.GenerateRandomId());
                tag.Attr("data-ac-url", action.Url);
            });

Note

Register-method can be called only once per element type. If you have multiple calls to Register<AdaptiveOpenUrl>, the last one wins:

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddLocalization();
            services.AddDistributedMemoryCache();
            services.AddSession(options => { options.IdleTimeout = TimeSpan.FromMinutes(20); });

            AdaptiveCardRenderer.ActionTransformers.Register<AdaptiveOpenUrlAction>((action, tag, context) =>
            {
                tag.AddClass("btn");
                tag.AddClass("btn-primary");
            });
            
            AdaptiveCardRenderer.ActionTransformers.Register<AdaptiveOpenUrlAction>((action, tag, context) =>
            {
                tag.AddClass("btn");
                tag.AddClass("btn-danger");
            });

image

0 Comments
Blazor.EventAggregator now works with Blazor 0.9. The library was first released back in February when Blazor was still (partly) called Razor Components and we were still using .cshtml-files. Blazor.EventAggegator 1.1.0 release updates the library to work with latest preview bits of Blazor.

For those not familiar with Blazor.EventAggregator, it is a lightweight Event Aggregator for Blazor. Event aggregator is used for indirect component to component communication. In event aggregator pattern you have message/event publishers and subscribers. In the case of Blazor, component can publish its events and other component(s) can react to those events.

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

0 Comments

Attach to dotnet.exe extension for Visual Studio 2017 & 2019 now has a new version 1.0.0.1. As the version number indicates, only a small thing has changed: The extension manifest had problems with its dependencies, causing issues when trying to install the extension to VS 2019 Preview.

The new version is now available for download from the project’s repository: https://github.com/mikoskinen/AttachToDotnet/tree/master/releases/1.0.0.1

Unfortunately the extension is still not available through the Visual Studio’s extension marketplace, but I hope to have it there in the following week.

Background

Just a quick recap and reasoning for the extension: There’s usually many dotnet.exe processes. Attaching Visual Studio’s debugger to the correct one can be hard. This extensions aims to solve the issue by displaying the actual .DLL of the dotnet.exe process.

0 Comments

GrazeDocs is a new open source static documentation site generator. GrazeDocs converts your Markdown files into full-blown static HTML-pages which you can host anywhere. GrazeDocs uses Razor for themes and it is available as a .NET Core Global Tool.

Project home site: https://grazedocs.io

Project repository: https://github.com/mikoskinen/GrazeDocs

Features

Here’s a list of few interesting features provided by GrazeDocs:

  • Clean and light default theme
  • Automatically generated table of contents
  • Live preview

Live previews is one of the standout features: Live Preview automatically opens a browser with your published documentation site. Every time you update the documentation, the site is automatically updated. You don’t have to manually publish your site to make sure your site looks correct. The Live Preview is done using SignalR.

Getting started

GrazeDocs aims to make it easy to get started by using conventions but it also tries to offer customization options if you aren’t happy with the defaults. For more thorough guides, please visit the documentation available at https://grazedocs.io or the samples at https://github.com/mikoskinen/GrazeDocs/tree/master/samples

GrazeDocs is available as a global tool for .NET Core. To install:

1
dotnet tool install -g GrazeDocs

To start creating your documentation, use GrazeDocs -i . to initialize documentation into the current folder:

1
GrazeDocs -i .

After your happy with the documentation, use GrazeDocs -p to publish your complete site:

1
GrazeDocs –p

Examples and more information

GrazeDocs home page is created using GrazeDocs. You can find the site’s source code from https://github.com/mikoskinen/GrazeDocs/tree/master/docs

For more information, GrazeDocs samples are good starting point as is https://GrazeDocs.io.