jerpenol/AlertModel.cs

## _Imports.razor
@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.JSInterop

//NOTE: The following project-specific usings, can be used to recognize other components within .razor files
@using Umbraco9.Blazor.Web
@using Umbraco9.Blazor.Web.Shared

## AlertModel.cs
public class AlertModel
{
    public string Title { get; set; }
    public string Text { get; set; }
    public string Type { get; set; }
}

## Alerts.razor.cs
public partial class Alerts
{
    private List<AlertModel> ActiveAlerts { get; set; }

    protected override void OnInitialized() { ... }

    private void CloseAlert(AlertModel alert) { ... }

    private void FetchAlert() { ... }
}

## Alerts_CodeInView.razor
@foreach (var alert in ActiveAlerts)
{
    <div class="alert alert-@alert.Type alert-dismissible fade show" role="alert">
        @if (!string.IsNullOrWhiteSpace(alert.Title))
        {
            <h4 class="alert-heading">@alert.Title</h4>
        }

        @alert.Text

        <button @onclick="@(() => CloseAlert(alert))" type="button" class="btn-close" aria-label="Close"></button>
    </div>
}

<button @onclick="@FetchAlert" type="button" class="btn btn-primary mt-3" aria-label="Add new Alert">Add new Alert</button>

@code {
    public List<AlertModel> ActiveAlerts { get; set; }

    protected override void OnInitialized()
    {
        ActiveAlerts = new List<AlertModel>
        {
            new AlertModel
            {
                Title = "Umbraco ❤ Blazor",
                Text = "Initial alert",
                Type = "info"
            }
        };
    }

    private void CloseAlert(AlertModel alert)
    {
        ActiveAlerts.Remove(alert);
    }

    private void FetchAlert()
    {
        ActiveAlerts.Add(new AlertModel
        {
            Title = "Umbraco ❤ Blazor",
            Text = "A new alert!",
            Type = "success"
        });
    }
}

## Attributes.cs
[Inject] public AlertStateProvider AlertState { get; set; }

[Parameter] public int? MaximumNumberOfAlerts { get; set; }

## Home.cshtml
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Home>
@{
    Layout = "Main.cshtml";
}

@(await Html.RenderComponentAsync<Alerts>(RenderMode.ServerPrerendered))

## Main.cshtml
<head>
    <!-- Note: this is optional, and is only used to add some styling to our Alerts later on -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
        crossorigin="anonymous">
</head>
<body>
    <!-- All other HTML here -->

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

## Startup_Configure.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseUmbraco()
        .WithMiddleware(u =>
        {
            u.WithBackOffice();
            u.WithWebsite();
        })
        .WithEndpoints(u =>
        {
            u.UseInstallerEndpoints();
            u.UseBackOfficeEndpoints();
            u.UseWebsiteEndpoints();
        });

    //Register an endpoint for Blazor to communicate with the server
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
    });
}

## Startup_ConfigureServices.cs
public void ConfigureServices(IServiceCollection services)
{
    services.AddUmbraco(_env, _config)
        .AddBackOffice()
        .AddWebsite()
        .AddComposers()
        .Build();

    //This adds all necessary Server Side Blazor services to the service collection
    services.AddServerSideBlazor();
}
	@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.JSInterop

	//NOTE: The following project-specific usings, can be used to recognize other components within .razor files
	@using Umbraco9.Blazor.Web
	@using Umbraco9.Blazor.Web.Shared
	public class AlertModel
	{
	public string Title { get; set; }
	public string Text { get; set; }
	public string Type { get; set; }
	}
	public partial class Alerts
	{
	private List<AlertModel> ActiveAlerts { get; set; }

	protected override void OnInitialized() { ... }

	private void CloseAlert(AlertModel alert) { ... }

	private void FetchAlert() { ... }
	}
	@foreach (var alert in ActiveAlerts)
	{
	<div class="alert alert-@alert.Type alert-dismissible fade show" role="alert">
	@if (!string.IsNullOrWhiteSpace(alert.Title))
	{
	<h4 class="alert-heading">@alert.Title</h4>
	}

	@alert.Text

	<button @onclick="@(() => CloseAlert(alert))" type="button" class="btn-close" aria-label="Close"></button>
	</div>
	}

	<button @onclick="@FetchAlert" type="button" class="btn btn-primary mt-3" aria-label="Add new Alert">Add new Alert</button>

	@code {
	public List<AlertModel> ActiveAlerts { get; set; }

	protected override void OnInitialized()
	{
	ActiveAlerts = new List<AlertModel>
	{
	new AlertModel
	{
	Title = "Umbraco ❤ Blazor",
	Text = "Initial alert",
	Type = "info"
	}
	};
	}

	private void CloseAlert(AlertModel alert)
	{
	ActiveAlerts.Remove(alert);
	}

	private void FetchAlert()
	{
	ActiveAlerts.Add(new AlertModel
	{
	Title = "Umbraco ❤ Blazor",
	Text = "A new alert!",
	Type = "success"
	});
	}
	}
	[Inject] public AlertStateProvider AlertState { get; set; }

	[Parameter] public int? MaximumNumberOfAlerts { get; set; }
	@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Home>
	@{
	Layout = "Main.cshtml";
	}

	@(await Html.RenderComponentAsync<Alerts>(RenderMode.ServerPrerendered))
	<head>
	<!-- Note: this is optional, and is only used to add some styling to our Alerts later on -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
	crossorigin="anonymous">
	</head>
	<body>
	<!-- All other HTML here -->

	<script src="~/_framework/blazor.server.js"></script>
	</body>
	public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
	{
	app.UseUmbraco()
	.WithMiddleware(u =>
	{
	u.WithBackOffice();
	u.WithWebsite();
	})
	.WithEndpoints(u =>
	{
	u.UseInstallerEndpoints();
	u.UseBackOfficeEndpoints();
	u.UseWebsiteEndpoints();
	});

	//Register an endpoint for Blazor to communicate with the server
	app.UseEndpoints(endpoints =>
	{
	endpoints.MapBlazorHub();
	});
	}
	public void ConfigureServices(IServiceCollection services)
	{
	services.AddUmbraco(_env, _config)
	.AddBackOffice()
	.AddWebsite()
	.AddComposers()
	.Build();

	//This adds all necessary Server Side Blazor services to the service collection
	services.AddServerSideBlazor();
	}