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.