#blazor-server

In this post I will show you how creating a cross-platform and managing a .NET Service with Blazor that can be installed on Windows (Service) and Linux (systemd).

There is a lot of information on how to run a .NET project as a service, on Windows and on Linux (Mac is not supported yet). I will provide a sample project on GitHub and will only show some of the basics here.

The most interesting part for me is hosting a Blazor Server application with Kestrel as a service on both Windows and Linux. This gives endless possibilities in managing the service, not even from the system itself but also remotely.

Managing service with Blazor

First we create a normal Blazor Server project. I keep the project as-is and just add a few classes to demonstrate the use of Blazor in the service.

Adding the background service

Create a class called CustomBackgroundService. I use the BackgroundService as a base class but I could also implement IHostedService. More information about the different types can be found here.

This service is just logging and then waiting for 5 seconds to simulate a process that runs for a while:

public class CustomBackgroundService : BackgroundService { public bool IsRunning { get; set; } private readonly ILogger<CustomBackgroundService> _logger; public CustomBackgroundService(ILogger<CustomBackgroundService> logger) => _logger = logger; protected override async Task ExecuteAsync(CancellationToken stoppingToken) { try { _logger.LogInformation($"{nameof(CustomBackgroundService)} starting {nameof(ExecuteAsync)}"); IsRunning = true; while (!stoppingToken.IsCancellationRequested) { _logger.LogInformation($"{nameof(CustomBackgroundService)} running {nameof(ExecuteAsync)}"); await Task.Delay(5000); } IsRunning = false; _logger.LogInformation($"{nameof(CustomBackgroundService)} ending {nameof(ExecuteAsync)}"); } catch (Exception exception) { _logger.LogError(exception.Message, exception); } finally { IsRunning = false; } } }

Registering and adding the hosted service:

services .AddLogging(logging => logging.AddConsole()) .AddSingleton<WeatherForecastService>() .AddSingleton<CustomBackgroundService>() .AddHostedService(serviceCollection => serviceCollection.GetRequiredService<CustomBackgroundService>());

I added a new Razor page and added it to the menu (Pages/Service.razor):

@page "/Service" @inject CustomBackgroundService _customBackgroundService <h3>Service</h3> <p><div hidden="@HideIsRunning">Running</div></p> <button name="startButton" class="btn btn-primary" @onclick="Start">Start</button> <button class="btn btn-primary" @onclick="Stop">Stop</button> @code { private bool _isRunning { get; set; } public bool HideIsRunning => !_isRunning; protected override void OnInitialized() { _isRunning = _customBackgroundService.IsRunning; base.OnInitialized(); } private async Task Start() { if(!_customBackgroundService.IsRunning) await _customBackgroundService.StartAsync(new System.Threading.CancellationToken()); _isRunning = _customBackgroundService.IsRunning; } private async Task Stop() { if(_customBackgroundService.IsRunning) await _customBackgroundService.StopAsync(new System.Threading.CancellationToken()); _isRunning = _customBackgroundService.IsRunning; } }

Adding a new menu item to the default Blazor application by changing `Shared/NavMenu.razor’:

<div class="nav-item px-3"> <NavLink class="nav-link" href="Service"> <span class="oi oi-pulse" aria-hidden="true"></span> Service </NavLink> </div>

When debugging the project this should be visible:

Blazor with running service

you can start and stop the service and check the console of your IDE to see the output:

Output from the service

Running and installing the service

To run the application as a Service the following code has to be added to the Program.cs:

public static void Main(string[] args) { var isService = !(Debugger.IsAttached || args.Contains("--console")); if (isService) Directory.SetCurrentDirectory(Environment.ProcessPath!); var builder = CreateHostBuilder(args.Where(arg => arg != "--console").ToArray()); if (isService) { if (OperatingSystem.IsWindows()) builder.UseWindowsService(); else if (OperatingSystem.IsLinux()) builder.UseSystemd(); else throw new InvalidOperationException( $"Can not run this application as a service on this Operating System"); } builder.Build().Run(); }

Next, install the following Nuget packages:

Windows: Microsoft.Extensions.Hosting.WindowsServices

Linux: Microsoft.Extensions.Hosting.Systemd

.NET Service on Windows

First, publish the application to a folder. Make sure to create the correct publish profile for Windows. Also, consider if you need to publish it Framework-Dependent (the .NET framework has to be installed on the host machine) or Self-Contained (everything needed is included, how cool is that!):

.NET Launch Settings Profile

After publishing, open a Powershell command line, go to the directory conaining the newly published service and execute the following commands:

New-Service -Name “Blazor Background Service” -BinaryPath .\BlazorBackgroundservice.BlazorUI.exe

PowerShell registers the Blazor service

Start-Service -Name “BlazorBackgroundService”

PowerShell starts the new service

I could write logs to the Event Logger but I decided to write simple logs to a text file. When you look into the directory of the service you should see a logfile log****.txt. Look into the logfile to see if the service is running. When going to the url’s provided in the logfile be aware that the https port might not work because there are no valid SSL certificates installed.

Logging on Windows

.NET Service on Linux

Same as for Windows: publish the application to a folder, using the correct publish configuration. I can test the application by adding --console to the command line:

Running on Arch Linux

To install it as a service I created the file in/etc/systemd/system/blazorbackgroundservice.service:

[Unit] Description=Blazor Background Service [Service] Type=Notify ExecStart=/home/jacob/blazorbackgroundservice/linux/BlazorBackgroundService.BlazorUI [Install] WantedBy=multi-user.target

Run the following commands:

sudo systemctl daemon-reload sudo systemctl status blazorbackgroundservice

Stopped service

sudo systemctl start blazorbackgroundservice sudo systemctl status blazorbackgroundservice

It works! Check the status output for the url of the Blazor website and browse to the site to check if it works.

You can even auto-start the service by running the following command:

sudo systemctl enable blazorbackgroundservice

Next time you reboot, the service will automatically start.

Resources

Microsoft.Extensions.Hosting.WindowsServices

Microsoft.Extensions.Hosting.Systemd

Background tasks with hosted services in ASP.NET Core

The post Managing a .NET Service with Blazor appeared first on PureSourceCode.

In this new post, I explain how to create and use Tabs control for Blazor Web Assembly and Blazor Server. You have the full code of this component on GitHub.

Anatomy of Tabs

Tabs container attributes

Anatomy of Tabs control for Blazor

AttributeDescriptionTextFilling1This text is displayed on the left hand side of the tabsTextFilling2This text is displayed on the right hand side of the tabs

Tabs container events

Also, Tabs has the following events that you can use.

EventDescriptionOnTabChangedWhen the use click on a new tab, this event is raised. So, you can attach a function to read the new tab object

Tab attributes

AttributeDescriptionTextThe text to display in the tabValueThe value associate to a tab (useful if you have to filter your data)EnabledIs this tab enabled? If not the user can’t click on it. By default is True

How to use it?

First, add the NuGet package in your project. The name of the package is PSC.Blazor.Components.Tabs and the only dependency it has is Microsoft.AspNetCore.Components.Web (>= 5.0.10).

After that, in your wwwroot\index.html or in the hosts file, you have to add a theme (CSS) for your segment control. Obviously, you can create your own theme. So, use this code:

<link href="_content/PSC.Blazor.Components.Tabs/themes/{theme-name}.css" rel="stylesheet" />

Example

<Tabs TextFilling1="@text1" TextFilling2="@text2" OnTabChanged="OnTabChanged"> <Tab Text="Tab 1" Value="Tab1"> <h2>Content Tab 1</h2> <p> This is the content for the Tab 1. It is enabled. </p> </Tab> <Tab Text="Tab 2" Value="Tab2"> <h2>Content Tab 2</h2> <p> This is the content for the Tab 2. It is enabled. </p> </Tab> <Tab Text="Tab 3" Value="Tab3"> <h2>Content Tab 3</h2> <p> This is the content for the Tab 3. It is enabled. </p> </Tab> <Tab Text="Tab 4" Enabled="@IsEnabled" Value="Tab4"> <h2>Content Tab 4</h2> <p> This is the content for the Tab 4. It is disabled if <i>IsEnabled = false</i> </p> </Tab> </Tabs> @code { public string text1 = "Text on the left"; public string text2 = "Text on the right"; public bool IsEnabled = false; public async Task OnTabChanged(Tab tab) { text1 = $"Tab value: {tab.Value}"; text2 = $"Tab text: {tab.Text}"; } }

Themes

Blue

Blue theme

Green

Green theme

Light colors theme

Red

Red theme

Wrap up

So, now we have a nice and simple Tabs control for Blazor to use in our projects. If you have any comment please add it at the bottom of this post or use the Forum.

The post Tabs control for Blazor appeared first on PureSourceCode.

In this blog I have already talked about creating components but now I want to start from the beginning and explain how to write a reusable Blazor component from scratch. This is the first part of a Blazor article series to tell how to create a reusable Blazor component. So, we can use them in our Blazor application independently of the hosting model (Web Assembly or Server-side). If you google a bit, you can find a lot of example like that but I can’t find one example that explain exactly how the interaction works. Here, step by step what I understood.

Then, for more documentation, example and components about Blazor, here same links in this blog:

Getting Started With C# And Blazor

Setting Up A Blazor WebAssembly Application

Working With Blazor’s Component Model

Secure Blazor WebAssembly With IdentityServer4

Blazor Using HttpClient With Authentication

InputSelect component for enumerations in Blazor

Use LocalStorage with Blazor WebAssembly

Modal Dialog component for Blazor

Create Tooltip component for Blazor

Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs

Also, you can download the source code of this post from GitHub.

So, there result of this post is a simple button. When you click the button, Blazor calls the code in a javascript file and runs it. The result is passed to the C# code and then as result of the component.

Start!

First, I have to create a new Blazor project. For that, Create a new project and search for Blazor. Then, select Blazor WebAssembly App.

Visual Studio 2019 – Create a new project

Then, you have to select the name of the project and its location. The name of my project is PSCBlazor and you can find it on GitHub.

Configure a new project

Select as Target Framework .NET 5. Then, Create.

Addition Information

Now, we have the main project. But to write a reusable Blazor component, we have to create another project for it. Following the same procedure, create a new project but this time select Razor Class Library.

Create a Razor Class Library

Then, follow the instruction. The name of my project is PSCBlazor.SimpleComponent.

If you don’t want to use Visual Studio, you can run from the Command Line

dotnet new razorclasslib

By default, the created project contains several elements:

A predefined “Component1” that is a basic component displaying some styled text in Component1.razor.

A ExampleJsInterop class that demonstrate how to call a basic JS function defined in its own js file in ExampleJsInterop.cs.

The static resources (like png, css and js files) in the “wwwroot” folder: – background.png – exampleJsInterop.js – styles.css

The solution for the custom component

Separate the code from the razor code

Behind the scenes, when you write a razor page, an actual C# class is generated and hopefully the class is partial. It means that it is easy to separate the behavioral code of your component from the html view code.

Single mixed file Component1.razor:

<div class="my-component"> This Blazor component is defined in the <strong>PSCBlazor.SimpleComponent</strong> package. </div> @code { }

Sometimes it is nice to separate the view from the code. In Visual Studio is pretty simple. Create a new Class with the full name of the view file plus cs. For example, if the view is Component1.razor the new file should be Component.razor.cs and automatically Visual Studio understands that this file is part of the view.

Split view and code

Then, a little change in the code because the new class must be a partial class. For example:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace PSCBlazor.SimpleComponent { public partial class Component1 { } }

Interop between Blazor and JavaScript

Now, I write a reusable component for Blazor and I’m going to modify the component to be able to exchange some data between the component itself and the parent. For that, I have to use a JS function through the generated ExampleJsInterop to prompt the user for a text input.

The component will be used this way with TextValue being a property used in the binding:

<Component1 ParentName=”Some text I want to transmit from the parent to the child component” @bind-Text=”TextValue”> </Component1>

Define the parameters

We need to define a property ParentName to transmit some data from the parent to the child component:

[Parameter] public string ParentName { get; set; }

The Parameter attribute tells that the C# property can be used as component parameter.

Now, I need to define a parameter to be able to transmit data to the child component, but we also want to get data from the component using a @bind property.

To make it possible, I have to define a parameter like the previous one named in our case Text.

[Parameter] public string Text { get; set; }

Define a EventCallback parameter to be able to notify the binding engine that the value has changed. As a convention, the name of the event callback property must be named accordingly to the property you want to bind. In our case it must be named TextChanged.

[Parameter] public EventCallback<string> TextChanged { get; set; }

The name of the event callback can be named differently but in that case it is required to specify it when binding a value using

@bind-{Property}:event=”NameOfPropertyChanged”

It means that the two notation are equivalent when binding a value:

<Child @bind-MyProperty="Text" /> <Child @bind-MyProperty="Text" @bind-MyProperty:event="TextChanged" />

Once the properties are defined, the component will have to invoke the event callback when the property value is changing.

await TextChanged.InvokeAsync(valueOfUserTextInputFromModalDialog);

Inject the appropriate services

To use the Java Script interop and the ExampleJsInterop example class we have to use an injected instance of IJSRuntime. We can do it with a dedicated attribute Inject in the component C# file.

Implement the behavior

Now, I have all we need to implement the behavior by adding a button with a click handler that is going to call the JS function through the ExampleJsInterop.Prompt method. Once we got the result we just need to forward to the TextChanged event call back and to update our Text property value.

So, in the razor file I created a bit of HTML, just to have a bit more fun.

<div class="my-component"> <div class="my-buttonkeeper"> <button class="my-button" @onclick="GetTextAsync">Click me</button> </div> </div> <br /> <text>Text (in the component) : @Text</text> <br />

Then, in the Component1.razor.css I added some CSS code

.my-component { border: 2px dashed red; padding: 1em; margin: 1em 0; background-image: url('background.png'); } .my-buttonkeeper { text-align: center; } .my-button { width: 150px; height: 150px; background-color: green; color: white; font-size: 20px; }

Why? Because I want to be sure the main application adds the CSS from this component but also the javascript we need. I’ll explain that in a second.

Then, it is the moment of the CS file:

private async Task GetTextAsync() { // Call JS interop. var text = await new ExampleJsInterop(JsRuntime).Prompt("Enter some text:"); // Trigger the changed event. await TextChanged.InvokeAsync(text); // Set the property value. Text = text; }

Inside wwwroot directory we have ready to use exampleJsInterop.js file which was created by Visual Studio or CLI. The code is like that

// This is a JavaScript module that is loaded on demand. It can export any number of // functions, and may import other JavaScript modules if required. export function showPrompt(message) { return prompt(message, 'Type anything here'); }

This is a simple javascript function. This rings a bell to me, it is like in React. Now, the magic is happening in the ExampleJsInterop.cs

using Microsoft.JSInterop; using System; using System.Threading.Tasks; namespace PSCBlazor.SimpleComponent { // This class provides an example of how JavaScript functionality can be wrapped // in a .NET class for easy consumption. The associated JavaScript module is // loaded on demand when first needed. // // This class can be registered as scoped DI service and then injected into Blazor // components for use. public class ExampleJsInterop : IAsyncDisposable { private readonly Lazy<Task<IJSObjectReference>> moduleTask; public ExampleJsInterop(IJSRuntime jsRuntime) { moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>( "import", "./_content/PSCBlazor.SimpleComponent/exampleJsInterop.js").AsTask()); } public async ValueTask<string> Prompt(string message) { var module = await moduleTask.Value; return await module.InvokeAsync<string>("showPrompt", message); } public async ValueTask DisposeAsync() { if (moduleTask.IsValueCreated) { var module = await moduleTask.Value; await module.DisposeAsync(); } } } }

So, between the lines 24 and 28 there is a call via IJSObjectReference to the javascript function in the file under the wwwroot. You can see that in line 21 where there is an import of the javascript file.

Run the demo project

So, almost finish to write a reusable Blazor component with interop with javascript. First, I have to add the component as dependency in the project. In Solution Explorer, right click on Dependecies in the PSCBlazor and click on Add project references… Then, select the component.

Reference manager

Now, open _Imports.razor and add the reference to this component to add this line

@using PSCBlazor.SimpleComponent

Then, open Index.razor and add this code

<Component1 ParentName="This is a test" @bind-Text="_text"></Component1> The text from the component is: @_text @code { private string _text = ""; }

Also, we want to add the CSS and the javascript for the magic. Depending on the hosting model, it is required to add the reference to the CSS and javascript in specific index files in the application project:

wwwroot/index.html for the Web Assembly hosting model.

and

Pages/_Host.cshtml for the Server-side hosting model.

So, open the index.html under wwwroot and add those lines (I deleted a lot of lines for the purpose of showing what you have to add):

<head> <link href="_content/PSCBlazor.SimpleComponent/styles.css" rel="stylesheet" /> </head> <body> <script src="_framework/blazor.webassembly.js"></script> <script src="_content/PSCBlazor.SimpleComponent/exampleJsInterop.js" /> </body>

Basically, in the head I have to add the reference to the CSS from the component. Similarly, I have to do the same to add the javascript.

Compile and run. If everything is ok, you have the same result as I show at the top of this post.

The post Write a reusable Blazor component appeared first on PureSourceCode.