Implement blazor backed HTML custom element

wanaxe · Sep 29, 2022 · ed2cbcd · ed2cbcd
1 parent 3b2447e
commit ed2cbcd
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# Samples for ASP.NET Core 6.0 (435)
+# Samples for ASP.NET Core 6.0 (436)
 
-Samples for ASP.NET Core 7.0 RC1 is available [here](/projects/.net7) (34).
+Samples for ASP.NET Core 7.0 RC1 is available [here](/projects/.net7) (35).
 
 ## Previous versions
 

diff --git a/projects/.net7/ComponentTwenty/CustomElement/CustomElement.csproj b/projects/.net7/ComponentTwenty/CustomElement/CustomElement.csproj
@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+    <PropertyGroup>
+        <TargetFramework>net7.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.0-rc.1.22427.2" />
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-rc.1.22427.2" />
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-rc.1.22427.2" PrivateAssets="all" />
+    </ItemGroup>
+</Project>
diff --git a/projects/.net7/ComponentTwenty/CustomElement/Interaction.razor b/projects/.net7/ComponentTwenty/CustomElement/Interaction.razor
@@ -0,0 +1,13 @@
+<p>
+@Content
+</p>
+
+Count: @_count 
+
+<button class="btn btn-primary" @onclick="()=> _count++">Click</button>
+
+@code {
+    private int _count = 0;
+
+    [Parameter] public string Content { get; set; } = string.Empty;
+}
diff --git a/projects/.net7/ComponentTwenty/CustomElement/Program.cs b/projects/.net7/ComponentTwenty/CustomElement/Program.cs
@@ -0,0 +1,8 @@
+using CustomElement;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.RegisterCustomElement<Interaction>("pa-interaction");
+
+await builder.Build().RunAsync();
diff --git a/projects/.net7/ComponentTwenty/CustomElement/_Imports.razor b/projects/.net7/ComponentTwenty/CustomElement/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
diff --git a/projects/.net7/ComponentTwenty/README.md b/projects/.net7/ComponentTwenty/README.md
@@ -0,0 +1,3 @@
+# Blazor WebAssembly backed HTMl Custom Element
+
+This is a sample project to show how to create a Blazor WebAssembly component that can be used as a custom element in a HTML page.
diff --git a/projects/.net7/ComponentTwenty/Web/Pages/Index.cshtml b/projects/.net7/ComponentTwenty/Web/Pages/Index.cshtml
@@ -0,0 +1,18 @@
+@page
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/pico.min.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Blazor Custom Element</h1>
+      <pa-interaction content="Hello Anne" />
+    </main>
+    <script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
+    <script src="_framework/blazor.webassembly.js"></script>
+  </body>
+</html>
diff --git a/projects/.net7/ComponentTwenty/Web/Pages/_ViewImports.cshtml b/projects/.net7/ComponentTwenty/Web/Pages/_ViewImports.cshtml
@@ -0,0 +1 @@
+
diff --git a/projects/.net7/ComponentTwenty/Web/Program.cs b/projects/.net7/ComponentTwenty/Web/Program.cs
@@ -0,0 +1,8 @@
+var builder = WebApplication.CreateBuilder(args);
+builder.Services.AddRazorPages();
+var app = builder.Build();
+app.UseWebAssemblyDebugging();
+app.UseBlazorFrameworkFiles();
+app.UseStaticFiles();
+app.MapRazorPages();
+app.Run();
diff --git a/projects/.net7/ComponentTwenty/Web/Web.csproj b/projects/.net7/ComponentTwenty/Web/Web.csproj
@@ -0,0 +1,17 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+    <PropertyGroup>
+        <TargetFramework>net7.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="7.0.0-rc.1.22427.2" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <ProjectReference Include="..\CustomElement\CustomElement.csproj" />
+    </ItemGroup>
+
+</Project>
diff --git a/projects/.net7/README.MD b/projects/.net7/README.MD
@@ -1,4 +1,4 @@
-# .NET 7 (34)
+# .NET 7 (35)
 
 Samples in this section require .NET 7 RC1. You can download it from [here](https://dotnet.microsoft.com/en-us/download/dotnet/7.0).
 
@@ -127,11 +127,15 @@ Samples in this section require .NET 7 RC1. You can download it from [here](http
 
 * [Component - 18](ComponentEighteen) 
 
-  This sample demonstrate @bind:after modifier that allows to execute async code after a binding event has been completed (value has changed).
+  This sample demonstrates @bind:after modifier that allows to execute async code after a binding event has been completed (value has changed).
 
 * [Component - 19](ComponentNineteen) 
 
-  This sample demonstrate @bind:get @bind:set modifier that simplify two-way data binding. 
+  This sample demonstrates @bind:get @bind:set modifier that simplify two-way data binding. 
+
+* [Component - 20](ComponentTwenty)
+
+  This sample shows how to implement a HTML custom element using Blazor Web Assembly.
 
 ## Problem Details
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Blazor WebAssembly backed HTMl Custom Element

		This is a sample project to show how to create a Blazor WebAssembly component that can be used as a custom element in a HTML page.