Blazor 0.4.0 is now available! This release includes important bug fixes and several new feature enhancements.
New features in Blazor 0.4.0 (details below):
- Add event payloads for common event types
- Use camelCase for JSON handling
- Automatic import of core Blazor namespaces in Razor
- Send and receive binary HTTP content using HttpClient
- Templates run on IIS Express by default with autobuild enabled
- Bind to numeric types
- JavaScript interop improvements
A full list of the changes in this release can be found in the Blazor 0.4.0 release notes.
Get Blazor 0.4.0
To get setup with Blazor 0.4.0:
- Install the .NET Core 2.1 SDK (2.1.300 or later).
- Install Visual Studio 2017 (15.7) with the ASP.NET and web development workload selected.
- Note: The Blazor tooling isn't currently compatible with the VS2017 preview channel (15.8). This will be addressed in a future Blazor release.
- Install the latest Blazor Language Services extension from the Visual Studio Marketplace.
To install the Blazor templates on the command-line:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates You can find getting started instructions, docs, and tutorials for Blazor at https://blazor.net.
Upgrade an existing project to Blazor 0.4.0
To upgrade an existing Blazor project from 0.3.0 to 0.4.0:
- Install all of the required bits listed above.
- Update your Blazor package and .NET CLI tool references to 0.4.0.
Your upgraded Blazor project file should look like this:
<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.4.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.4.0" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.4.0" /> </ItemGroup> </Project> Event payloads for common event types
This release adds payloads for the following event types:
| Event arguments | Events |
|---|---|
| UIMouseEventArgs | onmouseover, onmouseout, onmousemove, onmousedown, onmouseup, oncontextmenu |
| UIDragEventArgs | ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop |
| UIPointerEventArgs | gotpointercapture, lostpointercapture, pointercancel, pointerdown, pointerenter, pointerleave, pointermove, pointerout, pointerover, pointerup |
| UITouchEventArgs | ontouchcancel, ontouchend, ontouchmove, ontouchstart, ontouchenter, ontouchleave |
| UIWheelEventArgs | onwheel, onmousewheel |
| UIKeyboardEventArgs | onkeydown, onkeyup |
| UIKeyboardEventArgs | onkeydown, onkeyup, onkeypress |
| UIProgressEventArgs | onloadstart, ontimeout, onabort, onload, onloadend, onprogress, onerror |
Thank you to Gutemberg Ribeiro (galvesribeiro) for this contribution! If you haven't checked out Gutemberg's handy collection of Blazor extensions they are definitely worth a look.
Use camelCase for JSON handling
The Blazor JSON helpers and utilities now use camelCase by default. .NET objects serialized to JSON are serialized using camelCase for the member names. On deserialization a case-insensitive match is used. The casing of dictionary keys is preserved.
Automatic import of core for Blazor namespaces in Razor
Blazor now automatically imports the Microsoft.AspNetCore.Blazor and Microsoft.AspNetCore.Blazor.Components namespaces in Razor files, so you don't need to add @using statements for them. One less thing for you to do!
Send and receive binary HTTP content using HttpClient
You can now use HttpClient to send and receive binary data from a Blazor app (previously you could only handle text content). Thank you Robin Sue (Suchiman) for this contribution!
Bind to numeric types
Binding now works with numeric types: long, float, double, decimal. Thanks again to Robin Sue (Suchiman) for this contribution!
Templates run on IIS Express by default with autobuild enabled
The Blazor project templates are now setup to run on IIS Express by default, while still preserving autobuild support.
JavaScript interop improvements
Call async JavaScript functions from .NET
With Blazor 0.4.0 you can now call and await registered JavaScript async functions like you would an async .NET method using the new RegisteredFunction.InvokeAsync method. For example, you can register an async JavaScript function so it can be invoked from your Blazor app like this:
Blazor.registerFunction('BlazorLib1.DelayedText', function (text) { // Wait 1 sec and then return the specified text return new Promise((resolve, reject) => { setTimeout(() => { resolve(text); }, 1000); }); }); You then invoke this async JavaScript function using InvokeAsync like this:
public static class ExampleJSInterop { public static Task<string> DelayedText(string text) { return RegisteredFunction.InvokeAsync<string>("BlazorLib1.DelayedText", text); } } Now you can await the async JavaScript function like you would any normal C# async method:
var text = await ExampleJSInterop.DelayedText("See ya in 1 sec!"); Call .NET methods from JavaScript
Blazor 0.4.0 makes it easy to call sync and async .NET methods from JavaScript. For example, you might call back into .NET when a JavaScript callback is triggered. While calling into .NET from JavaScript was possible with earlier Blazor releases the pattern was low-level and difficult to use. Blazor 0.4.0 provides simpler pattern with the new Blazor.invokeDotNetMethod and Blazor.invokeDotNetMethodAsyncfunctions.
To invoke a .NET method from JavaScript the target .NET method must meet the following criteria:
- Static
- Non-generic
- No overloads
- Concrete JSON serializable parameter types
For example, let's say you wanted to invoke the following .NET method when a timeout is triggered:
namespace Alerts { public class Timeout { public static void TimeoutCallback() { Console.WriteLine('Timeout triggered!'); } } } You can call this .NET method from JavaScript using Blazor.invokeDotNetMethod like this:
Blazor.invokeDotNetMethod({ type: { assembly: 'MyTimeoutAssembly', name: 'Alerts.Timeout' }, method: { name: 'TimeoutCallback' } }) When invoking an async .NET method from JavaScript if the .NET method returns a task, then the JavaScript invokeDotNetMethodAsyncfunction will return a Promise that completes with the task result (so JavaScript/TypeScript can also use await on it).
Summary
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 file issues on GitHub. You can also chat with us and the Blazor community on Gitter 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:
More