Introduction

Adaptive Cards for Blazor is a community project that provides Adaptive Cards support for your Blazor applications.

Adaptive Cards are a way to exchange content in a common and consistent way. Adaptive Cards can be integrated into different applications like Microsoft Teams and Outlook. Adaptive Cards can also be integrated into custom applications built with .NET, iOS and JavaScript. And now Blazor, the new Web App platform from Microsoft is supported.

Feature Highlights

Adaptive Cards for Blazor provides components for displaying Adaptive Cards inside your Blazor Application. Here's few of the most notable features of this library:

• JSON-support: Create and display Adaptive Cards from the JSON-schema.
• Templating: Combine models (objects) and the schema.
• Card Collections: Display a list of cards based on model and use template selector to customize the output.
• Action support: Handle Submit and OpenUrl actions using C#.
• Native .NET-based solution: Blazor Adaptive Cards is based on the official .NET SDK for Adaptive Cards.

Project home

Adaptive Cards for Blazor's home site is located at https://adaptivecardsblazor.com/.

Project's source code is available from GitHub. GitHub can be used to report any suggestions or issues.

Requirements

Adaptive Cards for Blazor targets .NET Core 3.1. Please also note that the library has been tested with the server side version of Blazor.

Roadmap

• October 2019: 1.0.0
• October 2019: 1.1.0: Adds support for ToggleVisibility.
• November 2019: 2.0.0: Adds support for .NET Core 3.1.
• May 2020: 3.0.0-beta: Adds support for preview version of .NET 5 and adds a fully tested support for Blazor WebAssembly.
• November 2020: 3.0.0: Adds support for RTM version of .NET 5 and fully supports both the WebAssembly and Server versions of Blazor.

Getting started

Getting Started guide is available through the project's home site.

Quick start

Add NuGet

Install-Package AdaptiveCardsBlazor

Configure Startup.cs

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            
            ...

            services.AddBlazorAdaptiveCards();
        }

Configure _Imports.razor

...
@using AdaptiveCards.Blazor

Add JS interop into _Host.cshtml

    <script src="_content/AdaptiveCardsBlazor/adaptiveCardsJsInterop.js"></script>

Create the schema in Index-component

@code {
    string schema = @"{
      ""$schema"": ""http://adaptivecards.io/schemas/adaptive-card.json"",
      ""type"": ""AdaptiveCard"",
      ""version"": ""1.2"",
      ""body"": [
        {
          ""type"": ""TextBlock"",
          ""text"": ""Adaptive Cards for Blazor simple example""
        }
      ]
    }";
}

Render the card by adding component into page

        <AdaptiveCard Schema="@schema"></AdaptiveCard>

Full source code of index.razor

@page "/"

<AdaptiveCard Schema="@schema"></AdaptiveCard>

@code{
    string schema = @"{
      ""$schema"": ""http://adaptivecards.io/schemas/adaptive-card.json"",
      ""type"": ""AdaptiveCard"",
      ""version"": ""1.2"",
      ""body"": [
        {
          ""type"": ""TextBlock"",
          ""text"": ""Adaptive Cards for Blazor simple example""
        }
      ]
    }";
}

Authors

Adaptive Cards for Blazor is created by Mikael Koskinen.

Contributions are welcome!

License

Adaptive Cards for Blazor is MIT licensed. The library uses the following other libraries:

• AdaptiveCards.Rendering.Html: MIT-license
• Scriban: BSD 2-Clause "Simplified" License