(C# ASP.NET Core) Minimal steps to use a Blazor Component in a Razor Page

Following are the minimal steps needed to run a hello world type of razor component that handles a click event. The component will have to be based on blazor because events have to be handled. The events are processed on the server side. If no events have to be handled, then these steps are not required - you should use render-mode=Static
(Rev. 06-Nov-2022)

Categories | About |     |  

Parveen,

Purpose of this Tutorial

Razor components are re-usable razor files that can render/substitute complex html at the place of use. This html can either be static or it can include event handlers for, say, a click event of a button. The former case is simpler - but the latter case requires an integration of blazor with your ASP.NET Core project.

In this tutorial we shall show the minimal steps required to integrate a hello world type of razor component that responds to click event of a button.

Video Explanation

Please watch the following youtube video:

Step 1 - The Startup Configuration

Add the following two lines to your Startup.cs file [Visual Studio 2019] - or Program.cs if you are using Visual Studio 2022.

The first line is to be added for the server side blazor service, and the second is a mapping for the MapBlazorHub towards the end of the file.

// Program.cs file 
// NOTE: Visual Studio 2022 
// minimum .NET 6, .NET Core 5 
var builder = WebApplication.CreateBuilder(args);

// 1. Add server side blazor 
builder.Services.AddServerSideBlazor();

builder.Services.AddRazorPages();

var app = builder.Build();

// MUST BE USED 
app.UseStaticFiles();

app.UseRouting();

app.MapRazorPages();

// 2. MapBlazorHub 
app.MapBlazorHub();

app.Run();

Step 2 - Modify the _Layout file

Add the following three tags - base, component (both in the head) and script (just at the close of the body tag) as shown.

PLEASE NOTE: blazor.server.js is NOT to be added by YOU. The tag has to be added exactly as shown. ASPNET Core will take care of everything else.
<!-- 
    
    _Layout.cshml file that is connected
    to the razor pages through _ViewStart

    NOTE: 
    ====
    
    Only the additions are shown below. Other
    tags are to be included as per need

-->

<!DOCTYPE html>

<html>

<head>

    <base href="~/" />

    <component type="typeof(HeadOutlet)"
               render-mode="ServerPrerendered" />

</head>

<body>

    <div>
        @RenderBody()
    </div>

    <!--
        NOTE
        ====

        YOU DO NOT HAVE TO ADD the js file

        ONLY THIS script TAG IS REQUIRED

    -->

    <script src="_framework/blazor.server.js"></script>

</body>

</html>

Step 3 - Add an _Imports.razor

Create a folder called "MyComponents" in the root directory.

Add an imports file _Imports.razor to this folder, and add these using directives to this file


@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {Write your app namespace}

Step 4 - Add a Hello Component

Add a component file Hello.razor to the "MyComponents" folder so that it is adjacent to the "_Imports" file you added above, and add this code -


@*
    Hello.razor file

    we have placed this file 
    in a folder called MyComponents

*@

<h3>@Message</h3>

<button @onclick="MyFunc">Click Me!</button>

@code {

    private String? Message { get; set; }

    private void MyFunc()
    {
        Message = "Hello Blazor in Razor";
    }

}

Step 5 - Use the Component

Add the following to your razor page and run the application to see the component in action. Please note that the render-mode is ServerPrerendered.


@*
    Index.cshtml file
    this file is connected to _Layout
    through _ViewStart
*@

@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<component type="typeof({your app namespace}.MyComponents.Hello)"
           render-mode="ServerPrerendered" />
           

This Blog Post/Article "(C# ASP.NET Core) Minimal steps to use a Blazor Component in a Razor Page" by Parveen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.