Skip to content
Adaptive Cards for Blazor
C# JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 3ba8769 Oct 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc
releases Updated sample app to 1.0.0 Oct 15, 2019
samples Fixes #3 Oct 27, 2019
src Fixes #3 Oct 27, 2019
.editorconfig Code formattings. Added XML-documentation. Oct 4, 2019
.gitignore AdaptiveCards components for Blazor. Uses AdaptiveCards' .NET SDK for… Sep 22, 2019
LICENSE.txt AdaptiveCards components for Blazor. Uses AdaptiveCards' .NET SDK for… Sep 22, 2019
global.json Code formattings. Added XML-documentation. Oct 4, 2019
readme.md Fixes #3 Oct 27, 2019

readme.md

Introduction

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

Adaptive Cards for Blazor Logo

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.

NuGet

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.0. 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:

You can’t perform that action at this time.