Skip to content

Instantly share code, notes, and snippets.

@jerpenol
Last active Jul 2, 2021
Embed
What would you like to do?
Umbraco and Blazor
@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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment