+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: C#, Visual Basic, & .Net Frameworks (https://www.sickgaming.net/forum-79.html)
+--- Thread: ASP.NET Core and Blazor updates in .NET Core 3.0 Preview 8 (/thread-92037.html)
ASP.NET Core and Blazor updates in .NET Core 3.0 Preview 8 - xSicKxBot - 10-21-2019
ASP.NET Core and Blazor updates in .NET Core 3.0 Preview 8
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8.png" width="58" height="58" 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/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8.png" width="58" height="58" alt="Avatar" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 photo avatar-default"></p>
<p>Sourabh</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>August 13th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p><a href="https://devblogs.microsoft.com/dotnet/announcing-net-core-3-0-preview-8/">.NET Core 3.0 Preview 8 is now available</a> and it includes a bunch of new updates to ASP.NET Core and Blazor.</p>
<p>Here’s the list of what’s new in this preview:</p>
<ul>
<li>Project template updates
<ul>
<li>Cleaned up top-level templates in Visual Studio</li>
<li>Angular template updated to Angular 8</li>
<li>Blazor templates renamed and simplified</li>
<li>Razor Class Library template replaces the Blazor Class Library template</li>
</ul>
</li>
<li>Case-sensitive component binding</li>
<li>Improved reconnection logic for Blazor Server apps</li>
<li><code>NavLink</code> component updated to handle additional attributes</li>
<li>Culture aware data binding</li>
<li>Automatic generation of backing fields for <code>@ref</code></li>
<li>Razor Pages support for <code>@attribute</code></li>
<li>New networking primitives for non-HTTP Servers</li>
<li>Unix domain socket support for the Kestrel Sockets transport</li>
<li>gRPC support for CallCredentials</li>
<li>ServiceReference tooling in Visual Studio</li>
<li>Diagnostics improvements for gRPC</li>
</ul>
<p>Please see the <a href="https://aka.ms/netcore3releasenotes">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.0 Preview 8 <a href="https://aka.ms/netcore3download">install the .NET Core 3.0 Preview 8 SDK</a></p>
<p>If you’re on Windows using Visual Studio, <a href="https://visualstudio.com/preview">install the latest preview of Visual Studio 2019</a>.</p>
<p><em>.NET Core 3.0 Preview 8 requires Visual Studio 2019 16.3 Preview 2 or later</em></p>
<p>To install the latest Blazor WebAssembly template also run the following command:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview8.19405.7
</code></pre>
<h2>Upgrade an existing project</h2>
<p>To upgrade an existing an ASP.NET Core app to .NET Core 3.0 Preview 8, follow the <a href="https://docs.microsoft.com/en-us/aspnet/core/migration/22-to-30">migrations steps in the ASP.NET Core docs</a>.</p>
<p>Please also see the full list of <a href="https://github.com/aspnet/announcements/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A3.0.0+label%3A%22Breaking+change%22">breaking changes</a> in ASP.NET Core 3.0.</p>
<p>To upgrade an existing ASP.NET Core 3.0 Preview 7 project to Preview 8:</p>
<ul>
<li>Update Microsoft.AspNetCore.* package references to 3.0.0-preview8.19405.7.</li>
<li>In Razor components rename <code>OnInit</code> to <code>OnInitialized</code> and <code>OnInitAsync</code> to <code>OnInitializedAsync</code>.</li>
<li>In Blazor apps, update Razor component parameters to be public, as non-public component parameters now result in an error.</li>
<li>In Blazor WebAssembly apps that make use of the <code>HttpClient</code> JSON helpers, add a package reference to Microsoft.AspNetCore.Blazor.HttpClient.</li>
<li>On Blazor form components remove use of <code>Id</code> and <code>Class</code> parameters and instead use the HTML <code>id</code> and <code>class</code> attributes.</li>
<li>Rename <code>ElementRef</code> to <code>ElementReference</code>.</li>
<li>Remove backing field declarations when using <code>@ref</code> or specify the <code>@ref:suppressField</code> parameter to suppress automatic backing field generation.</li>
<li>Update calls to <code>ComponentBase.Invoke</code> to call <code>ComponentBase.InvokeAsync</code>.</li>
<li>Update uses of <code>ParameterCollection</code> to use <code>ParameterView</code>.</li>
<li>Update uses of <code>IComponent.Configure</code> to use <code>IComponent.Attach</code>.</li>
<li>Remove use of namespace <code>Microsoft.AspNetCore.Components.Layouts</code>.</li>
</ul>
<p>You should hopefully now be all set to use .NET Core 3.0 Preview 8.</p>
<h2>Project template updates</h2>
<h3>Cleaned up top-level templates in Visual Studio</h3>
<p>Top level ASP.NET Core project templates in the “Create a new project” dialog in Visual Studio no longer appear duplicated in the “Create a new ASP.NET Core web application” dialog. The following ASP.NET Core templates now only appear in the “Create a new project” dialog:</p>
<ul>
<li>Razor Class Library</li>
<li>Blazor App</li>
<li>Worker Service</li>
<li>gRPC Service</li>
</ul>
<h3>Angular template updated to Angular 8</h3>
<p>The Angular template for ASP.NET Core 3.0 has now been updated to use Angular 8.</p>
<h3>Blazor templates renamed and simplified</h3>
<p>We’ve updated the Blazor templates to use a consistent naming style and to simplify the number of templates:</p>
<ul>
<li>The “Blazor (server-side)” template is now called “Blazor Server App”. Use <code>blazorserver</code> to create a Blazor Server app from the command-line.</li>
<li>The “Blazor” template is now called “Blazor WebAssembly App”. Use <code>blazorwasm</code> to create a Blazor WebAssembly app from the command-line.</li>
<li>To create an ASP.NET Core hosted Blazor WebAssembly app, select the “ASP.NET Core hosted” option in Visual Studio, or pass the <code>--hosted</code> on the command-line</li>
</ul>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-1.png" alt="Create a new Blazor app"></p>
<pre><code>dotnet new blazorwasm --hosted
</code></pre>
<h3>Razor Class Library template replaces the Blazor Class Library template</h3>
<p>The Razor Class Library template is now setup for Razor component development by default and the Blazor Class Library template has been removed. New Razor Class Library projects target .NET Standard so they can be used from both Blazor Server and Blazor WebAssembly apps. To create a new Razor Class Library template that targets .NET Core and supports Pages and Views instead, select the “Support pages and views” option in Visual Studio, or pass the <code>--support-pages-and-views</code> option on the command-line.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-2.png" alt="Razor Class Library for Pages and Views"></p>
<pre><code>dotnet new razorclasslib --support-pages-and-views
</code></pre>
<h2>Case-sensitive component binding</h2>
<p>Components in .razor files are now case-sensitive. This enables some useful new scenarios and improves diagnostics from the Razor compiler.</p>
<p>For example, the <code>Counter</code> has a button for incrementing the count that is styled as a primary button. What if we wanted a <code>Button</code> component that is styled as a primary button by default? Creating a component named <code>Button</code> in previous Blazor releases was problematic because it clashed with the <code>button</code> HTML element, but now that component matching is case-sensitive we can create our <code>Button</code> component and use it in <code>Counter</code> without issue.</p>
<p><em>Button.razor</em></p>
<pre><code class="razor"><button class="btn btn-primary" @attributes="AdditionalAttributes" @onclick="OnClick">@ChildContent</button> @code { [Parameter] public EventCallback<UIMouseEventArgs> OnClick { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> AdditionalAttributes { get; set; }
}
</code></pre>
<p><em>Counter.razor</em></p>
<pre><code class="razor">@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <Button OnClick="IncrementCount">Click me</Button> @code { int currentCount = 0; void IncrementCount() { currentCount++; }
}
</code></pre>
<p>Notice that the <code>Button</code> component is pascal cased, which is the typical style for .NET types. If we instead try to name our component <code>button</code> we get a warning that components cannot start with a lowercase letter due to the potential conflicts with HTML elements.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-3.png" alt="Lowercase component warning"></p>
<p>We can move the <code>Button</code> component into a Razor Class Library so that it can be reused in other projects. We can then reference the Razor Class Library from our web app. The <code>Button</code> component will now have the default namespace of the Razor Class Library. The Razor compiler will resolve components based on the in scope namespaces. If we try to use our <code>Button</code> component without adding a using statement for the requisite namespace, we now get a useful error message at build time.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-4.png" alt="Unrecognized component error"></p>
<h2><code>NavLink</code> component updated to handle additional attributes</h2>
<p>The built-in <code>NavLink</code> component now supports passing through additional attributes to the rendered anchor tag. Previously <code>NavLink</code> had specific support for the <code>href</code> and <code>class</code> attributes, but now you can specify any additional attribute you’d like. For example, you can specify the anchor target like this:</p>
<pre><code class="razor"><NavLink href="my-page" target="_blank">My page</NavLink>
</code></pre>
<p>which would render:</p>
<pre><code class="html"><a href="my-page" target="_blank" rel="noopener noreferrer">My page</a>
</code></pre>
<h2>Improved reconnection logic for Blazor Server apps</h2>
<p>Blazor Server apps require a live connection to the server in order to function. If the connection or the server-side state associated with it is lost, then the the client will be unable to function. Blazor Server apps will attempt to reconnect to the server in the event of an intermittent connection loss and this logic has been made more robust in this release. If the reconnection attempts fail before the network connection can be reestablished, then the user can still attempt to retry the connection manually by clicking the provided “Retry” button.</p>
<p>However, if the server-side state associated with the connect was also lost (e.g. the server was restarted) then clients will still be unable to connect. A common situation where this occurs is during development in Visual Studio. Visual Studio will watch the project for file changes and then rebuild and restart the app as changes occur. When this happens the server-side state associated with any connected clients is lost, so any attempt to reconnect with that state will fail. The only option is to reload the app and establish a new connection.</p>
<p>New in this release, the app will now also suggest that the user reload the browser when the connection is lost and reconnection fails.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-5.png" alt="Reload prompt"></p>
<h2>Culture aware data binding</h2>
<p>Data-binding support (<code>@bind</code>) for <code><input></code> elements is now culture-aware. Data bound values will be formatted for display and parsed using the current culture as specified by the <code>System.Globalization.CultureInfo.CurrentCulture</code> property. This means that <code>@bind</code> will work correctly when the user’s desired culture has been set as the current culture, which is typically done using the ASP.NET Core localization middleware (see <a href="https://docs.microsoft.com/aspnet/core/blazor/components#localization">Localization</a>).</p>
<p>You can also manually specify the culture to use for data binding using the new <code>@bind:culture</code> parameter, where the value of the parameter is a <code>CultureInfo</code> instance. For example, to bind using the invariant culture:</p>
<pre><code class="razor"><input @bind="amount" @bind:culture="CultureInfo.InvariantCulture" />
</code></pre>
<p>The <code><input type="number" /></code> and <code><input type="date" /></code> field types will by default use <code>CultureInfo.InvariantCulture</code> and the formatting rules appropriate for these field types in the browser. These field types cannot contain free-form text and have a look and feel that is controller by the browser.</p>
<p>Other field types with specific formatting requirements include <code>datetime-local</code>, <code>month</code>, and <code>week</code>. These field types are not supported by Blazor at the time of writing because they are not supported by all major browsers.</p>
<p>Data binding now also includes support for binding to <code>DateTime?</code>, <code>DateTimeOffset</code>, and <code>DateTimeOffset?</code>.</p>
<h2>Automatic generation of backing fields for <code>@ref</code></h2>
<p>The Razor compiler will now automatically generate a backing field for both element and component references when using <code>@ref</code>. You no longer need to define these fields manually:</p>
<pre><code class="razor"><button @ref="myButton" @onclick="OnClicked">Click me</button> <Counter @ref="myCounter" IncrementAmount="10" /> @code { void OnClicked() => Console.WriteLine($"I have a {myButton} and myCounter.IncrementAmount={myCounter.IncrementAmount}");
}
</code></pre>
<p>In some cases you may still want to manually create the backing field. For example, declaring the backing field manually is required when referencing generic components. To suppress backing field generation specify the <code>@ref:suppressField</code> parameter.</p>
<h2>Razor Pages support for <code>@attribute</code></h2>
<p>Razor Pages now support the new <code>@attribute</code> directive for adding attributes to the generate page class.</p>
<p>For example, you can now specify that a page requires authorization like this:</p>
<pre><code class="cshtml">@page
@attribute [Microsoft.AspNetCore.Authorization.Authorize] <h1>Authorized users only!<h1> <p>Hello @User.Identity.Name. You are authorized!</p>
</code></pre>
<h2>New networking primitives for non-HTTP Servers</h2>
<p>As part of the effort to decouple the components of Kestrel, we are introducing new networking primitives allowing you to add support for non-HTTP protocols.</p>
<p>You can bind to an endpoint (<code>System.Net.EndPoint</code>) by calling <code>Bind</code> on an <code>IConnectionListenerFactory</code>. This returns a <code>IConnectionListener</code> which can be used to accept new connections. Calling <code>AcceptAsync</code> returns a <code>ConnectionContext</code> with details on the connection. A <code>ConnectionContext</code> is similar to <code>HttpContext</code> except it represents a connection instead of an HTTP request and response.</p>
<p>The example below show a simple TCP Echo server hosted in a <a href="https://docs.microsoft.com/dotnet/architecture/microservices/multi-container-microservice-net-applications/background-tasks-with-ihostedservice#implementing-ihostedservice-with-a-custom-hosted-service-class-deriving-from-the-backgroundservice-base-class">BackgroundService</a> built using these new primitives.</p>
<pre><code class="csharp">public class TcpEchoServer : BackgroundService
{ private readonly ILogger<TcpEchoServer> _logger; private readonly IConnectionListenerFactory _factory; private IConnectionListener _listener; public TcpEchoServer(ILogger<TcpEchoServer> logger, IConnectionListenerFactory factory) { _logger = logger; _factory = factory; } protected override async Task ExecuteAsync(CancellationToken stoppingToken) { _listener = await _factory.BindAsync(new IPEndPoint(IPAddress.Loopback, 6000), stoppingToken); while (true) { var connection = await _listener.AcceptAsync(stoppingToken); // AcceptAsync will return null upon disposing the listener if (connection == null) { break; } // In an actual server, ensure all accepted connections are disposed prior to completing _ = Echo(connection, stoppingToken); } } public override async Task StopAsync(CancellationToken cancellationToken) { await _listener.DisposeAsync(); } private async Task Echo(ConnectionContext connection, CancellationToken stoppingToken) { try { var input = connection.Transport.Input; var output = connection.Transport.Output; await input.CopyToAsync(output, stoppingToken); } catch (OperationCanceledException) { _logger.LogInformation("Connection {ConnectionId} cancelled due to server shutdown", connection.ConnectionId); } catch (Exception e) { _logger.LogError(e, "Connection {ConnectionId} threw an exception", connection.ConnectionId); } finally { await connection.DisposeAsync(); _logger.LogInformation("Connection {ConnectionId} disconnected", connection.ConnectionId); } }
}
</code></pre>
<h2>Unix domain socket support for the Kestrel Sockets transport</h2>
<p>We’ve updated the default sockets transport in Kestrel to add support Unix domain sockets (on Linux, macOS, and Windows 10, version 1803 and newer). To bind to a Unix socket, you can call the <code>ListenUnixSocket()</code> method on <code>KestrelServerOptions</code>.</p>
<pre><code class="csharp">public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder .ConfigureKestrel(o => { o.ListenUnixSocket("/var/listen.sock"); }) .UseStartup<Startup>(); });
</code></pre>
<h2>gRPC support for CallCredentials</h2>
<p>In preview8, we’ve added support for <code>CallCredentials</code> allowing for interoperability with existing libraries like <code>Grpc.Auth</code> that rely on <code>CallCredentials</code>.</p>
<h2>Diagnostics improvements for gRPC</h2>
<h2>Support for <code>Activity</code></h2>
<p>The gRPC client and server use <a href="https://docs.microsoft.com/dotnet/api/system.diagnostics.activity?view=netcore-3.0">Activities</a> to annotate inbound/outbound requests with <a href="https://docs.microsoft.com/dotnet/api/system.diagnostics.activity.baggage?view=netcore-3.0#System_Diagnostics_Activity_Baggage">baggage</a> containing information about the current RPC operation. This information can be accessed by telemetry frameworks for distributed tracing and by logging frameworks.</p>
<h3>EventCounters</h3>
<p>The newly introduced <code>Grpc.AspNetCore.Server</code> and <code>Grpc.Net.Client</code> providers now emit the following event counters:</p>
<ul>
<li><code>total-calls</code></li>
<li><code>current-calls</code></li>
<li><code>calls-failed</code></li>
<li><code>calls-deadline-exceeded</code></li>
<li><code>messages-sent</code></li>
<li><code>messages-received</code></li>
<li><code>calls-unimplemented</code></li>
</ul>
<p>You can use the <code>dotnet counters</code> global tool to view the metrics emitted.</p>
<pre><code>dotnet counters monitor -p <PID> Grpc.AspNetCore.Server
</code></pre>
<h2>ServiceReference tooling in Visual Studio</h2>
<p>We’ve added support in Visual Studio that makes it easier to manage references to other Protocol Buffers documents and Open API documents.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-6.png" alt="ServiceReference"></p>
<p>When pointed at OpenAPI documents, the ServiceReference experience in Visual Studio can generated typed C#/TypeScript clients using <code>NSwag</code>.</p>
<p>When pointed at Protocol Buffer (<code>.proto</code>) files, the ServiceReference experience will Visual Studio can generate gRPC service stubs, gRPC clients, or message types using the <code>Grpc.Tools</code> package.</p>
<h2>SignalR User Survey</h2>
<p>We’re interested in how you use SignalR and the Azure SignalR Service, and your opinions on SignalR features. To that end, we’ve created a survey we’d like to invite any SignalR customer to complete. If you’re interested in talking to one of the engineers from the SignalR team about your ideas or feedback, we’ve provided an opportunity to enter your contact information in the survey, but that information is <strong>not</strong> required. Help us plan the next wave of SignalR features by providing your feedback <a href="https://microsoft.qualtrics.com/jfe/form/SV_d7gWg0XqnG3NZ2Z">in the survey</a>.</p>
<h2>Give feedback</h2>
<p>We hope you enjoy the new features in this preview release of ASP.NET Core and Blazor! 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 and Blazor!</p>
<div class="authorinfoarea">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/08/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8-7.png" width="96" height="96" alt="Avatar" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 photo avatar-default"></div>
</p></div>
</div>
https://www.sickgaming.net/blog/2019/08/13/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8/