Quick start

This quick start shows the required steps of using Adaptive Cards for Blazor. For a more throughout tutorial, please see the Getting Started guide.

The quick start assumes that an existing server side Blazor application is modified to support Adaptive Cards.

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>

Result

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""
        }
      ]
    }";
}