Login

Blazor 0.3.0 experimental release now available

<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/blazor-0-3-0-experimental-release-now-available.png" width="1277" height="497" title="" alt="" /></div><div>Blazor 0.3.0 is now available! This release includes important bug fixes and many new feature enhancements.
New features in this release (details below):
<ul>
<li>Project templates updated to use <a href="https://getbootstrap.com/">Bootstrap 4</a></li>
<li>Async event handlers</li>
<li>New component lifecycle events: <code>OnAfterRender</code> / <code>OnAfterRenderAsync</code></li>
<li>Component and element refs</li>
<li>Better encapsulation of component parameters</li>
<li>Simplified layouts</li>
</ul>
A full list of the changes in this release can be found in the <a href="https://github.com/aspnet/Blazor/releases/tag/0.3.0">Blazor 0.3.0 release notes</a>.
<h3 id="get-blazor-0-3-0">Get Blazor 0.3.0</h3>
To get setup with Blazor 0.3.0:
<ol>
<li>Install the <a href="https://go.microsoft.com/fwlink/?linkid=873092">.NET Core 2.1 SDK</a> (2.1.300-preview2-008533 or later).</li>
<li>Install <a href="https://go.microsoft.com/fwlink/?linkid=873093">Visual Studio 2017</a> (15.7 Preview 5 or later) with the ASP.NET and web development workload selected.</li>
<li>Install the latest <a href="https://go.microsoft.com/fwlink/?linkid=870389">Blazor Language Services extension</a> from the Visual Studio Marketplace.</li>
</ol>
To install the Blazor templates on the command-line:
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates
</code></pre>
You can find getting started instructions, docs, and tutorials for Blazor at <a href="https://blazor.net">https://blazor.net</a>.
<h3 id="upgrade-an-existing-project-to-blazor-0-3-0">Upgrade an existing project to Blazor 0.3.0</h3>
To upgrade an existing Blazor project from 0.2.0 to 0.3.0:
<ul>
<li>Install all of the required bits listed above.</li>
<li>Update your Blazor package and .NET CLI tool references to 0.3.0.</li>
<li>Remove any package reference to <code>Microsoft.AspNetCore.Razor.Design</code> as it is now a transitive dependency.</li>
<li>Update the C# language version to be 7.3. You may need to restart Visual Studio for this change to take effect.</li>
<li>Update component parameters to not be public and to add the <code>[Parameter]</code> attribute.</li>
<li>Update layouts to inherit from <code>BlazorLayoutComponent</code> and remove the implementation of <code>ILayoutComponent</code> including the <code>Body</code> property.</li>
</ul>
Your upgraded Blazor project file should look like this:
<pre><code class="lang-xml"><Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup> <TargetFramework>netstandard2.0</TargetFramework> <RunCommand>dotnet</RunCommand> <RunArguments>blazor serve</RunArguments> <LangVersion>7.3</LangVersion> </PropertyGroup>
<ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.3.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.3.0" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.3.0" /> </ItemGroup>

</Project>
</code></pre>
<h3 id="project-templates-updated-to-use-bootstrap-4">Project templates updated to use Bootstrap 4</h3>
The Blazor project templates have been updated to use <a href="https://getbootstrap.com/">Bootstrap 4</a>. Bootstrap 4 includes lots of new features including an improved grid system based on flexbox, an improved reset file, new components, better tooltip support, better forms styling, built-in spacing utilities, and much more. 
The new Bootstrap 4 styles also give the Blazor templates a fresh look:
<img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/blazor-0-3-0-experimental-release-now-available.png" alt="Blazor Boostrap 4 template" />
<h3 id="async-event-handlers">Async event handlers</h3>
Event handlers can now be asynchronous and return a <code>Task</code> that gets managed by the runtime. Once the task is completed the component is rendered without the need to manually invoke <code>StateHasChanged</code>. Any exceptions that occur during the asynchronous execution of the event handler will be correctly handled and reported.
For example, we can update the FetchData.cshtml page to have an Update button that when selected asynchronously updates the weather forecast data by making <code>HttpClient</code> calls to the backend web API:
<pre><code class="lang-csharp"><button class="btn btn-primary" onclick="@UpdateForecasts">Update</button>

...

@functions { WeatherForecast[] forecasts;
protected override Task OnInitAsync() { return UpdateForecasts(); }
async Task UpdateForecasts() { forecasts = await Http.GetJsonAsync<WeatherForecast[]>("/api/SampleData/WeatherForecasts"); }
}
</code></pre>
<h3 id="more-strongly-typed-events">More strongly-typed events</h3>
This release adds strongly typed events for the most of the commonly used browser events, including mouse and focus events. You can now handle most events from your components.
You can see a full list of the events now supported in <a href="https://github.com/aspnet/Blazor/blob/dev/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/EventForDotNet.ts">here</a>.
<pre><code class="lang-html"><h1 class="display-1" onmouseover="@OnMouseOver" onmouseout="@OnMouseOut">@inOrOut</h1>

@functions { string inOrOut = "OUT";
void OnMouseOver() { inOrOut = "IN!"; }
void OnMouseOut() { inOrOut = "OUT"; }
}
</code></pre>
<img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/blazor-0-3-0-experimental-release-now-available-1.png" alt="Mouse events tooling screen shot" />
Most of the event arguments don’t yet capture and surface the data from the events. That’s something that we expect to handle in a future release. We welcome community contributions to help out with this effort.
<h3 id="capturing-references-to-dom-elements">Capturing references to DOM elements</h3>
Blazor components typically interact with the DOM through their rendering logic in markup. There are cases, however, when a parent component needs to modify or interact with DOM elements directly. Example scenarios including setting element focus or integrating with existing UI libraries that require references to elements for initialization. This release adds support for capturing DOM elements from components and using them when interacting with JavaScript.
To capture an element reference from a component attribute the element markup with a <code>ref</code> attribute that points to a component field of type <code>ElementRef</code>.
<pre><code class="lang-html"><input ref="username" />

@functions { ElementRef username;
}
</code></pre>
<code>ElementRef</code> is an opaque handle. The only thing you can do with it is pass it through to JavaScript code, which receives the element as an <code>HTMLElement</code> that can be used with normal DOM APIs.
Note that the <code>ElementRef</code> field (<code>username</code> in the previous example) will uninitialized until after the component has been rendered. If you pass an uninitialized <code>ElementRef</code> to JavaScript code, the JavaScript code will receive <code>null</code>.
Let’s create a API that lets us set the focus on an element. We could define this API in our app, but to make it reusable let’s put it in a library.
<ol>
<li>
Create a new Blazor class library
<pre><code> dotnet new blazorlib -o BlazorFocus
</code></pre>
</li>
<li>
Update <code>content/exampleJsInterop.js</code> to register a JavaScript method that sets the focus on a specified element.
<pre><code class="lang-javascript"> Blazor.registerFunction('BlazorFocus.FocusElement', function (element) { element.focus(); });
</code></pre>
</li>
<li>
Add a <code>ElementRefExtensions</code> class to the library that defines a <code>Focus</code> extension method for <code>ElementRef</code>.
<pre><code class="lang-csharp"> using System; using Microsoft.AspNetCore.Blazor; using Microsoft.AspNetCore.Blazor.Browser.Interop;
namespace BlazorFocus { public static class ElementRefExtensions { public static void Focus(this ElementRef elementRef) { RegisteredFunction.Invoke<object>("BlazorFocus.FocusElement", elementRef); } } }
</code></pre>
</li>
<li>
Create a new Blazor app and reference the BlazorFocus library
<pre><code> dotnet new blazor -o BlazorApp1
 dotnet add BlazorApp1 reference BlazorFocus
</code></pre>
</li>
<li>
Update <code>Pages/Index.cshtml</code> to add a button and a text input. Capture a reference to the text input by adding a <code>ref</code> attribute that points to a field of type <code>ElementRef</code> with the same name. Add an <code>onclick</code> handler to the first button that sets the focus on the second button using the captured reference and the <code>Focus</code> extension method we defined previously.
<pre><code> @using BlazorFocus
...
<button onclick="@SetFocus">Set focus</button> <input ref="input1" />
@functions { ElementRef input1;
void SetFocus() { input1.Focus(); } }
</code></pre>
</li>
<li>
Run the app and try out behavior
<pre><code> dotnet run BlazorApp1
</code></pre>
 <img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/blazor-0-3-0-experimental-release-now-available-2.png" alt="Set focus" />
</li>
</ol>
<h3 id="capturing-reference-to-components">Capturing reference to components</h3>
You can also capture references to other components. This is useful when you want a parent component to be able to issue commands to child components such as <code>Show</code> or <code>Reset</code>.
To capture a component reference attribute the component with a <code>ref</code> attributes that points to a field of the matching component type.
<pre><code class="lang-csharp"><MyLoginDialog ref="loginDialog"/>

@functions { MyLoginDialog loginDialog;
void OnSomething() { loginDialog.Show(); }
}
</code></pre>
Note that component references should not be used as a way of mutating the state of child components. Instead, always use normal declarative parameters to pass data to child components. This will allow child components to re-render at the correct times automatically.
<h3 id="onafterrender-onafterrenderasync">OnAfterRender / OnAfterRenderAsync</h3>
To capture element and component references the component must already be rendered. Components now have a new life-cycle event that fires after the component has finished rendering: <code>OnAfterRender</code> / <code>OnAfterRenderAsync</code>. When this event fires element and component references have already been populated. This makes it possible to perform additional initialization steps using the rendered content, such as activating third-party JavaScript libraries that operate on the rendered DOM elements.
For example, we can use <code>OnAfterRender</code> to set the focus on a specific element when a component first renders.
The example below shows how you can receive the OnAfterRender event in your component.
<pre><code><input ref="input1" placeholder="Focus on me first!" />
<button>Click me</button>

@functions { ElementRef input1; bool isFirstRender = true;
protected override void OnAfterRender() { if (isFirstRender) { isFirstRender = false; input1.Focus(); } }
}
</code></pre>
Note that <code>OnAfterRender</code> / <code>OnAfterRenderAsync</code> is called after each render, not just the initial one, so the component has to keep try of whether this is the first render or not.
<h3 id="better-encapsulation-of-component-parameters">Better encapsulation of component parameters</h3>
In this release we’ve made some changes to the programming model for component parameters. These changes are intended to improve the encapsulation of the parameter values and discourage improper mutation of component state (e.g. using component references).
Component parameters are now defined by properties on the component type that have been attributed with <code>[Parameter]</code>. Parameters that are set by the Blazor runtime (e.g. <code>ChildContent</code> properties, route parameters) must be similarly attributed. Properties that define parameters should not be public.
A <code>Counter</code> component with an <code>IncrementAmount</code> parameter now looks like this:
<pre><code class="lang-html">@page "/counter"

<h1>Counter</h1>

Current count: @currentCount

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions { int currentCount = 0;
[Parameter] private int IncrementAmount { get; set; } = 1;
void IncrementCount() { currentCount += IncrementAmount; }
}
</code></pre>
<h3 id="simplified-layouts">Simplified layouts</h3>
Layouts now inherit from <code>BlazorLayoutComponent</code> instead of implementing <code>ILayoutComponent</code>. The <code>BlazorLayoutComponent</code> defines a <code>Body</code> parameter that can be used for specifying where content should be rendered. Layouts no longer need to define their own <code>Body</code> property.
An example layout with these changes is shown below:
<pre><code class="lang-html">@inherits BlazorLayoutComponent

<div class="sidebar"> <NavMenu />
</div>

<div class="main"> <div class="top-row px-4"> <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> </div>
<div class="content px-4"> @Body </div>
</div>
</code></pre>
<h3 id="summary">Summary</h3>
We hope you enjoy this latest preview of Blazor. Your feedback is especially important to us during this experimental phase for Blazor. If you run into issues or have questions while trying out Blazor please <a href="https://github.com/aspnet/blazor/issues">file issues on GitHub</a>. You can also chat with us and the Blazor community on <a href="https://gitter.im/aspnet/blazor">Gitter</a> if you get stuck or to share how Blazor is working for you. After you’ve tried out Blazor for a while please also let us know what you think by taking our in-product survey. Just click the survey link shown on the app home page when running one of the Blazor project templates:
<img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/06/blazor-0-3-0-experimental-release-now-available-3.png" alt="Blazor survey" />
Thanks for trying out Blazor!
 
</div>

xSicKxBot