Login

Blazor 0.7.0 experimental release now available

<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/blazor-0-7-0-experimental-release-now-available.png" width="596" height="288" title="" alt="" /></div><div>Blazor 0.7.0 is now available! This release focuses on enabling component coordination across ancestor-descendent relationships. We’ve also added some improvements to the debugging experience.
Here’s what’s new in the Blazor 0.7.0 release:
<ul>
<li>Cascading values and parameters</li>
<li>Debugging improvements</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.7.0">Blazor 0.7.0 release notes</a>.
<h2 id="get-blazor-0-7-0">Get Blazor 0.7.0</h2>
Install the following:
<ol>
<li><a href="https://go.microsoft.com/fwlink/?linkid=873092">.NET Core 2.1 SDK</a> (2.1.500 or later).</li>
<li><a href="https://go.microsoft.com/fwlink/?linkid=873093">Visual Studio 2017</a> (15.9 or later) with the ASP.NET and web development workload selected.</li>
<li>The latest <a href="https://go.microsoft.com/fwlink/?linkid=870389">Blazor Language Services extension</a> from the Visual Studio Marketplace.</li>
<li>
The Blazor templates on the command-line:
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates
</code></pre>
</li>
</ol>
You can find getting started instructions, docs, and tutorials for Blazor at <a href="https://blazor.net">https://blazor.net</a>.
<h2 id="upgrade-an-existing-project-to-blazor-0-7-0">Upgrade an existing project to Blazor 0.7.0</h2>
To upgrade a Blazor 0.6.0 project to 0.7.0:
<ul>
<li>Install the prerequisites listed above.</li>
<li>
Update the Blazor packages and .NET CLI tool references to 0.7.0. The 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.7.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.7.0" />
</ItemGroup>

</Project>
</code></pre>
</li>
</ul>
That’s it! You’re now ready to try out the latest Blazor features.
<h2 id="cascading-values-and-parameters">Cascading values and parameters</h2>
Blazor components can accept parameters that can be used to flow data into a component and impact the component’s rendering. Parameter values are provided from parent component to child component. Sometimes, however, it’s inconvenient to flow data from an ancestor component to a descendent component, especially when there are many layers in between. Cascading values and parameters solve this problem by providing a convenient way for an ancestor component to provide a value that is then available to all descendent components. They also provide a great way for components to coordinate.
For example, if you wanted to provide some theme information for a specific part of your app you could flow the relevant styles and classes from component to component, but this would be tedious and cumbersome. Instead, a common ancestor component can provide the theme information as a cascading value that descendents can accept as a cascading parameter and then consume as needed.
Let’s say the following <code>ThemeInfo</code> class specifies all of the theme information that you want to flow down the component hierarchy so that all of the buttons within that part of your app share the same look and feel:
<pre><code class="lang-csharp">public class ThemeInfo
{ public string ButtonClass { get; set; }
}
</code></pre>
An ancestor component can provide a cascading value using the <code>CascadingValue</code> component. The <code>CascadingValue</code> component wraps a subtree of the component hierarchy and specifies a single value that will be available to all components within that subtree. For example, we could specify the theme info in our application layout as a cascading parameter for all components that make up the layout body like this:
<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>
<CascadingValue Value="@theme"> <div class="content px-4"> @Body </div> </CascadingValue>
</div>

@functions { ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" };
}
</code></pre>
To make use of cascading values, components can declare cascading parameters using the <code>[CascadingParameter]</code> attribute. Cascading values are bound to cascading parameters by type. In the following example the <code>Counter</code> component is modified to have a cascading parameter that binds to the <code>ThemeInfo</code> cascading value, which is then used to set the class for the button.
<pre><code class="lang-html">@page "/counter"

<h1>Counter</h1>

Current count: @currentCount

<button class="btn @ThemeInfo.ButtonClass" onclick="@IncrementCount">Click me</button>

@functions { int currentCount = 0;
[CascadingParameter] protected ThemeInfo ThemeInfo { get; set; }
void IncrementCount() { currentCount++; }
}
</code></pre>
When we run the app we can see that the new style is applied:
<img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/blazor-0-7-0-experimental-release-now-available.png" alt="Counter with cascading parameter" />
Cascading parameters also enable components to collaborate across the component hierarchy. For example, let’s say you have a <code>TabSet</code> component that contains a number of <code>Tab</code> components, like this:
<pre><code class="lang-html"><TabSet> <Tab Title="First tab"> <h4>First tab</h4> This is the first tab. </Tab>
@if (showSecondTab) { <Tab Title="Second"> <h4>Second tab</h4> You can toggle me. </Tab> }
<Tab Title="Third"> <h4>Third tab</h4>
<label> <input type="checkbox" bind=@showSecondTab /> Toggle second tab </label> </Tab>
</TabSet>
</code></pre>
In this example the child <code>Tab</code> components are not explicitly passed as parameters to the <code>TabSet</code>. Instead they are simply part of the child content of the <code>TabSet</code>. But the <code>TabSet</code> still needs to know about each <code>Tab</code> so that it can render the headers and the active tab. To enable this coordination without requiring any specific wire up from the user, the <code>TabSet</code> component can provide itself as a cascading value that can then be picked up by the descendent <code>Tab</code> components:
In TabSet.cshtml
<pre><code class="lang-csharp">
<CascadingValue Value=this> <ul class="nav nav-tabs"> @ChildContent </ul>
</CascadingValue>
</code></pre>
This allows the descendent <code>Tab</code> components to capture the containing <code>TabSet</code> as a cascading parameter, so they can add themselves to the <code>TabSet</code> and coordinate on which <code>Tab</code> is active:
In Tab.cshtml
<pre><code class="lang-csharp">[CascadingParameter] TabSet ContainerTabSet { get; set; }
</code></pre>
Check out the full <code>TabSet</code> sample <a href="https://gist.github.com/SteveSandersonMS/f10a552e1761ff759b1631d81a4428c3">here</a>.
<h2 id="debugging-improvements">Debugging improvements</h2>
In Blazor 0.5.0 we added some very preliminary support for <a href="https://blazor.net/docs/debugging.html">debugging client-side Blazor apps in the browser</a>. While this initial debugging support demonstrated that debugging .NET apps in the browser was possible, it was still a pretty rough experience. Blazor 0.7.0 picks up the latest runtime updates, which includes some fixes that makes the debugging experience more reliable. You can now more reliably set and remove breakpoints, and the reliability of step debugging has been improved.
<img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/11/blazor-0-7-0-experimental-release-now-available-1.png" alt="Improved Blazor debugging" />
<h2 id="give-feedback">Give feedback</h2>
We hope you enjoy this latest preview release of Blazor. As with previous releases, your feedback is important to us. If you run into issues or have questions while trying out Blazor, <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 let us know what you think by taking our in-product survey. 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/11/blazor-0-7-0-experimental-release-now-available-2.png" alt="Blazor survey" />
Thanks for trying out Blazor!
 
</div>

xSicKxBot