11-04-2019, 08:27 PM
ASP.NET Core updates in .NET Core 3.1 Preview 2
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>November 4th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p><a href="https://devblogs.microsoft.com/dotnet/announcing-net-core-3-1-preview-2/">.NET Core 3.1 Preview 2 is now available</a>. This release is primarily focused on bug fixes, but it contains a few new features as well.</p>
<p>Here’s what’s new in this release for ASP.NET Core:</p>
<ul>
<li>New component tag helper</li>
<li>Prevent default actions for events in Blazor apps</li>
<li>Stop event propagation in Blazor apps</li>
<li>Validation of nested models in Blazor forms</li>
<li>Detailed errors during Blazor app development</li>
</ul>
<p>See the <a href="https://github.com/dotnet/core/blob/master/release-notes/3.1">release notes</a> for additional details and known issues.</p>
<h2>Get started</h2>
<p>To get started with ASP.NET Core in .NET Core 3.1 Preview 2 <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 Preview 2 SDK</a>.</p>
<p>If you’re on Windows using Visual Studio, for the best experience we recommend <a href="https://visualstudio.com/preview">installing the latest preview of Visual Studio 2019 16.4</a>. Installing Visual Studio 2019 16.4 will also install .NET Core 3.1 Preview 2, so you don’t need to separately install it. For Blazor development with .NET Core 3.1, Visual Studio 2019 16.4 is <em>required</em>.</p>
<p>Alongside this .NET Core 3.1 Preview 2 release, we’ve also released a Blazor WebAssembly update. To install the latest Blazor WebAssembly template also run the following command:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8
</code></pre>
<h2>Upgrade an existing project</h2>
<p>To upgrade an existing ASP.NET Core 3.1 Preview 1 project to 3.1 Preview 2:</p>
<ul>
<li>Update all Microsoft.AspNetCore.* package references to 3.1.0-preview2.19528.8</li>
</ul>
<p>See also the full list of <a href="https://github.com/aspnet/announcements/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A3.1.0+label%3A%22Breaking+change%22">breaking changes</a> in ASP.NET Core 3.1.</p>
<p>That’s it! You should now be all set to use .NET Core 3.1 Preview 2!</p>
<h2>New component tag helper</h2>
<p>Using Razor components from views and pages is now more convenient with the new component tag helper.</p>
<p>Previously, rendering a component from a view or page involved using the <code>RenderComponentAsync</code> HTML helper.</p>
<pre><code class="cshtml">@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered, new { IncrementAmount = 10 }))
</code></pre>
<p>The new component tag helper simplifies the syntax for rendering components from pages and views. Simply specify the type of the component you wish to render as well as the desired render mode. You can also specify component parameters using attributes prefixed with <code>param-</code>.</p>
<pre><code class="cshtml"><component type="typeof(Counter)" render-mode="ServerPrerendered" param-IncrementAmount="10" />
</code></pre>
<p>The different render modes allow you to control how the component is rendered:</p>
<table>
<thead>
<tr>
<th>RenderMode</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Static</td>
<td>Renders the component into static HTML.</td>
</tr>
<tr>
<td>Server</td>
<td>Renders a marker for a Blazor Server application. This doesn’t include any output from the component. When the user-agent starts, it uses this marker to bootstrap the Blazor app.</td>
</tr>
<tr>
<td>ServerPrerendered</td>
<td>Renders the component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, it uses this marker to bootstrap the Blazor app.</td>
</tr>
</tbody>
</table>
<h2>Prevent default actions for events in Blazor apps</h2>
<p>You can now prevent the default action for events in Blazor apps using the new <code>@oneventname:preventDefault</code> directive attribute. For example, the following component displays a count in a text box that can be changed by pressing the “+” or “-” keys:</p>
<pre><code class="razor"><p>Press "+" or "-" in change the count.</p>
<input value="@count" @onkeypress="@KeyHandler" @onkeypress:preventDefault /> @code { int count = 0; void KeyHandler(KeyboardEventArgs ev) { if (ev.Key == "+") { count++; } else if (ev.Key == "-") { count--; } }
}
</code></pre>
<p>The <code>@onkeypress:preventDefault</code> directive attribute prevents the default action of showing the text typed by the user in the text box. Specifying this attribute without a value is equivalent to <code>@onkeypress:preventDefault="true"</code>. The value of the attribute can also be an expression: <code>@onkeypress:preventDefault="shouldPreventDefault"</code>. You don’t have to define an event handler to prevent the default action; both features can be used independently.</p>
<h2>Stop event propagation in Blazor apps</h2>
<p>Use the new <code>@oneventname:stopPropagation</code> directive attribute to stop event propagation in Blazor apps.</p>
<p>In the following example, checking the checkbox prevents click events from the child <code>div</code> from propagating to the parent <code>div</code>:</p>
<pre><code class="razor"><input @bind="stopPropagation" type="checkbox" />
<div> Parent div <div> Child div </div>
</div> <button @onclick="OnClick">Click me!</button> @code { bool stopPropagation; void OnClickParentDiv() => Console.WriteLine("Parent div clicked."); void OnClickChildDiv() => Console.WriteLine("Child div clicked.");
}
</code></pre>
<h2>Detailed errors during Blazor app development</h2>
<p>When your Blazor app isn’t functioning properly during development, it’s important to get detailed error information so that you can troubleshoot and fix the issues. Blazor apps now display a gold bar at the bottom of the screen when an error occurs.</p>
<p>During development, in Blazor Server apps, the gold bar will direct you to the browser console where you can see the exception that has occurred.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.png" alt="Blazor detailed errors in development"></p>
<p>In production, the gold bar notifies the user that something has gone wrong, and recommends the user to refresh the browser.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2-1.png" alt="Blazor detailed errors in production"></p>
<p>The UI for this error handling experience is part of the updated Blazor project templates so that it can be easily customized:</p>
<p><em>_Host.cshtml</em></p>
<pre><code class="cshtml"><div id="blazor-error-ui"> An error has occurred. This application may no longer respond until reloaded. An unhandled exception has occurred. See browser dev tools for details. <a href="" class="reload">Reload</a> <a class="dismiss">?</a>
</div>
</code></pre>
<h2>Validation of nested models in Blazor forms</h2>
<p>Blazor provides support for validating form input using data annotations with the built-in <code>DataAnnotationsValidator</code>. However, the <code>DataAnnotationsValidator</code> only validates top-level properties of the model bound to the form.</p>
<p>To validate the entire object graph of the bound model, try out the new <code>ObjectGraphDataAnnotationsValidator</code> available in the experimental Microsoft.AspNetCore.Blazor.DataAnnotations.Validation package:</p>
<pre><code class="razor"><EditForm Model="@model" OnValidSubmit="@HandleValidSubmit"> <ObjectGraphDataAnnotationsValidator /> ...
</EditForm>
</code></pre>
<p>The Microsoft.AspNetCore.Blazor.DataAnnotations.Validation is not slated to ship with .NET Core 3.1, but is provided as an experimental package to get early feedback.</p>
<h2>Give feedback</h2>
<p>We hope you enjoy the new features in this preview release of ASP.NET Core! Please let us know what you think by filing issues on <a href="https://github.com/aspnet/aspnetcore/issues">GitHub</a>.</p>
<p>Thanks for trying out ASP.NET Core!</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.jpg" width="96" height="96" alt="Daniel Roth" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
<div>
<h5><a class="no-underline" aria-label="Daniel Roth" href="https://devblogs.microsoft.com/aspnet/author/danroth27/">Daniel Roth</a></h5>
<p>Principal Program Manager, ASP.NET</p>
<p><strong>Follow Daniel</strong> <a class="no-underline stayinformed" aria-label="Daniel Roth Twitter profile" target="_blank" href="https://twitter.com/danroth27" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label="Daniel Roth GitHub profile" target="_blank" href="https://github.com/danroth27" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label="Daniel Roth RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2019/11/...preview-2/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>November 4th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p><a href="https://devblogs.microsoft.com/dotnet/announcing-net-core-3-1-preview-2/">.NET Core 3.1 Preview 2 is now available</a>. This release is primarily focused on bug fixes, but it contains a few new features as well.</p>
<p>Here’s what’s new in this release for ASP.NET Core:</p>
<ul>
<li>New component tag helper</li>
<li>Prevent default actions for events in Blazor apps</li>
<li>Stop event propagation in Blazor apps</li>
<li>Validation of nested models in Blazor forms</li>
<li>Detailed errors during Blazor app development</li>
</ul>
<p>See the <a href="https://github.com/dotnet/core/blob/master/release-notes/3.1">release notes</a> for additional details and known issues.</p>
<h2>Get started</h2>
<p>To get started with ASP.NET Core in .NET Core 3.1 Preview 2 <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">install the .NET Core 3.1 Preview 2 SDK</a>.</p>
<p>If you’re on Windows using Visual Studio, for the best experience we recommend <a href="https://visualstudio.com/preview">installing the latest preview of Visual Studio 2019 16.4</a>. Installing Visual Studio 2019 16.4 will also install .NET Core 3.1 Preview 2, so you don’t need to separately install it. For Blazor development with .NET Core 3.1, Visual Studio 2019 16.4 is <em>required</em>.</p>
<p>Alongside this .NET Core 3.1 Preview 2 release, we’ve also released a Blazor WebAssembly update. To install the latest Blazor WebAssembly template also run the following command:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview2.19528.8
</code></pre>
<h2>Upgrade an existing project</h2>
<p>To upgrade an existing ASP.NET Core 3.1 Preview 1 project to 3.1 Preview 2:</p>
<ul>
<li>Update all Microsoft.AspNetCore.* package references to 3.1.0-preview2.19528.8</li>
</ul>
<p>See also the full list of <a href="https://github.com/aspnet/announcements/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A3.1.0+label%3A%22Breaking+change%22">breaking changes</a> in ASP.NET Core 3.1.</p>
<p>That’s it! You should now be all set to use .NET Core 3.1 Preview 2!</p>
<h2>New component tag helper</h2>
<p>Using Razor components from views and pages is now more convenient with the new component tag helper.</p>
<p>Previously, rendering a component from a view or page involved using the <code>RenderComponentAsync</code> HTML helper.</p>
<pre><code class="cshtml">@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered, new { IncrementAmount = 10 }))
</code></pre>
<p>The new component tag helper simplifies the syntax for rendering components from pages and views. Simply specify the type of the component you wish to render as well as the desired render mode. You can also specify component parameters using attributes prefixed with <code>param-</code>.</p>
<pre><code class="cshtml"><component type="typeof(Counter)" render-mode="ServerPrerendered" param-IncrementAmount="10" />
</code></pre>
<p>The different render modes allow you to control how the component is rendered:</p>
<table>
<thead>
<tr>
<th>RenderMode</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Static</td>
<td>Renders the component into static HTML.</td>
</tr>
<tr>
<td>Server</td>
<td>Renders a marker for a Blazor Server application. This doesn’t include any output from the component. When the user-agent starts, it uses this marker to bootstrap the Blazor app.</td>
</tr>
<tr>
<td>ServerPrerendered</td>
<td>Renders the component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, it uses this marker to bootstrap the Blazor app.</td>
</tr>
</tbody>
</table>
<h2>Prevent default actions for events in Blazor apps</h2>
<p>You can now prevent the default action for events in Blazor apps using the new <code>@oneventname:preventDefault</code> directive attribute. For example, the following component displays a count in a text box that can be changed by pressing the “+” or “-” keys:</p>
<pre><code class="razor"><p>Press "+" or "-" in change the count.</p>
<input value="@count" @onkeypress="@KeyHandler" @onkeypress:preventDefault /> @code { int count = 0; void KeyHandler(KeyboardEventArgs ev) { if (ev.Key == "+") { count++; } else if (ev.Key == "-") { count--; } }
}
</code></pre>
<p>The <code>@onkeypress:preventDefault</code> directive attribute prevents the default action of showing the text typed by the user in the text box. Specifying this attribute without a value is equivalent to <code>@onkeypress:preventDefault="true"</code>. The value of the attribute can also be an expression: <code>@onkeypress:preventDefault="shouldPreventDefault"</code>. You don’t have to define an event handler to prevent the default action; both features can be used independently.</p>
<h2>Stop event propagation in Blazor apps</h2>
<p>Use the new <code>@oneventname:stopPropagation</code> directive attribute to stop event propagation in Blazor apps.</p>
<p>In the following example, checking the checkbox prevents click events from the child <code>div</code> from propagating to the parent <code>div</code>:</p>
<pre><code class="razor"><input @bind="stopPropagation" type="checkbox" />
<div> Parent div <div> Child div </div>
</div> <button @onclick="OnClick">Click me!</button> @code { bool stopPropagation; void OnClickParentDiv() => Console.WriteLine("Parent div clicked."); void OnClickChildDiv() => Console.WriteLine("Child div clicked.");
}
</code></pre>
<h2>Detailed errors during Blazor app development</h2>
<p>When your Blazor app isn’t functioning properly during development, it’s important to get detailed error information so that you can troubleshoot and fix the issues. Blazor apps now display a gold bar at the bottom of the screen when an error occurs.</p>
<p>During development, in Blazor Server apps, the gold bar will direct you to the browser console where you can see the exception that has occurred.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.png" alt="Blazor detailed errors in development"></p>
<p>In production, the gold bar notifies the user that something has gone wrong, and recommends the user to refresh the browser.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2-1.png" alt="Blazor detailed errors in production"></p>
<p>The UI for this error handling experience is part of the updated Blazor project templates so that it can be easily customized:</p>
<p><em>_Host.cshtml</em></p>
<pre><code class="cshtml"><div id="blazor-error-ui"> An error has occurred. This application may no longer respond until reloaded. An unhandled exception has occurred. See browser dev tools for details. <a href="" class="reload">Reload</a> <a class="dismiss">?</a>
</div>
</code></pre>
<h2>Validation of nested models in Blazor forms</h2>
<p>Blazor provides support for validating form input using data annotations with the built-in <code>DataAnnotationsValidator</code>. However, the <code>DataAnnotationsValidator</code> only validates top-level properties of the model bound to the form.</p>
<p>To validate the entire object graph of the bound model, try out the new <code>ObjectGraphDataAnnotationsValidator</code> available in the experimental Microsoft.AspNetCore.Blazor.DataAnnotations.Validation package:</p>
<pre><code class="razor"><EditForm Model="@model" OnValidSubmit="@HandleValidSubmit"> <ObjectGraphDataAnnotationsValidator /> ...
</EditForm>
</code></pre>
<p>The Microsoft.AspNetCore.Blazor.DataAnnotations.Validation is not slated to ship with .NET Core 3.1, but is provided as an experimental package to get early feedback.</p>
<h2>Give feedback</h2>
<p>We hope you enjoy the new features in this preview release of ASP.NET Core! Please let us know what you think by filing issues on <a href="https://github.com/aspnet/aspnetcore/issues">GitHub</a>.</p>
<p>Thanks for trying out ASP.NET Core!</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/11/asp-net-core-updates-in-net-core-3-1-preview-2.jpg" width="96" height="96" alt="Daniel Roth" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
<div>
<h5><a class="no-underline" aria-label="Daniel Roth" href="https://devblogs.microsoft.com/aspnet/author/danroth27/">Daniel Roth</a></h5>
<p>Principal Program Manager, ASP.NET</p>
<p><strong>Follow Daniel</strong> <a class="no-underline stayinformed" aria-label="Daniel Roth Twitter profile" target="_blank" href="https://twitter.com/danroth27" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label="Daniel Roth GitHub profile" target="_blank" href="https://github.com/danroth27" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label="Daniel Roth RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2019/11/...preview-2/