Page 61 - MSDN Magazine, September 2018

entirely up to you. Here’s a digital clock implemented as a Boot-
strap input group:
<div class="clock">
<div class="input-group">
<span class="@currentCss">@currentTime</span> <div class="input-group-append">
<button class="btn btn-primary" type="button"
onclick="@startStop">@buttonAction</button> </div>
</div> </div>
Razor expressions like currentCss, currentTime and button-
Action refer to component fields defined within the @functions
section of the file. You can see these here:
@functions {
string currentTime = "N/A";
string buttonAction = "N/A"; string currentCss = "clock-notset"; Timer timer;
...
}
The startStop expression refers to a method being invoked when the Stop or Start button is clicked to start/stop the timer. Figure 3 presents the full code of the DigitalClock component.
Figure 4 shows the program interface.
The demo presents a digital clock backed up by a .NET timer. Data binding is automatic for events triggered via an explicit user action (such as when a button is clicked), but not when the event originates programmatically, such as via a timer. In the latter case, you must call the method StateHasChanged to force the browser renderer to refresh the view. Here’s the code of the timer tick
handler within the digital clock Blazor component:
private Task TimerTick() {
currentTime = DateTime.Now.ToLongTimeString(); currentCss = "clock-working"; this.StateHasChanged();
return Task.CompletedTask;
}
The full source code can be found at bit.ly/2LVeCxA.
Wrapping Up
Blazor is an upcoming experimental framework for building .NET-based single-page applications running in the browser via WebAssembly. WebAssembly is a sandboxed way to deploy native binaries to a compliant browser—essentially all browsers shipped since mid-2017. Blazor uses Razor and C# to design views and includes a router and a composable user interface like most of the other popular JavaScript frameworks.
This article presents the foundation of a client-side application. In upcoming columns, I’ll explore integration with the specific ASP.NET Core backend and Blazor extensibility points. You can read more about Blazor in Jonathan Miller’s article that guides you through the quite necessary tasks for a client-side application of downloading JSON data from HTTP endpoints. n
Dino Esposito has authored more than 20 books and 1,000 articles in his 25-year career. Author of “The Sabbatical Break,” a theatrical-style show, Esposito is busy writing software for a greener world as the digital strategist at BaxEnergy. Follow him on Twitter: @despos.
thanks to the following technical experts for reviewing this article: Daniel Roth (Microsoft), Jonathan Miller
msdnmagazine.com
Automate your work using professional multi-platform Barcode SDK
VintaSoft Barcode .NET SDK
Professional SDK for building document management apps
Free evaluation version
Royalty free licensing
www.vintasoft.com VintaSoft is a registered trademark
of VintaSoft Ltd.