From 75043f6a8a89df019dd895cf64f100e9416f7986 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 14 Sep 2023 07:23:40 -0400 Subject: [PATCH 1/8] Blazor overview updates 8.0 --- aspnetcore/blazor/components/index.md | 2 + aspnetcore/blazor/hosting-models.md | 31 ++---- aspnetcore/blazor/index.md | 140 ++++++-------------------- 3 files changed, 42 insertions(+), 131 deletions(-) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index cbd10aa605d4..5536affaa8df 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -16,6 +16,8 @@ This article explains how to create and use Razor components in Blazor apps, inc Blazor apps are built using *Razor components*, informally known as *Blazor components* or only *components*. A component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior. Components can be nested, reused, shared among projects, and [used in MVC and Razor Pages apps](xref:blazor/components/prerendering-and-integration). +Components render into an in-memory representation of the browser's [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) called a *render tree*, which is used to update the UI in a flexible and efficient way. + ## Component classes Components are implemented using a combination of C# and HTML markup in [Razor](xref:mvc/views/razor) component files with the `.razor` file extension. diff --git a/aspnetcore/blazor/hosting-models.md b/aspnetcore/blazor/hosting-models.md index 48ae924d54f3..5fe35d524e73 100644 --- a/aspnetcore/blazor/hosting-models.md +++ b/aspnetcore/blazor/hosting-models.md @@ -112,6 +112,12 @@ The Blazor script handles: * Downloading the .NET runtime, Razor components, and the component's dependencies. * Initialization of the runtime. +The size of the published app, its *payload size*, is a critical performance factor for an app's usability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times: + +* Unused code is stripped out of the app when it's published by the [Intermediate Language (IL) Trimmer](xref:blazor/host-and-deploy/configure-trimmer). +* HTTP responses are compressed. +* The .NET runtime and assemblies are cached in the browser. + The Blazor WebAssembly hosting model offers several benefits: * For standalone Blazor WebAssembly apps, there's no .NET server-side dependency after the app is downloaded from the server, so the app remains functional if the server goes offline. @@ -434,23 +440,8 @@ To set a component's hosting model to Blazor Server or Blazor WebAssembly at com ## Additional resources -:::moniker range=">= aspnetcore-6.0" - -* -* -* -* -* -* - -:::moniker-end - -:::moniker range="< aspnetcore-6.0" - -* -* -* -* -* - -:::moniker-end +* [HTML](https://www.w3.org/html/) +* [WebAssembly](https://webassembly.org) +* [mono/mono GitHub repository](https://github.com/mono/mono) +* [C# Guide](/dotnet/csharp/) +* diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index 27fe6407ed08..0f97df2115b3 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -57,94 +57,11 @@ Using .NET for client-side web development offers the following advantages: > [!NOTE] > For a Blazor quick start tutorial, see [Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro). -## Components - -Blazor apps are based on *components*. A component in Blazor is an element of UI, such as a page, dialog, or data entry form. - -Components are .NET C# classes built into [.NET assemblies](/dotnet/standard/assembly/) that: - -* Define flexible UI rendering logic. -* Handle user events. -* Can be nested and reused. -* Can be shared and distributed as [Razor class libraries](xref:razor-pages/ui-class) or [NuGet packages](/nuget/what-is-nuget). - -The component class is usually written in the form of a [Razor](xref:mvc/views/razor) markup page with a `.razor` file extension. Components in Blazor are formally referred to as *Razor components*, informally as *Blazor components*. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with [IntelliSense](/visualstudio/ide/using-intellisense) programming support in Visual Studio. - -Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component (`Dialog.razor`) that displays a dialog and processes an event when the user selects a button: - -```razor -
-
-

@Title

-

@ChildContent

- -
-
- -@code { - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter] - public string? Title { get; set; } - - private void OnYes() - { - Console.WriteLine("Write to the console in C#! 'Yes' button selected."); - } -} -``` - -In the preceding example, `OnYes` is a C# method triggered by the button's `onclick` event. The dialog's text (`ChildContent`) and title (`Title`) are provided by the following component that uses this component in its UI. - -The `Dialog` component is nested within another component using an HTML tag. In the following example, the `Index` component (`Index.razor`) uses the preceding `Dialog` component. The tag's `Title` attribute passes a value for the title to the `Dialog` component's `Title` property. The `Dialog` component's text (`ChildContent`) are set by the content of the `` element. When the `Dialog` component is added to the `Index` component, [IntelliSense in Visual Studio](/visualstudio/ide/using-intellisense) speeds development with syntax and parameter completion. + :::moniker range=">= aspnetcore-8.0" -```razor -@page "/" -@attribute [RenderModeServer] - -

Hello, world!

- -

- Welcome to your new app. -

- - - Do you want to learn more about Blazor? - -``` - -:::moniker-end - -:::moniker range="< aspnetcore-8.0" - -```razor -@page "/" - -

Hello, world!

- -

- Welcome to your new app. -

- - - Do you want to learn more about Blazor? - -``` - -:::moniker-end - -The dialog is rendered when the `Index` component is accessed in a browser. When the button is selected by the user, the browser's developer tools console shows the message written by the `OnYes` method: - -![Dialog component rendered in the browser nested inside of the Index component. The browser developer tools console shows the message written by C# code when the user selects the Yes! button in the UI.](~/blazor/index/_static/dialog.png) - -Components render into an in-memory representation of the browser's [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) called a *render tree*, which is used to update the UI in a flexible and efficient way. - -:::moniker range=">= aspnetcore-8.0" - -## Blazor Web Apps +## Build a full-stack web app with Blazor Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single project, where you can switch between server-side and client-side rendering modes and even mix them in the same page. @@ -152,7 +69,9 @@ When a Blazor Web App uses interactivity with server rendering, the server gener *Streaming rendering* can improve the user experience with SSR when long-running asynchronous tasks are required to fully render a page. Initially, Blazor renders the entire page for the browser with placeholder content. The asynchronous operations execute on the server. After the operations are complete, the updated content is sent to the browser on the same response connection and patched into page. The benefit of this approach is that the main layout of the app renders as quickly as possible. -Blazor Web Apps also support interactivity with client rendering that relies on a .NET runtime running on [WebAssembly](https://webassembly.org). For more information on WebAssembly, see the [Blazor WebAssembly](#blazor-webassembly) section. +Blazor Web Apps also support interactivity with client rendering that relies on a .NET runtime running on [WebAssembly](https://webassembly.org). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins. WebAssembly works in all modern web browsers, including mobile browsers. + +When running Blazor on WebAssembly, code can access the full functionality of the browser via JavaScript. .NET code runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine. After rendering is complete, interactivity on the client can adopt either or both of the following techniques, even in the same page: @@ -165,16 +84,22 @@ After rendering is complete, interactivity on the client can adopt either or bot * The assemblies and the [.NET runtime](/dotnet/framework/get-started/overview) are downloaded to the browser. * Blazor bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls. - +* [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui): A cross-platform framework for creating native mobile and desktop apps with C# and XAML. +* [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/): A UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. +* [Windows Forms](/dotnet/desktop/winforms/overview/): A UI framework that creates rich desktop client apps for Windows. The Windows Forms development platform supports a broad set of app development features, including controls, graphics, data binding, and user input. :::moniker-end + + + + :::moniker range="< aspnetcore-8.0" ## Blazor Server @@ -201,8 +126,6 @@ After the components are interactive on the client, UI updates are triggered by A component is disposed after the user navigates away from the component. -:::moniker-end - ## Blazor WebAssembly Blazor WebAssembly is a [single-page app (SPA) framework](/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps) for building interactive client-side web apps with .NET. @@ -225,7 +148,9 @@ The size of the published app, its *payload size*, is a critical performance fac * HTTP responses are compressed. * The .NET runtime and assemblies are cached in the browser. -:::moniker range=">= aspnetcore-6.0" +:::moniker-end + +:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" ## Blazor Hybrid @@ -235,13 +160,10 @@ Hybrid apps use a blend of native and web technologies. A *Blazor Hybrid* app us * [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/): A UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. * [Windows Forms](/dotnet/desktop/winforms/overview/): A UI framework that creates rich desktop client apps for Windows. The Windows Forms development platform supports a broad set of app development features, including controls, graphics, data binding, and user input. -For more information on creating Blazor Hybrid apps with the preceding frameworks, see the following articles: - -* -* - :::moniker-end +:::moniker range="< aspnetcore-8.0" + ## JavaScript interop For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can [call into JavaScript code](xref:blazor/js-interop/call-javascript-from-dotnet), and JavaScript code can [call into C# code](xref:blazor/js-interop/call-dotnet-from-javascript). @@ -252,16 +174,12 @@ Blazor implements the [.NET Standard](/dotnet/standard/net-standard), which enab APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a . -## Additional resources - -* [WebAssembly](https://webassembly.org) -* -* -* -* -* [mono/mono GitHub repository](https://github.com/mono/mono) -* [C# Guide](/dotnet/csharp/) -* -* [HTML](https://www.w3.org/html/) -* [Awesome Blazor](https://github.com/AdrienTorris/awesome-blazor) (Links to community-maintained Blazor resources) -* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) +:::moniker-end + + + +## Next steps + +> [!div class="nextstepaction"] +> [Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro) +> From 16a49ebf92d233a597d264aba16cc9fc9f6398f0 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 10:20:40 -0400 Subject: [PATCH 2/8] Apply suggestions from code review Co-authored-by: Daniel Roth --- aspnetcore/blazor/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index 0f97df2115b3..8abac83be114 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -63,15 +63,14 @@ Using .NET for client-side web development offers the following advantages: ## Build a full-stack web app with Blazor -Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single project, where you can switch between server-side and client-side rendering modes and even mix them in the same page. +Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single solution, where you can switch between server-side and client-side rendering modes and even mix them in the same page. -When a Blazor Web App uses interactivity with server rendering, the server generates HTML in response to a request and sends it to the browser. The page loads fast because UI rendering is performed quickly on the server without the need to download a large JavaScript bundle or wait for the establishment of a [SignalR](xref:signalr/introduction) connection to the client. +Blazor Web Apps can deliver UI to the browser fast by statically rendering HTML content from the server in response to requests. The page loads fast because UI rendering is performed quickly on the server without the need to download a large JavaScript bundle. Blazor can also further improve the user experience with various progressive enhancements to server rendering, such as enhanced navigation with form posts and streaming rendering of asynchronously-generated content. -*Streaming rendering* can improve the user experience with SSR when long-running asynchronous tasks are required to fully render a page. Initially, Blazor renders the entire page for the browser with placeholder content. The asynchronous operations execute on the server. After the operations are complete, the updated content is sent to the browser on the same response connection and patched into page. The benefit of this approach is that the main layout of the app renders as quickly as possible. +Blazor also supports *interactive* server rendering, where UI interactions are handled from the server over a real-time connection with the browser. Interactive server rendering enables a rich user experience like one would expect from a client app but without the need to create API endpoints to access server resources. -Blazor Web Apps also support interactivity with client rendering that relies on a .NET runtime running on [WebAssembly](https://webassembly.org). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins. WebAssembly works in all modern web browsers, including mobile browsers. -When running Blazor on WebAssembly, code can access the full functionality of the browser via JavaScript. .NET code runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine. +Blazor Web Apps also support interactivity with client rendering that relies on a .NET runtime built with [WebAssembly](https://webassembly.org) that you can download with your app. When running Blazor on WebAssembly, your .NET code can access the full functionality of the browser and interop with JavaScript. Your .NET code runs in the browser's security sandbox with the protections that the sandbox provides against malicious actions on the client machine. After rendering is complete, interactivity on the client can adopt either or both of the following techniques, even in the same page: @@ -84,7 +83,7 @@ After rendering is complete, interactivity on the client can adopt either or bot * The assemblies and the [.NET runtime](/dotnet/framework/get-started/overview) are downloaded to the browser. * Blazor bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls. -Blazor apps can entirely target running on WebAssembly in the browser without the involvement of a server. For a *standalone Blazor WebAssembly app*, assets are deployed as static files to a web server or service capable of serving static content to clients. +Blazor apps can also entirely target running on WebAssembly in the browser without the involvement of a server. For a *standalone Blazor WebAssembly app*, assets are deployed as static files to a web server or service capable of serving static content to clients. Once downloaded, standalone Blazor WebAssembly apps can be cached and executed offline as a Progressive Web App (PWA). ## Build a native client app with Blazor Hybrid From fbc3c9e08180c2ad0fdaf1b846e4a05c5c16bb08 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 10:33:34 -0400 Subject: [PATCH 3/8] Updates --- aspnetcore/blazor/index.md | 59 ++++++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 22 deletions(-) diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index 0f97df2115b3..4a000aead87e 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -57,7 +57,41 @@ Using .NET for client-side web development offers the following advantages: > [!NOTE] > For a Blazor quick start tutorial, see [Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro). - +## Components + +Blazor apps are based on *components*. A component in Blazor is an element of UI, such as a page, dialog, or data entry form. + +Components are .NET C# classes built into [.NET assemblies](/dotnet/standard/assembly/) that: + +* Define flexible UI rendering logic. +* Handle user events. +* Can be nested and reused. +* Can be shared and distributed as [Razor class libraries](xref:razor-pages/ui-class) or [NuGet packages](/nuget/what-is-nuget). + +The component class is usually written in the form of a [Razor](xref:mvc/views/razor) markup page with a `.razor` file extension. Components in Blazor are formally referred to as *Razor components*, informally as *Blazor components*. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with [IntelliSense](/visualstudio/ide/using-intellisense) programming support in Visual Studio. + +Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component (`Counter.razor`) that displays a dialog and processes an event when the user selects a button: + +```razor +Counter + +

Counter

+ +

Current count: @currentCount

+ + + +@code { + private int currentCount = 0; + + private void IncrementCount() + { + currentCount++; + } +} +``` + +Components render into an in-memory representation of the browser's [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) called a *render tree*, which is used to update the UI in a flexible and efficient way. :::moniker range=">= aspnetcore-8.0" @@ -73,33 +107,16 @@ Blazor Web Apps also support interactivity with client rendering that relies on When running Blazor on WebAssembly, code can access the full functionality of the browser via JavaScript. .NET code runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine. -After rendering is complete, interactivity on the client can adopt either or both of the following techniques, even in the same page: - -* UI updates and JavaScript interop calls handled over a SignalR connection. The runtime stays on the server and handles: - * Executing the app's C# code. - * UI events from the browser that are sent to the server. - * Applying UI updates to a rendered component that are sent back by the server. -* Rich interactivity and UI updates handled by a .NET runtime running in the browser on WebAssembly. - * C# code files and Razor files are compiled into .NET assemblies. - * The assemblies and the [.NET runtime](/dotnet/framework/get-started/overview) are downloaded to the browser. - * Blazor bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls. - Blazor apps can entirely target running on WebAssembly in the browser without the involvement of a server. For a *standalone Blazor WebAssembly app*, assets are deployed as static files to a web server or service capable of serving static content to clients. ## Build a native client app with Blazor Hybrid -*Blazor Hybrid* uses Blazor in a native client app with a blend of native and web technologies. Code runs natively in the .NET process and renders web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps encompass the following technologies: +*Blazor Hybrid* enables using Razor components in a native client app with a blend of native and web technologies for web, mobile, and desktop platforms. Code runs natively in the .NET process and renders web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps are built with [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui), which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. -* [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui): A cross-platform framework for creating native mobile and desktop apps with C# and XAML. -* [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/): A UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. -* [Windows Forms](/dotnet/desktop/winforms/overview/): A UI framework that creates rich desktop client apps for Windows. The Windows Forms development platform supports a broad set of app development features, including controls, graphics, data binding, and user input. +The Blazor Hybrid also supports [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/) and [Windows Forms](/dotnet/desktop/winforms/overview/) for app modernization efforts when you need to transition apps from earlier technology to .NET MAUI. :::moniker-end - - - - :::moniker range="< aspnetcore-8.0" ## Blazor Server @@ -176,8 +193,6 @@ APIs that aren't applicable inside of a web browser (for example, accessing the :::moniker-end - - ## Next steps > [!div class="nextstepaction"] From 2b948bf1de2a1829ca3e76286e93c52437b539f9 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 10:39:58 -0400 Subject: [PATCH 4/8] Updates --- aspnetcore/blazor/index.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index a69be3c36301..8b1280f816ad 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -101,18 +101,17 @@ Blazor Web Apps provide a component-based architecture with server-side renderin Blazor Web Apps can deliver UI to the browser fast by statically rendering HTML content from the server in response to requests. The page loads fast because UI rendering is performed quickly on the server without the need to download a large JavaScript bundle. Blazor can also further improve the user experience with various progressive enhancements to server rendering, such as enhanced navigation with form posts and streaming rendering of asynchronously-generated content. -Blazor also supports *interactive* server rendering, where UI interactions are handled from the server over a real-time connection with the browser. Interactive server rendering enables a rich user experience like one would expect from a client app but without the need to create API endpoints to access server resources. +Blazor supports *interactive* server rendering, where UI interactions are handled from the server over a real-time connection with the browser. Interactive server rendering enables a rich user experience like one would expect from a client app but without the need to create API endpoints to access server resources. +Blazor Web Apps support interactivity with client rendering that relies on a .NET runtime built with [WebAssembly](https://webassembly.org) that you can download with your app. When running Blazor on WebAssembly, your .NET code can access the full functionality of the browser and interop with JavaScript. Your .NET code runs in the browser's security sandbox with the protections that the sandbox provides against malicious actions on the client machine. -Blazor Web Apps also support interactivity with client rendering that relies on a .NET runtime built with [WebAssembly](https://webassembly.org) that you can download with your app. When running Blazor on WebAssembly, your .NET code can access the full functionality of the browser and interop with JavaScript. Your .NET code runs in the browser's security sandbox with the protections that the sandbox provides against malicious actions on the client machine. - -Blazor apps can also entirely target running on WebAssembly in the browser without the involvement of a server. For a *standalone Blazor WebAssembly app*, assets are deployed as static files to a web server or service capable of serving static content to clients. Once downloaded, standalone Blazor WebAssembly apps can be cached and executed offline as a Progressive Web App (PWA). +Blazor apps can entirely target running on WebAssembly in the browser without the involvement of a server. For a *standalone Blazor WebAssembly app*, assets are deployed as static files to a web server or service capable of serving static content to clients. Once downloaded, standalone Blazor WebAssembly apps can be cached and executed offline as a Progressive Web App (PWA). ## Build a native client app with Blazor Hybrid *Blazor Hybrid* enables using Razor components in a native client app with a blend of native and web technologies for web, mobile, and desktop platforms. Code runs natively in the .NET process and renders web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps are built with [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui), which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. -The Blazor Hybrid also supports [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/) and [Windows Forms](/dotnet/desktop/winforms/overview/) for app modernization efforts when you need to transition apps from earlier technology to .NET MAUI. +The Blazor Hybrid supports [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/) and [Windows Forms](/dotnet/desktop/winforms/overview/) to transition apps from earlier technology to .NET MAUI. :::moniker-end From 515fef5a10f16e8e11ee8b15aa39533922c8a643 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 10:51:46 -0400 Subject: [PATCH 5/8] Updates --- aspnetcore/blazor/index.md | 18 +++++++++++------- aspnetcore/release-notes/aspnetcore-3.0.md | 2 +- aspnetcore/tutorials/choose-web-ui.md | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index 8b1280f816ad..5235d0218512 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -26,32 +26,36 @@ Blazor is a framework for building interactive client-side web UI with [.NET](/d :::moniker-end + + + + + + + :::moniker range=">= aspnetcore-6.0" -* Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com). +* Create rich interactive UIs using [C#](/dotnet/csharp/). * Share server-side and client-side app logic written in .NET. * Render the UI as HTML and CSS for wide browser support, including mobile browsers. -* Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index). * Build hybrid desktop and mobile apps with .NET and Blazor. :::moniker-end :::moniker range="< aspnetcore-6.0" -* Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com). +* Create rich interactive UIs using [C#](/dotnet/csharp/). * Share server-side and client-side app logic written in .NET. * Render the UI as HTML and CSS for wide browser support, including mobile browsers. -* Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index). :::moniker-end Using .NET for client-side web development offers the following advantages: -* Write code in C# instead of JavaScript. +* Write code in C#, which can improve productivity in app development and maintenance. * Leverage the existing .NET ecosystem of [.NET libraries](/dotnet/standard/class-libraries). -* Share app logic across server and client. * Benefit from .NET's performance, reliability, and security. -* Stay productive on Windows, Linux, or macOS with a development environment, such as [Visual Studio](https://visualstudio.microsoft.com/) or [Visual Studio Code](https://code.visualstudio.com/). +* Stay productive on Windows, Linux, or macOS with a development environment, such as [Visual Studio](https://visualstudio.microsoft.com/) or [Visual Studio Code](https://code.visualstudio.com/). Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index). * Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use. > [!NOTE] diff --git a/aspnetcore/release-notes/aspnetcore-3.0.md b/aspnetcore/release-notes/aspnetcore-3.0.md index 640bd7cd5df5..7da47f4061cc 100644 --- a/aspnetcore/release-notes/aspnetcore-3.0.md +++ b/aspnetcore/release-notes/aspnetcore-3.0.md @@ -15,7 +15,7 @@ This article highlights the most significant changes in ASP.NET Core 3.0 with li Blazor is a new framework in ASP.NET Core for building interactive client-side web UI with .NET: -* Create rich interactive UIs using C# instead of JavaScript. +* Create rich interactive UIs using C#. * Share server-side and client-side app logic written in .NET. * Render the UI as HTML and CSS for wide browser support, including mobile browsers. diff --git a/aspnetcore/tutorials/choose-web-ui.md b/aspnetcore/tutorials/choose-web-ui.md index b62331a9ad53..23b617e14707 100644 --- a/aspnetcore/tutorials/choose-web-ui.md +++ b/aspnetcore/tutorials/choose-web-ui.md @@ -113,7 +113,7 @@ Blazor is a framework for building interactive client-side web UI with [.NET](/d Using .NET for client-side web development offers the following advantages: -* Write code in C# instead of JavaScript. +* Write code in C#, which can improve productivity in app development and maintenance. * Leverage the existing .NET ecosystem of [.NET libraries](/dotnet/standard/class-libraries). * Share app logic across server and client. * Benefit from .NET's performance, reliability, and security. From 8f4148ce250e5700eac23222a1471607cce2b198 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 10:52:08 -0400 Subject: [PATCH 6/8] Updates --- aspnetcore/blazor/index.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index 5235d0218512..2779475a49bf 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -26,13 +26,6 @@ Blazor is a framework for building interactive client-side web UI with [.NET](/d :::moniker-end - - - - - - - :::moniker range=">= aspnetcore-6.0" * Create rich interactive UIs using [C#](/dotnet/csharp/). From 1cdaf3cb83b6e82fe1e5e7ed132977223f60e70d Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 10:55:30 -0400 Subject: [PATCH 7/8] Updates --- aspnetcore/blazor/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/index.md b/aspnetcore/blazor/index.md index 2779475a49bf..3032af89f0b6 100644 --- a/aspnetcore/blazor/index.md +++ b/aspnetcore/blazor/index.md @@ -67,7 +67,7 @@ Components are .NET C# classes built into [.NET assemblies](/dotnet/standard/ass The component class is usually written in the form of a [Razor](xref:mvc/views/razor) markup page with a `.razor` file extension. Components in Blazor are formally referred to as *Razor components*, informally as *Blazor components*. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with [IntelliSense](/visualstudio/ide/using-intellisense) programming support in Visual Studio. -Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component (`Counter.razor`) that displays a dialog and processes an event when the user selects a button: +Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component that increments a counter when the user selects a button. ```razor Counter From c95438d1021d7bee4e7e21a8ad66819fbd477fa9 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 27 Sep 2023 11:08:39 -0400 Subject: [PATCH 8/8] Remove Hosting model article links --- aspnetcore/blazor/hosting-models.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/aspnetcore/blazor/hosting-models.md b/aspnetcore/blazor/hosting-models.md index 5fe35d524e73..6e3a74965f44 100644 --- a/aspnetcore/blazor/hosting-models.md +++ b/aspnetcore/blazor/hosting-models.md @@ -437,11 +437,3 @@ Blazor Hybrid apps are native client apps that typically require an installer an To set a component's hosting model to Blazor Server or Blazor WebAssembly at compile-time or dynamically at runtime, you set its *render mode*. Render modes are fully explained and demonstrated in the article. We don't recommend that you jump from this article directly to the *Render modes* article without reading the content in the articles between these two articles. For example, render modes are more easily understood by looking at Razor component examples, but basic Razor component structure and function isn't covered until the article is reached. It's also helpful to learn about Blazor's project templates and tooling before working with the component examples in the *Render modes* article. :::moniker-end - -## Additional resources - -* [HTML](https://www.w3.org/html/) -* [WebAssembly](https://webassembly.org) -* [mono/mono GitHub repository](https://github.com/mono/mono) -* [C# Guide](/dotnet/csharp/) -*