how to use blazor webassembly in razor pages?

Question

how to use blazor webassembly component in razor pages?

if I create Count in webassembly how to use it in razor pages?

if I do not open that page do not load dll If I open that page then load it.

/Pages/Count.cshtml with component Count

If I do not open Count.cshtml do not load dll please.

Answer 1

Hi @打玻璃

how to use blazor webassembly in razor pages?

To use Blazor WebAssembly component as custom elements in razor page, you can refer to the following steps:

1- Create a new Blazor WebAssembly application: BlazorWebApp 2- Install the Microsoft.AspNetCore.Components.CustomElements 7.0.0-preview.6.22330.3 version via the NuGet. Note: here we are using the 7.0.0-preview.6.22330.3 version. And we also need to update the WebAssembly to the 7.0.0-preview.6.22330.3 version. Because, when I use 7.0.2 version, it will show some error. the .csproj file as below:

       <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-preview.6.22330.3" />
           <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-preview.6.22330.3" />
           <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-preview.6.22330.3" PrivateAssets="all" />
         </ItemGroup>
       </Project>

3- In the Program.cs file register the Counter component as elements:

builder.RootComponents.RegisterCustomElement<Counter>("my-counter");

4- In the Counter page, modify the code as below:

    <h1>@Title</h1>
    
    <p role="status">Current count: @currentCount</p>
    <p>Increment amount: @IncrementAmount</p>
    
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    
    @code {
        private int currentCount = 0;
    
        [Parameter] public string Title { get; set; } = "Blazor Counter";
        [Parameter] public int? IncrementAmount { get; set; }
    
        private void IncrementCount()
        {
            currentCount += IncrementAmount.GetValueOrDefault(1);
        }
    }

5- Create a Razor page application (use the Asp.net core Web App template), named RazorPageApplication

6- Install the Microsoft.AspNetCore.Components.WebAssembly.Server 7.0.0-preview.6.22330.3 version via Nuget.

7- Add the BlazorWebApp project reference

8- In the _Layout.cshtml page, add the following blazor reference

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> 

    <!-- Blazor -->
    <script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>

    <script src="~/js/site.js" asp-append-version="true"></script>

9- In the Razor project's Program.cs file, add the app.UseBlazorFrameworkFiles(); and app.UseWebAssemblyDebugging(); middleware:

    var builder = WebApplication.CreateBuilder(args);
    
    // Add services to the container.
    builder.Services.AddRazorPages();
    
    var app = builder.Build();
    
    app.UseWebAssemblyDebugging();
    
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    
    app.UseHttpsRedirection();
    
    app.UseBlazorFrameworkFiles();
    
    app.UseStaticFiles();
    
    app.UseRouting();
    
    app.UseAuthorization();
    
    app.MapRazorPages(); 
    app.Run();

10- Then, in the Razor page, you can use the custom elements <my-counter> to display the Blazor component

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

<my-counter title="Khalid" increment-amount="2" />

11- Finally, the result as below

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion