Blog posts by Jørgen Tonvang2022-09-12T10:36:46.0000000Zhttps://world.optimizely.com/blogs/jorgen-tonvang/Optimizely WorldHow to implement On Page Editing in Blazor<p>We already have some sites up and running on .NET 6/CMS 12 and with Blazor steadily improving with each release, we're now at a point where we're looking for an opportunity to use it in a customer project. We've evaluated potential issues that need to be adressed for this to happen, and one of the bigger ones that we identified is the lack of On Page Editing compatibility when a property is rendered within a Blazor Component. </p>
<p>When rendering a property in a component in a front-end framework, you're responsible for the rendering of the property - and you also need to make sure the property is updated when an editor changes the value in On Page Editing-mode. In Javascript frameworks, like Vue and ReactJs, this is rather straightforward: you add an attribute to the containing html-element of your property, like this:</p>
<pre class="language-markup"><code><h1 data-epi-edit="Heading">
<!-- Render logic -->
</h1>
</code></pre>
<p>You then add Javascript code to subscribe to the event "contentSaved" and then update your component as needed. </p>
<p>Since Blazor can't really subscribe to a javascript-event directly, we need to add a little trickery to get it working - this example is for an implementation of AlloyTech on Blazor Server, but you could use the same principle for Blazor WebAssembly (you'd need to call Content Delivery API instead of using ContentLoader directly). To follow the steps outlined here, you should already have an Optimizely-site with Blazor up and running. </p>
<p>First, we need to create a file with a JS-event-listener that we're going to invoke through the JS-interoperability feature of Blazor. I created a file called opeListener.js with this little function:</p>
<pre class="language-javascript"><code>function opeListener(dotnethelper) {
epi.subscribe("contentSaved", function (details) {
dotnethelper.invokeMethodAsync('RefreshOnSave', details);
});
}</code></pre>
<p>The parameter "dotnethelper" here actually contains a reference to the .NET object that invoked the JS-function, which in turn allows the event listener to invoke a function on that object ("RefreshOnSave" in this case). </p>
<p>I then refered the script in _Root.cshtml, just below the inclusion of the Blazor Server-JS:</p>
<pre class="language-markup"><code><script src="_framework/blazor.server.js"></script>
<script src="~/js/opeListener.js"></script></code></pre>
<p>We need a way for our .NET-code to hook on to this event listener, so what I did was to create a class for this purpose:</p>
<pre class="language-csharp"><code>public class OnPageEditingService
{
private IJSRuntime js = null;
public event EventHandler Refresh;
public async void Init(IJSRuntime jsRuntime)
{
if (js == null)
{
js = jsRuntime;
await js.InvokeAsync<string>("opeListener", DotNetObjectReference.Create(this));
}
}
[JSInvokable]
public void RefreshOnSave()
{
Refresh?.Invoke(this, new EventArgs());
}
}</code></pre>
<p>In the Init method we use JS-interoperability to call the listener we created in the previous step. We also have a method (invokable from JS through the [JSInvokable]-attribute) that triggers an event that will tell our Blazor component to refresh. </p>
<p>The Blazor component itself looks like this:</p>
<pre class="language-csharp"><code>@inject IContentLoader contentLoader;
@inject IContentVersionRepository contentVersionRepository;
@inject IJSRuntime js;
@inject OnPageEditingService opeService;
@if(currentPage?.Heading != null)
{
<h1 data-epi-edit="Heading">@currentPage.Heading</h1>
}
@if(currentPage?.MainBody != null){
<div data-epi-edit="MainBody">
@((MarkupString)currentPage.MainBody.ToString())
</div>
}
@code {
[Parameter]
public int ContentLinkId { get; set; }
[Parameter]
public bool EditMode { get; set; }
private BlazorTestPage currentPage { get; set; }
private string contextMode = string.Empty;
protected override void OnInitialized()
{
@if (EditMode)
{
currentPage = GetLatestDraft();
}
else
{
currentPage = contentLoader.Get<BlazorTestPage>(new ContentReference(ContentLinkId));
}
opeService.Refresh += RefreshComponent;
base.OnInitialized();
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
opeService.Init(js);
return base.OnAfterRenderAsync(firstRender);
}
protected async void RefreshComponent(object sender, EventArgs e)
{
currentPage = GetLatestDraft();
await InvokeAsync(() => StateHasChanged());
}
private BlazorTestPage GetLatestDraft()
{
var currentVersion = contentVersionRepository.List(new ContentReference(ContentLinkId))
.OrderByDescending(x => x.Saved)
.FirstOrDefault();
return contentLoader.Get<BlazorTestPage>(currentVersion.ContentLink);
}
}</code></pre>
<p>It's a fairly simple component that renders two properties - Heading and MainBody. It takes two parameters - the ID of the content (trying to pass the PageData-object directly from the MVC view will result in JSON-serialization issues that I've had no luck trying to resolve) and a bool that tells us whether we are in EditMode or not, so we only render the draft if we are. The reason we are not using the ContextModeResolver directly in the component for this is that it relies on HttpContext which is unreliable to use in a Blazor Component. </p>
<p>There's not much logic here, but a couple of things to note: We wait until the OnAfterRender-lifecycle event to initiaize our OnPageEditingService - we won't be able to invoke our JS-listener before then. </p>
<p>Also, in OnInitialized, we hook up the RefreshComponent-method that will fire when the Refresh-event is triggered. For simplicity, we're doing a full reload of currentPage here, but if you really wanted, you could do a selective update, since the details of what properties were changed is available from our JS-event-listener. To retrieve that data in our OnPageEditingService, we could modify the RefreshOnSave as follows:</p>
<pre class="language-csharp"><code>[JSInvokable]
public void RefreshOnSave(JsonElement details)
{
// Logic (make some custom event args and pass to Refresh.Invoke)
}</code></pre>
<p>I hope this can help to kick start any budding Blazor projects out there :) Let me know in the comments if you have any questions!</p>2022-09-12T10:36:46.0000000ZBlog postMusicFestival Blazor WebAssembly site!<p>While we're waiting for the official .NET Core support for Episerver to come out (my beta invite must have been lost in the e-mail), I've ported the excellent <a href="https://github.com/episerver/musicfestival-vue-template">MusicFestival SPA</a> to run on Blazor WebAssembly - so you can have SPA templates running purely on .NET Core and Blazor with Episerver CMS today.</p>
<h2>What is Blazor and why should you care?</h2>
<p><a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor">Blazor</a> is a free and open source web framework from Microsoft that allows us to create rich and interactive front-ends using C# and .NET Core. The application is compiled to <a href="https://webassembly.org/">WebAssembly</a> and served by the browser. </p>
<p>This enables us to create a dynamic front-end totally independent of Javascript, which means you can say good bye to the ever changing chaos of Babel, Webpack, Linters and the several billion files in your node_modules folder. </p>
<p>I can't speak for all developers, obviously, but after working with AngularJS, ReactJS and Vue the past 6-7 years - the simplicity of Blazor is very refreshing. While it is still in preview and parts of it are a little rough around the edges, it gets new releases frequently and Microsoft definitely puts a lot of effort into it. </p>
<h2>How does it work with Episerver?</h2>
<p>Since Blazor requires .NET Core, the application needs to have it's own project - but the compiled WebAssembly-application can be hosted anywhere. </p>
<p>For this site, I've set it up so that the Blazor application is published to a subfolder on the Episerver site whenever the project is built. Then there are URL-rewrite rules in place that rewrites all requests to the subdirectory, with exceptions for requests to Content Delivery API and the Episerver-interface. </p>
<p>Blazor's built in router doesn't support loading components dynamically from routes that are unknown at compile time, so I made a custom router for this that replaces the default. </p>
<p>I'll make another blog post or two covering the specifics of working with Episerver and Blazor, but until then, please check it out on Github:</p>
<p><a href="https://github.com/jtonvang/musicfestival-blazor">https://github.com/jtonvang/musicfestival-blazor</a></p>2020-04-02T12:37:59.0000000ZBlog post