Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Blazor 0.6.0 experimental release now available

#1
Blazor 0.6.0 experimental release now available

<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/blazor-0-6-0-experimental-release-now-available.png" width="1282" height="437" title="" alt="" /></div><div><p>Blazor 0.6.0 is now available! This release includes new features for authoring templated components and enables using server-side Blazor with the <a href="https://docs.microsoft.com/azure/azure-signalr/">Azure SignalR Service</a>. We’re also excited to announce our plans to ship the server-side Blazor model as Razor Components in .NET Core 3.0!</p>
<p>Here’s what’s new in the Blazor 0.6.0 release:</p>
<ul>
<li>Templated components
<ul>
<li>Define components with one or more template parameters</li>
<li>Specify template arguments using child elements</li>
<li>Generic typed components with type inference</li>
<li>Razor templates</li>
</ul>
</li>
<li>Refactored server-side Blazor startup code to support the Azure SignalR Service</li>
</ul>
<p>A full list of the changes in this release can be found in the <a href="https://github.com/aspnet/Blazor/releases/tag/0.6.0">Blazor 0.6.0 release notes</a>.</p>
<h2 id="get-blazor-0-6-0">Get Blazor 0.6.0</h2>
<p>Install the following:</p>
<ol>
<li><a href="https://go.microsoft.com/fwlink/?linkid=873092">.NET Core 2.1 SDK</a> (2.1.402 or later).</li>
<li><a href="https://go.microsoft.com/fwlink/?linkid=873093">Visual Studio 2017</a> (15.8 or later) with the <em>ASP.NET and web development</em> 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>
<p>The Blazor templates on the command-line:</p>
<pre><code>dotnet new -<span class="hljs-selector-tag">i</span> Microsoft<span class="hljs-selector-class">.AspNetCore</span><span class="hljs-selector-class">.Blazor</span><span class="hljs-selector-class">.Templates</span>
</code></pre>
</li>
</ol>
<p>You can find getting started instructions, docs, and tutorials for Blazor at <a href="https://blazor.net">https://blazor.net</a>.</p>
<h2 id="upgrade-an-existing-project-to-blazor-0-6-0">Upgrade an existing project to Blazor 0.6.0</h2>
<p>To upgrade a Blazor 0.5.x project to 0.6.0:</p>
<ul>
<li>Install the prerequisites listed above.</li>
<li>
<p>Update the Blazor package and .NET CLI tool references to 0.6.0. The upgraded Blazor project file should look like this:</p>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Project</span> <span class="hljs-attr">Sdk</span>=<span class="hljs-string">"Microsoft.NET.Sdk.Web"</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">PropertyGroup</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">TargetFramework</span>&gt;</span>netstandard2.0<span class="hljs-tag">&lt;/<span class="hljs-name">TargetFramework</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">RunCommand</span>&gt;</span>dotnet<span class="hljs-tag">&lt;/<span class="hljs-name">RunCommand</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">RunArguments</span>&gt;</span>blazor serve<span class="hljs-tag">&lt;/<span class="hljs-name">RunArguments</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">LangVersion</span>&gt;</span>7.3<span class="hljs-tag">&lt;/<span class="hljs-name">LangVersion</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">PropertyGroup</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">ItemGroup</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">PackageReference</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">"Microsoft.AspNetCore.Blazor.Browser"</span> <span class="hljs-attr">Version</span>=<span class="hljs-string">"0.6.0"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">PackageReference</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">"Microsoft.AspNetCore.Blazor.Build"</span> <span class="hljs-attr">Version</span>=<span class="hljs-string">"0.6.0"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">DotNetCliToolReference</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">"Microsoft.AspNetCore.Blazor.Cli"</span> <span class="hljs-attr">Version</span>=<span class="hljs-string">"0.6.0"</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ItemGroup</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">Project</span>&gt;</span>
</code></pre>
</li>
</ul>
<p>That’s it! You’re now ready to try out the latest Blazor features.</p>
<h2 id="templated-components">Templated components</h2>
<p>Blazor 0.6.0 adds support for templated components. Templated components are components that accept one or more UI templates as parameters, which can then be used as part of the component’s rendering logic. Templated components allow you to author higher-level components that are more reusable than what was possible before. For example, a list view component could allow the user to specify a template for rending items in the list, or a grid component could allow the user to specify templates for the grid header and for each row.</p>
<h3 id="template-parameters">Template parameters</h3>
<p>A templated component is defined by specifying one or more component parameters of type <code>RenderFragment</code> or <code>RenderFragment&lt;T&gt;</code>. A render fragment represents a segment of UI that is rendered by the component. A render fragment optionally take a parameter that can be specified when the render fragment is invoked. </p>
<p><em>TemplatedTable.cshtml</em></p>
<pre><code class="lang-csharp">@typeparam TItem

&lt;<span class="hljs-keyword">table</span>&gt; &lt;thead&gt; &lt;tr&gt;@TableHeader&lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; @foreach (var item in Items) { @RowTemplate(item) } &lt;/tbody&gt; &lt;tfoot&gt; &lt;tr&gt;@TableFooter&lt;/tr&gt; &lt;/tfoot&gt;
&lt;/<span class="hljs-keyword">table</span>&gt;

@functions { [Parameter] RenderFragment TableHeader { get; <span class="hljs-keyword">set</span>; } [<span class="hljs-keyword">Parameter</span>] RenderFragment&lt;TItem&gt; RowTemplate <span class="hljs-comment">{ get</span>; <span class="hljs-keyword">set</span>; } [<span class="hljs-keyword">Parameter</span>] RenderFragment <span class="hljs-comment">TableFooter { get</span>; <span class="hljs-keyword">set</span>; } [<span class="hljs-keyword">Parameter</span>] IReadOnlyList&lt;TItem&gt; Items <span class="hljs-comment">{ get</span>; <span class="hljs-keyword">set</span>; }
}
</code></pre>
<p>When using a templated component, the template parameters can be specified using child elements that match the names of the parameters.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">TemplatedTable</span> <span class="hljs-attr">Items</span>=<span class="hljs-string">"@pets"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">TableHeader</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>ID<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Species<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">TableHeader</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">RowTemplate</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@context.PetId<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@context.Name<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@context.Species<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">RowTemplate</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TemplatedTable</span>&gt;</span>
</code></pre>
<h3 id="template-context-parameters">Template context parameters</h3>
<p>Component arguments of type <code>RenderFragment&lt;T&gt;</code> passed as elements have an implicit parameter named <code>context</code>, but you can change the parameter name using the <code>Context</code> attribute on the child element.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">TemplatedTable</span> <span class="hljs-attr">Items</span>=<span class="hljs-string">"@pets"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">TableHeader</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>ID<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>Species<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">TableHeader</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">RowTemplate</span> <span class="hljs-attr">Context</span>=<span class="hljs-string">"pet"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@pet.PetId<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@pet.Name<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>@pet.Species<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">RowTemplate</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">TemplatedTable</span>&gt;</span>
</code></pre>
<p>Alternatively, you can specify the <code>Context</code> attribute on the component element (e.g., <code>&lt;TemplatedTable Context="pet"&gt;</code>). The specified <code>Context</code> attribute applies to all specified template parameters. This can be useful when you want to specify the content parameter name for implicit child content (without any wrapping child element).</p>
<h3 id="generic-typed-components">Generic-typed components</h3>
<p>Templated components are often generically typed. For example, a generic <code>ListView</code> component could be used to render <code>IEnumerable&lt;T&gt;</code> values. To define a generic component use the new <code>@typeparam</code> directive to specify type parameters.</p>
<p><em>GenericComponent.cshtml</em></p>
<pre><code class="lang-csharp"><span class="hljs-meta">@typeparam</span> TItem

<span class="hljs-meta">@foreach</span> (<span class="hljs-keyword">var</span> item <span class="hljs-keyword">in</span> Items)
{ <span class="hljs-meta">@ItemTemplate(item)</span>
}

<span class="hljs-meta">@functions</span> { [Parameter] RenderFragment&lt;TItem&gt; ItemTemplate { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; } [Parameter] IReadOnlyList&lt;TItem&gt; Items { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
}
</code></pre>
<p>When using generic-typed components the type parameter will be inferred if possible. Otherwise, it must be explicitly specified using an attribute that matches the name of the type parameter:</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">GenericComponent</span> <span class="hljs-attr">Items</span>=<span class="hljs-string">"@pets"</span> <span class="hljs-attr">TItem</span>=<span class="hljs-string">"Pet"</span>&gt;</span> ...
<span class="hljs-tag">&lt;/<span class="hljs-name">GenericComponent</span>&gt;</span>
</code></pre>
<h2 id="razor-templates">Razor templates</h2>
<p>Render fragments can be defined using Razor template syntax. Razor templates are a way to define a UI snippet. They look like the following:</p>
<pre><code class="lang-html">@&lt;<span class="hljs-built_in">tag</span>&gt;<span class="hljs-params">...</span>&lt;<span class="hljs-built_in">tag</span>&gt;
</code></pre>
<p>You can now use Razor templates to define <code>RenderFragment</code> and <code>RenderFragment&lt;T&gt;</code> values like this:</p>
<pre><code class="lang-html"><span class="hljs-meta">@{</span> RenderFragment template = <span class="hljs-meta">@&lt;p&gt;The</span> time is <span class="hljs-meta">@DateTime.Now.&lt;/p&gt;;</span> RenderFragment<span class="hljs-variable">&lt;Pet&gt;</span> petTemplate = (pet) =&gt; <span class="hljs-meta">@&lt;p&gt;Your</span> pet's name is <span class="hljs-meta">@pet.Name.&lt;/p&gt;</span>
}
</code></pre>
<p>Render fragments defined using Razor templates can be passed as arguments to templated components or rendered directly. For example, you can render the previous templates directly like this:</p>
<pre><code><span class="hljs-variable">@template</span>

<span class="hljs-variable">@petTemplate</span>(new Pet { Name = <span class="hljs-string">"Fido"</span> })
</code></pre>
<h2 id="use-server-side-blazor-with-the-azure-signalr-service">Use server-side Blazor with the Azure SignalR Service</h2>
<p>In the previous Blazor release we added support for running Blazor on the server where UI interactions and DOM updates are handled over a SignalR connection. In this release we refactored the server-side Blazor support to enable using server-side Blazor with the <a href="https://azure.microsoft.com/en-us/services/signalr-service/">Azure SignalR Service</a>. The Azure SignalR Service handles connection scale out for SignalR based apps, scaling up to handle thousands of persistent connections so that you don’t have to.</p>
<p>To use the Azure SignalR Service with a server-side Blazor application:</p>
<ol>
<li>
<p>Create a new server-side Blazor app.</p>
<pre><code>dotnet <span class="hljs-keyword">new</span> <span class="hljs-type">blazorserverside</span> -o BlazorServerSideApp1
</code></pre>
</li>
<li>
<p>Add the Azure SignalR Server SDK to the server project.</p>
<pre><code>dotnet add BlazorServerSideApp1/BlazorServerSideApp1<span class="hljs-selector-class">.Server</span> package Microsoft<span class="hljs-selector-class">.Azure</span><span class="hljs-selector-class">.SignalR</span>
</code></pre>
</li>
<li>
<p><a href="https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-quickstart-dotnet-core#create-an-azure-signalr-resource">Create an Azure SignalR Service resource</a> for your app and copy the primary connection string.</p>
</li>
<li>
<p>Add a <code>UserSecretsId</code> property to the <em>BlazorServerSideApp1.Server.csproj</em> project file.</p>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">PropertyGroup</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">UserSecretsId</span>&gt;</span>BlazorServerSideApp1.Server.UserSecretsId<span class="hljs-tag">&lt;/<span class="hljs-name">UserSecretsId</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">PropertyGroup</span>&gt;</span>
</code></pre>
</li>
<li>
<p>Configure the connection string as a user secret for your app.</p>
<pre><code>dotnet user-secret -<span class="hljs-selector-tag">p</span> BlazorServerSideApp1/BlazorServerSideApp1<span class="hljs-selector-class">.Server</span> set Azure:SignalR:ConnectionString &lt;Your-Connection-String&gt;
</code></pre>
<p><em>NOTE: When deploying the app you’ll need to configure the Azure SignalR Service connection string in the target environment. For example, in Azure App Service configure the connection string using an app setting.</em></p>
</li>
<li>
<p>In the <code>Startup</code> class for the server project, replace the call to <code>app.UseServerSideBlazor&lt;App.Startup&gt;()</code> with the following code:</p>
<pre><code class="lang-csharp"><span class="hljs-keyword">app</span>.UseAzureSignalR(route =&gt; route.MapHub&lt;BlazorHub&gt;(BlazorHub.DefaultPath));
<span class="hljs-keyword">app</span>.UseBlazor&lt;<span class="hljs-keyword">App</span>.Startup&gt;();
</code></pre>
</li>
<li>
<p>Run the app.</p>
<p>If you look at the network trace for the app in the browser dev tools you see that the SignalR traffic is now being routed through the Azure SignalR Service. Congratulations!</p>
</li>
</ol>
<h2 id="razor-components-to-ship-with-asp-net-core-in-net-core-3-0">Razor Components to ship with ASP.NET Core in .NET Core 3.0</h2>
<p>We announced last month at .NET Conf that we’ve decided to move forward with shipping the Blazor server-side model as part of ASP.NET Core in .NET Core 3.0. About half of Blazor users have indicated they would use the Blazor server-side model, and shipping it in .NET Core 3.0 will make it available for production use. As part of integrating the Blazor component model into the ASP.NET Core we’ve decided to give it a new name to differentiate it from the ability to run .NET in the browser: Razor Components. We are now working towards shipping Razor Components and the editing in .NET Core 3.0. This includes integrating Razor Components into ASP.NET Core so that it can be used from MVC. We expect to have a preview of this support early next year after the ASP.NET Core 2.2 release has wrapped up. </p>
<p>Our primary goal remains to ship support for running Blazor client-side in the browser. Work on running Blazor client-side on WebAssembly will continue in parallel with the Razor Components work, although it will remain experimental for a while longer while we work through the issues of running .NET on WebAssembly. We will however keep the component model <em>the same</em> regardless of whether you are running on the server or the client. You can switch your Blazor app to run on the client or the server by changing a single line of code. See the Blazor .NET Conf talk to see this in action and to learn more about our plans for Razor Components:</p>
<h2 id="give-feedback">Give feedback</h2>
<p>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:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/blazor-0-6-0-experimental-release-now-available.png" alt="Blazor survey" /></p>
<p>Thanks for trying out Blazor!</p>
<p> </p>
</div>
Reply



Forum Jump:


Users browsing this thread:
2 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016