Skip to content

Commit

Permalink
Update Porting eBook (#27512)
Browse files Browse the repository at this point in the history
* Blazor ebook frontmatter (#27086)

* Update cs5001.md (#27080)

* Update cs5001.md

* Update docs/csharp/misc/cs5001.md

Co-authored-by: David Pine <david.pine@microsoft.com>

* Remove redundant nullable operator (#27023)

* Remove redundant nullable operator

Remove redundant nullable operator for reference type. String is a reference type and always nullable,

* Make undesired error more clear

Co-authored-by: Bill Wagner <wiwagn@microsoft.com>

Co-authored-by: Bill Wagner <wiwagn@microsoft.com>

* update version

* fix typo

Co-authored-by: Machiel visser <16868513+machielvisser@users.noreply.github.com>
Co-authored-by: David Pine <david.pine@microsoft.com>
Co-authored-by: Artur Khutak <rd.artyrchik@gmail.com>
Co-authored-by: Bill Wagner <wiwagn@microsoft.com>

* VS 2022 'preview' removed (#27070)

* Fixed Typo (#27072)

changed short description to shortDescription in the comments to avoid confusion.

* Update package index with latest published versions (#27083)

* Update ExampleAsyncDisposable.cs (#27074)

* Details overloading `==` and `!=` operators on the `ValueObject` type (#27040)

* Add details about overloading == and != operators

* Apply suggestions from code review

Co-authored-by: Tom Dykstra <tdykstra@microsoft.com>

Co-authored-by: Tom Dykstra <tdykstra@microsoft.com>

* Fix text element count not starting at 1 (#27010)

When the code sample `InsertNewlinesEveryTenTextElements` is run, the first newline is 11 characters long when it is meant to be 10. This commit fixes that by making the `textElementCount` start at 1.

* Update code analysis props for .NET 6 (#26880)

* Update package index with latest published versions (#27095)

* Add link to Fedora .NET 6 tracking bug (#27091)

* Update linux-fedora.md

* Update linux-fedora.md

* Retitle Fact 1 (#27102)

Facts cannot be stated in an imperative form. Otherwise, I would call it a "tip".

* Add the HTTP keyword to the expected list of available slug completions (#27104)

* Address concerns about inconsistent code style and formatting (#27089)

* Code style

* Update usings.cs

* Code block fix (#27103)

* Update package index with latest published versions (#27105)

* Fix NETSDK error number (#27106)

* Add more info to recommended actions (#27093)

* Add note about .NET Framework (#27107)

* Update package index with latest published versions (#27108)

* fix build suggestions (#27109)

* Add note about FTP (#27094)

* Add with-expressions to anonymous types (#27111)

* Add with-expressions to anonymous types

Fixes #26770

With-expressions can be used with anonymous types.

* code review

* Bump Humanizer (#27124)

Bumps [Humanizer](https://github.com/Humanizr/Humanizer) from 2.11.10 to 2.13.14.
- [Release notes](https://github.com/Humanizr/Humanizer/releases)
- [Changelog](https://github.com/Humanizr/Humanizer/blob/main/release_notes.md)
- [Commits](Humanizr/Humanizer@v2.11.10...v2.13.14)

---
updated-dependencies:
- dependency-name: Humanizer
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix Dispose(bool) method overload in ConjunctiveDisposable pattern (#27118)

* Update ExampleAsyncDisposable.cs

* Update ExampleConjunctiveDisposable.cs

* Add documentation for CA2255 (new in .NET 6) (#27096)

* Add documentation for CA2255 (new in .NET 6)

* Address pr feedback

* Remove backticks from page metadata (#27114)

* Update package index with latest published versions (#27115)

* acrolinx (#27117)

* Restore the Azure for .NET devs tile (#27128)

* Update rabbitmq-event-bus-development-test-environment.md (#27134)

Fixes #27130

* Fix typo (#27141)

* Acrolinx 11/17 (#27131)

* acrolinx

* fix link

* Blazor Hot Reload (#27166)

* Blazor Hot Reload section

* fixing hot to Hot

* Apply suggestions from code review

Co-authored-by: David Pine <david.pine@microsoft.com>

Co-authored-by: David Pine <david.pine@microsoft.com>

* update vs images (#27375)

* Update to .NET 6 / VS 2022

* Update to .NET 6 / VS 2022 (#27379)

* Update startup details

* update with new features

* updating startup references

* update ms.date and another startup reference

* Update ms.date

* update references to startup files and older versions of .NET

* Apply suggestions from code review

Co-authored-by: David Pine <david.pine@microsoft.com>

* Update docs/architecture/blazor-for-web-forms-developers/project-structure.md

Co-authored-by: David Pine <david.pine@microsoft.com>

* fixing links

Co-authored-by: Machiel visser <16868513+machielvisser@users.noreply.github.com>
Co-authored-by: David Pine <david.pine@microsoft.com>
Co-authored-by: Artur Khutak <rd.artyrchik@gmail.com>
Co-authored-by: Bill Wagner <wiwagn@microsoft.com>
Co-authored-by: Jakub Kozera <kozerakuba@gmail.com>
Co-authored-by: Azhar <17266828+mohamed-azhar@users.noreply.github.com>
Co-authored-by: Azure SDK Bot <53356347+azure-sdk@users.noreply.github.com>
Co-authored-by: wuyuansushen <43259764+wuyuansushen@users.noreply.github.com>
Co-authored-by: Tom Dykstra <tdykstra@microsoft.com>
Co-authored-by: Leo Spratt <enchant97@users.noreply.github.com>
Co-authored-by: Genevieve Warren <24882762+gewarren@users.noreply.github.com>
Co-authored-by: Andy (Steve) De George <67293991+adegeo@users.noreply.github.com>
Co-authored-by: Radosław Rowicki <35342116+radrow@users.noreply.github.com>
Co-authored-by: Ken Dale <ken@kendaleiv.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jeff Handley <jeffhandley@users.noreply.github.com>
Co-authored-by: Scott Addie <10702007+scottaddie@users.noreply.github.com>
  • Loading branch information
18 people authored Dec 14, 2021
1 parent 6c608f7 commit 90d94d6
Show file tree
Hide file tree
Showing 57 changed files with 459 additions and 338 deletions.
90 changes: 37 additions & 53 deletions docs/architecture/blazor-for-web-forms-developers/app-startup.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ title: App startup
description: Learn how to define the startup logic for your app.
author: csharpfritz
ms.author: jefritz
ms.date: 11/20/2020
ms.date: 12/2/2021
---
# App startup

Applications that are written for ASP.NET typically have a `global.asax.cs` file that defines the `Application_Start` event that controls which services are configured and made available for both HTML rendering and .NET processing. This chapter looks at how things are slightly different with ASP.NET Core and Blazor Server.

## Application_Start and Web Forms

The default web forms `Application_Start` method has grown in purpose over years to handle many configuration tasks. A fresh web forms project with the default template in Visual Studio 2019 now contains the following configuration logic:
The default web forms `Application_Start` method has grown in purpose over years to handle many configuration tasks. A fresh web forms project with the default template in Visual Studio 2022 now contains the following configuration logic:

- `RouteConfig` - Application URL routing
- `BundleConfig` - CSS and JavaScript bundling and minification
Expand All @@ -22,72 +22,56 @@ With ASP.NET Core and Blazor, these methods are either simplified and consolidat

## Blazor Server Startup Structure

Blazor Server applications reside on top of an ASP.NET Core 3.0 or later version. ASP.NET Core web applications are configured through a pair of methods in the `Startup.cs` class on the root folder of the application. The Startup class's default content is listed below
Blazor Server applications reside on top of an ASP.NET Core 3.0 or later version. ASP.NET Core web applications are configured in *Program.cs*, or through a pair of methods in the `Startup.cs` class. A sample *Program.cs* file is shown below:

```csharp
public class Startup
using BlazorApp1.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}

public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
```

Like the rest of ASP.NET Core, the Startup class is created with dependency injection principles. The `IConfiguration` is provided to the constructor and stashed in a public property for later access during configuration.

The `ConfigureServices` method introduced in ASP.NET Core allows for the various ASP.NET Core framework services to be configured for the framework's built-in dependency injection container. The various `services.Add*` methods add services that enable features such as authentication, razor pages, MVC controller routing, SignalR, and Blazor Server interactions among many others. This method was not needed in web forms, as the parsing and handling of the ASPX, ASCX, ASHX, and ASMX files were defined by referencing ASP.NET in the web.config configuration file. More information about dependency injection in ASP.NET Core is available in the [online documentation](/aspnet/core/fundamentals/dependency-injection).
The app's required services are added to the `WebApplicationBuilder` instance's `Services` collection. This is how the various ASP.NET Core framework services are configured with the framework's built-in dependency injection container. The various `builder.Services.Add*` methods add services that enable features such as authentication, razor pages, MVC controller routing, SignalR, and Blazor Server interactions among many others. This method was not needed in web forms, as the parsing and handling of the ASPX, ASCX, ASHX, and ASMX files were defined by referencing ASP.NET in the web.config configuration file. More information about dependency injection in ASP.NET Core is available in the [online documentation](/aspnet/core/fundamentals/dependency-injection).

The `Configure` method introduces the concept of the HTTP pipeline to ASP.NET Core. In this method, we declare from top to bottom the [Middleware](middleware.md) that will handle every request sent to our application. Most of these features in the default configuration were scattered across the web forms configuration files and are now in one place for ease of reference.
After the `app` has been built by the `builder`, the rest of the calls on `app` configure its HTTP pipeline. With these calls, we declare from top to bottom the [Middleware](middleware.md) that will handle every request sent to our application. Most of these features in the default configuration were scattered across the web forms configuration files and are now in one place for ease of reference.

No longer is the configuration of the custom error page placed in a `web.config` file, but now is configured to always be shown if the application environment is not labeled `Development`. Additionally, ASP.NET Core applications are now configured to serve secure pages with TLS by default with the `UseHttpsRedirection` method call.

Next, an unexpected configuration method is listed to `UseStaticFiles`. In ASP.NET Core, support for requests for static files (like JavaScript, CSS, and image files) must be explicitly enabled, and only files in the app's *wwwroot* folder are publicly addressable by default.
Next, an unexpected configuration method call is made to `UseStaticFiles`. In ASP.NET Core, support for requests for static files (like JavaScript, CSS, and image files) must be explicitly enabled, and only files in the app's *wwwroot* folder are publicly addressable by default.

The next line is the first that replicates one of the configuration options from web forms: `UseRouting`. This method adds the ASP.NET Core router to the pipeline and it can be either configured here or in the individual files that it can consider routing to. More information about routing configuration can be found in the [Routing section](pages-routing-layouts.md).

The final statement in this method defines the endpoints that ASP.NET Core is listening on. These routes are the web accessible locations that you can access on the web server and receive some content handled by .NET and returned to you. The first entry, `MapBlazorHub` configures a SignalR hub for use in providing the real-time and persistent connection to the server where the state and rendering of Blazor components is handled. The `MapFallbackToPage` method call indicates the web-accessible location of the page that starts the Blazor application and also configures the application to handle deep-linking requests from the client-side. You will see this feature at work if you open a browser and navigate directly to Blazor handled route in your application, such as `/counter` in the default project template. The request gets handled by the *_Host.cshtml* fallback page, which then runs the Blazor router and renders the counter page.
The final `app.Map*` calls in this section define the endpoints that ASP.NET Core is listening on. These routes are the web accessible locations that you can access on the web server and receive some content handled by .NET and returned to you. The first entry, `MapBlazorHub` configures a SignalR hub for use in providing the real-time and persistent connection to the server where the state and rendering of Blazor components is handled. The `MapFallbackToPage` method call indicates the web-accessible location of the page that starts the Blazor application and also configures the application to handle deep-linking requests from the client-side. You will see this feature at work if you open a browser and navigate directly to Blazor handled route in your application, such as `/counter` in the default project template. The request gets handled by the *_Host.cshtml* fallback page, which then runs the Blazor router and renders the counter page.

The very last line starts the application, something that wasn't required in web forms (since it relied on IIS to be running).

## Upgrading the BundleConfig Process

Technologies for bundling assets like CSS stylesheets and JavaScript files have evolved significantly, with other technologies providing quickly evolving tools and techniques for managing these resources. To this end, we recommend using a Node command-line tool such as Grunt / Gulp / WebPack to package your static assets.
Technologies for bundling assets like CSS stylesheets and JavaScript files have changed significantly, with other technologies providing quickly evolving tools and techniques for managing these resources. To this end, we recommend using a Node command-line tool such as Grunt / Gulp / WebPack to package your static assets.

The Grunt, Gulp, and WebPack command-line tools and their associated configurations can be added to your application and ASP.NET Core will quietly ignore those files during the application build process. You can add a call to run their tasks by adding a `Target` inside your project file with syntax similar to the following that would trigger a gulp script and the `min` target inside that script

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Learn how the architectures of ASP.NET Web Forms and Blazor compare
author: danroth27
ms.author: daroth
no-loc: [Blazor]
ms.date: 11/20/2020
ms.date: 12/2/2021
---
# Architecture comparison of ASP.NET Web Forms and Blazor

Expand Down
58 changes: 57 additions & 1 deletion docs/architecture/blazor-for-web-forms-developers/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Learn how to build reusable UI components with Blazor and how they
author: danroth27
ms.author: daroth
no-loc: [Blazor]
ms.date: 09/18/2019
ms.date: 12/2/2021
---
# Build reusable UI components with Blazor

Expand Down Expand Up @@ -157,6 +157,23 @@ If the namespace for a component isn't in scope, you can specify a component usi
<MyComponentLib.Counter />
```

## Modify page title from components

When building SPA-style apps, it's common for parts of a page to reload without reloading the entire page. Even so, it can be useful to have the title of the page change based on which component is currently loaded. This can be accomplished by including the `<PageTitle>` tag in the component's Razor page:

```razor
@page "/"
<PageTitle>Home</PageTitle>
```

The contents of this element can be dynamic, for instance showing the current count of messages:

```razor
<PageTitle>@MessageCount messages</PageTitle>
```

Note that if several components on a particular page include `<PageTitle>` tags, only the last one will be displayed (since each one will overwrite the previous one).

## Component parameters

In ASP.NET Web Forms, you can flow parameters and data to controls using public properties. These properties can be set in markup using attributes or set directly in code. Blazor components work in a similar fashion, although the component properties must also be marked with the `[Parameter]` attribute to be considered component parameters.
Expand Down Expand Up @@ -189,6 +206,45 @@ To specify a component parameter in Blazor, use an attribute as you would in ASP
<Counter IncrementAmount="10" />
```

### Query string parameters

Blazor components can also leverage values from the query string of the page they're rendered on as a parameter source. To enable this, add the `[SupplyParameterFromQuery]` attribute to the parameter. For example, the following parameter definition would get its value from the request in the form `?IncBy=2`:

```csharp
[Parameter]
[SupplyParameterFromQuery(Name = "IncBy")]
public int IncrementAmount { get; set; } = 1;
```

If you don't supply a custom `Name` in the `[SupplyParameterFromQuery]` attribute, by default it will match the property name (`IncrementAmount` in this case).

## Components and error boundaries

By default, Blazor apps will detect unhandled exceptions and show an error message at the bottom of the page with no additional detail. To constrain the parts of the app that are impacted by an unhandled error, for instance to limit the impact to a single component, the `<ErrorBoundary>` tag can be wrapped around component declarations.

For example, to protect against possible exceptions thrown from the `Counter` component, declare it within an `<ErrorBoundary>` and optionally specify a message to display if there is an exception:

```razor
<ErrorBoundary>
<ChildContent>
<Counter />
</ChildContent>
<ErrorContent>
Oops! The counter isn't working right now; please try again later.
</ErrorContent>
</ErrorBoundary>
```

If you don't need to specify custom error content, you can just wrap the component directly:

```razor
<ErrorBoundary>
<Counter />
</ErrorBoundary>
```

A default message stating "An error as occurred." will be displayed if an unhandled exception occurs in the wrapped component.

## Event handlers

Both ASP.NET Web Forms and Blazor provide an event-based programming model for handling UI events. Examples of such events include button clicks and text input. In ASP.NET Web Forms, you use HTML server controls to handle UI events exposed by the DOM, or you can handle events exposed by web server controls. The events are surfaced on the server through form post-back requests. Consider the following Web Forms button click example:
Expand Down
4 changes: 2 additions & 2 deletions docs/architecture/blazor-for-web-forms-developers/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Learn how to configure Blazor apps without using ConfigurationManag
author: csharpfritz
ms.author: jefritz
no-loc: [Blazor]
ms.date: 11/20/2020
ms.date: 12/2/2021
---
# App configuration

Expand Down Expand Up @@ -170,7 +170,7 @@ public class MyConfigSection
}
```

This class hierarchy can be populated by adding the following line to the `Startup.ConfigureServices` method:
This class hierarchy can be populated by adding the following line to the `Startup.ConfigureServices` method (or appropriate location in *Program.cs* using the `builder.Services` property instead of `services`):

```csharp
services.Configure<MyConfig>(Configuration);
Expand Down
9 changes: 5 additions & 4 deletions docs/architecture/blazor-for-web-forms-developers/data.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Learn how to access and handle data in ASP.NET Web Forms and Blazor
author: csharpfritz
ms.author: jefritz
no-loc: [Blazor]
ms.date: 11/20/2020
ms.date: 12/2/2021
---

# Work with data
Expand Down Expand Up @@ -62,7 +62,7 @@ public class MyDbContext : DbContext
}
```

The `MyDbContext` class provides the one property that defines the access and translation for the `Product` class. Your application configures this class for interaction with the database using the following entries in the `Startup` class's `ConfigureServices` method:
The `MyDbContext` class provides the one property that defines the access and translation for the `Product` class. Your application configures this class for interaction with the database using the following entries in the `Startup` class's `ConfigureServices` method (or appropriate location in *Program.cs* using the `builder.Services` property instead of `services`):

```csharp
services.AddDbContext<MyDbContext>(options =>
Expand Down Expand Up @@ -96,10 +96,11 @@ More information about [EF Core](/ef/core/) can be found on the Microsoft Docs s

## Interact with web services

When ASP.NET was first released, SOAP services were the preferred way for web servers and clients to exchange data. Much has changed since that time, and the preferred interactions with services have shifted to direct HTTP client interactions. With ASP.NET Core and Blazor, you can register the configuration of your `HttpClient` in the `Startup` class's `ConfigureServices` method. Use that configuration when you need to interact with the HTTP endpoint. Consider the following configuration code:
When ASP.NET was first released, SOAP services were the preferred way for web servers and clients to exchange data. Much has changed since that time, and the preferred interactions with services have shifted to direct HTTP client interactions. With ASP.NET Core and Blazor, you can register the configuration of your `HttpClient` in *Program.cs* or in the `Startup` class's `ConfigureServices` method. Use that configuration when you need to interact with the HTTP endpoint. Consider the following configuration code:

```csharp
services.AddHttpClient("github", client =>
// in Program.cs
builder.Services.AddHttpClient("github", client =>
{
client.BaseAddress = new Uri("http://api.github.com/");
// Github API versioning
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Learn how to build forms with client-side validation in Blazor.
author: danroth27
ms.author: daroth
no-loc: [Blazor, "Blazor WebAssembly"]
ms.date: 09/19/2019
ms.date: 12/2/2021
---
# Forms and validation

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Learn the different ways to host a Blazor app, including in the bro
author: danroth27
ms.author: daroth
no-loc: [Blazor, WebAssembly]
ms.date: 11/20/2020
ms.date: 12/2/2021
---
# Blazor app hosting models

Expand Down
10 changes: 5 additions & 5 deletions docs/architecture/blazor-for-web-forms-developers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ description: Learn how to build full-stack web apps with .NET using Blazor and .
author: danroth27
ms.author: daroth
no-loc: [Blazor, WebAssembly]
ms.date: 02/02/2021
ms.date: 12/2/2021
---
# Blazor for ASP.NET Web Forms Developers

![Screenshot that shows the Serverless Apps e-book cover.](./media/index/blazor-for-aspnet-web-forms-developers.png)
![Blazor for ASP.NET Web Forms Developers e-book cover.](./media/index/blazor-for-aspnet-web-forms-developers.png)

> DOWNLOAD available at: <https://aka.ms/blazor-ebook>
**EDITION v1.0**
**EDITION v6.0** - Updated to .NET 6

Refer [changelog](https://aka.ms/blazor-ebook-changelog) for the book updates and community contributions.
Refer to [changelog](https://aka.ms/blazor-ebook-changelog) for the book updates and community contributions.

PUBLISHED BY

Expand Down Expand Up @@ -50,7 +50,7 @@ Authors:
> **[Scott Addie](https://github.com/scottaddie)**, Senior Content Developer, Microsoft Corp.
> **[Steve "ardalis" Smith](https://ardalis.com)**, Software Architect and Trainer, Ardalis Services LLC
> **[Steve "@ardalis" Smith](https://github.com/ardalis)**, Software Architect and Trainer, NimblePros.com
## Introduction

Expand Down
Loading

0 comments on commit 90d94d6

Please sign in to comment.