Introducing Adaptive Cards for Blazor

<p>Adaptive Cards for Blazor is a community project that provides <strong>Adaptive Cards support for your Blazor applications</strong>. 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 is also supported.<img style="float: right; display: inline" src="https://raw.githubusercontent.com/mikoskinen/Blazor.AdaptiveCards/master/doc/logo_small.jpg" align="right"></p> <p>The project’s home site with documentation can be found from <a href="https://www.adaptivecardsblazor.com/">https://www.adaptivecardsblazor.com/</a> and I especially recommend you to check out the <a href="https://www.adaptivecardsblazor.com/gettingstarted.html" target="_blank">Getting Started guide</a>. </p> <p>There’s also more than 40 samples available through the <a href="https://adaptivecardsblazorsamplessvc.azurewebsites.net/samples" target="_blank">Sample Site</a>. But please note that the samples are currently hosted on a free Azure App Service plan. If the sample site gets too much traffic, Azure will throttle/take down the site. You can run the samples on your own computer by cloning the repository.</p> <p>Adaptive Cards for Blazor version 1.0.0 is available through <a href="https://www.nuget.org/packages/AdaptiveCardsBlazor/" target="_blank">NuGet</a> and the source code and issue list is available through <a href="https://github.com/mikoskinen/Blazor.AdaptiveCards" target="_blank">GitHub</a>.</p> <h3>Features</h3> <p>Here’s few of the most notable features of this project:</p> <ul> <li><strong>JSON-support</strong>: Create and display Adaptive Cards from the JSON-schema. <li><strong>Templating</strong>: Combine models (objects) and the schema. <li><strong>Card Collections</strong>: Display a list of cards based on model and use template selector to customize the output. <li><strong>Action support</strong>: Handle Submit and OpenUrl actions using C#. <li><strong>Native .NET-based solution</strong>: Blazor Adaptive Cards is based on the official .NET SDK for Adaptive Cards.</li></ul> <p>One of the most powerful features provided by Adaptive Cards for Blazor is <strong>Card Collections</strong>. Card Collections can be used to display a collection of cards, based on a list of models (C# objects) and a schema. This allows you to easily transform your application from this:</p> <p><a href="https://mikaelkoskinen.net/posts/files/1315bd93-099a-4f93-acc2-c36a2d397e84.png"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="https://mikaelkoskinen.net/posts/files/250e37b5-148c-4ad6-8ea5-9cdf125522e6.png" width="644" height="193"></a></p> <p>To this:</p> <p><a href="https://mikaelkoskinen.net/posts/files/e95d59a8-f4e2-4fc8-b8f6-33a530e53454.gif"><img title="animation2" style="display: inline" alt="animation2" src="https://mikaelkoskinen.net/posts/files/a7461fa8-560d-41bb-bd82-d7ce5822a938.gif" width="638" height="255"></a></p> <p>Here’s the required code for displaying a Card Collection:</p><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;"> &lt;CardCollection Models="@forecasts" Schema="@schema"&gt;&lt;/CardCollection&gt;
</pre>
<p>Card Collections can be animated with JS &amp; Css libraries and in the example above, AOS was used. For more information about animations, <a href="https://www.adaptivecardsblazor.com/advanced/animations.html" target="_blank">please see the documentation</a>.</p>
<p>Another powerful feature of the project is handling actions in C#. There’s couple ways of doing this, both <a href="https://www.adaptivecardsblazor.com/actions/submit.html" target="_blank">described in the documentation</a>. Here’s a quick sample of using <strong>OnSubmitAction</strong>:</p><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">&lt;AdaptiveCard Schema="@Schemas.SimpleSubmit" OnSubmitAction="OnSubmit"&gt;&lt;/AdaptiveCard&gt;

@code {
string actionDetails = "";

private void OnSubmit(AdaptiveCards.Blazor.Actions.SubmitEventArgs eventArgs)
{

}
}</pre>
<h3>Quick Start</h3>
<p>The <a href="https://www.adaptivecardsblazor.com/gettingstarted.html" target="_blank">Getting Started guide</a> teaches you how to build Blazor applications using Adaptive Cards for Blazor. It’s the recommended source of information for those who are new to Adaptive Cards.</p>
<p>For a quick introduction, here’s how to add Adaptive Cards for Blazor into your app and to render your first Adaptive Card:</p>
<h4>Add NuGet</h4>
<h4><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">Install-Package AdaptiveCardsBlazor</pre>Configure Startup.cs</h4><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;"> public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();

services.AddBlazorAdaptiveCards();
}</pre>
<h4>Configure _Imports.razor</h4><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">@using AdaptiveCards.Blazor</pre>
<h4>Add JS interop into _Host.cshtml</h4><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;"> &lt;script src="_content/AdaptiveCardsBlazor/adaptiveCardsJsInterop.js"&gt;&lt;/script&gt;</pre>
<h4>Create the schema in your component</h4><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">@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""
}
]
}";
}</pre>
<h4>Render the card by adding component into page</h4><pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">&lt;AdaptiveCard Schema="@schema"&gt;&lt;/AdaptiveCard&gt;</pre>
<h3>Requirements</h3>
<p>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.</p>
<p>Fully tested and supported version of Adaptive Cards for Webassembly version of Blazor is coming shortly.</p>
<h3>License</h3>
<p>Adaptive Cards for Blazor is MIT licensed. The library uses the following other libraries:</p>
<p>AdaptiveCards.Rendering.Html: MIT-license<br>Scriban: BSD 2-Clause "Simplified" License</p>