Skip to content

Replace npm/React client-side with Blazor Server in Samples.Tab #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Replace npm/React client-side with Blazor Server in Samples.Tab #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c1b747
Replace npm/React client-side with Blazor Server in Samples.Tab
Copilot May 6, 2026
568f346
Fix async warning in Tab.razor PostChatMessage method
Copilot May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions Samples/Samples.Tab/Components/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Teams Tab</title>
<HeadOutlet />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
42 changes: 42 additions & 0 deletions Samples/Samples.Tab/Components/Pages/Tab.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@page "/tabs/test"
@rendermode InteractiveServer
@inject IConfiguration Configuration

<h1>👋 Welcome</h1>
<p>This test app lets you try out some of the features offered by Teams SDK for Teams Tab app developers.</p>

<div class="actions">
<button disabled="@(!initialized)" @onclick="PostChatMessage">Post chat message</button>
</div>

@if (!string.IsNullOrEmpty(content))
{
<div class="result">
<pre><code>@content</code></pre>
</div>
}

<p>
For more information, please refer to the
<a href="https://microsoft.github.io/teams-sdk" rel="noopener noreferrer" target="_blank">Teams SDK documentation</a>.
</p>

@code {
private bool initialized;
private string content = string.Empty;

protected override void OnInitialized()
{
initialized = true;
}

private Task PostChatMessage()
{
// The 'post-to-chat' function is invoked by the Teams client SDK from the browser.
// This button demonstrates that the tab UI is rendered via Blazor Server,
// while the actual function execution happens through the Teams bot framework.
content = "Use the Teams client to invoke the 'post-to-chat' function.";
StateHasChanged();
return Task.CompletedTask;
}
}
9 changes: 9 additions & 0 deletions Samples/Samples.Tab/Components/Routes.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<p>Page not found.</p>
</NotFound>
</Router>
3 changes: 3 additions & 0 deletions Samples/Samples.Tab/Components/_Imports.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing
@using static Microsoft.AspNetCore.Components.Web.RenderMode
8 changes: 7 additions & 1 deletion Samples/Samples.Tab/Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
using Microsoft.Teams.Extensions.Logging;
using Microsoft.Teams.Plugins.AspNetCore.DevTools.Extensions;
using Microsoft.Teams.Plugins.AspNetCore.Extensions;
using Samples.Tab.Components;

var builder = WebApplication.CreateBuilder(args);
builder.AddTeams().AddTeamsDevTools();
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();

var app = builder.Build();

app.UseStaticFiles();
app.UseAntiforgery();
app.UseTeams();
app.AddTab("test", "Web/bin");
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
app.AddFunction<Samples.Tab.Body>("post-to-chat", async context =>
{
await context.Send(context.Data.Message);
Expand Down
8 changes: 0 additions & 8 deletions Samples/Samples.Tab/Samples.Tab.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,9 @@
<TargetFramework>net10.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest >
</PropertyGroup>

<ItemGroup>
<EmbeddedResource Include="Web\bin\**" />
<Content Remove="Web\**" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="10.0.0" />

<ProjectReference Include="..\..\Libraries\Microsoft.Teams.Common\Microsoft.Teams.Common.csproj" />
<ProjectReference Include="..\..\Libraries\Microsoft.Teams.Api\Microsoft.Teams.Api.csproj" />
<ProjectReference Include="..\..\Libraries\Microsoft.Teams.Apps\Microsoft.Teams.Apps.csproj" />
Expand Down
13 changes: 0 additions & 13 deletions Samples/Samples.Tab/Web/index.html
View file
Open in desktop

This file was deleted.

Loading
Loading