You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -15,102 +15,98 @@ By [Daniel Roth](https://github.com/danroth27) and [Luke Latham](https://github.
15
15
16
16
*Welcome to Blazor!*
17
17
18
-
Blazor is a framework for building interactive client-side web UI with .NET:
18
+
Blazor is a framework for building interactive client-side web UI with [.NET](/dotnet/standard/tour):
19
19
20
-
* Create rich interactive UIs using C# instead of JavaScript.
20
+
* Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com).
21
21
* Share server-side and client-side app logic written in .NET.
22
22
* Render the UI as HTML and CSS for wide browser support, including mobile browsers.
23
23
* Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index).
24
24
25
25
Using .NET for client-side web development offers the following advantages:
26
26
27
27
* Write code in C# instead of JavaScript.
28
-
* Leverage the existing .NET ecosystem of .NET libraries.
28
+
* Leverage the existing .NET ecosystem of [.NET libraries](/dotnet/standard/class-libraries).
29
29
* Share app logic across server and client.
30
30
* Benefit from .NET's performance, reliability, and security.
31
-
* Stay productive with Visual Studio on Windows, Linux, and macOS.
31
+
* Stay productive with [Visual Studio](https://visualstudio.microsoft.com) on Windows, Linux, and macOS.
32
32
* Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.
33
33
34
34
## Components
35
35
36
36
Blazor apps are based on *components*. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.
37
37
38
-
Components are .NET classes built into .NET assemblies that:
38
+
Components are .NET C# classes built into [.NET assemblies](/dotnet/standard/assembly/) that:
39
39
40
40
* Define flexible UI rendering logic.
41
41
* Handle user events.
42
42
* Can be nested and reused.
43
43
* Can be shared and distributed as [Razor class libraries](xref:razor-pages/ui-class) or [NuGet packages](/nuget/what-is-nuget).
44
44
45
-
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*. 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) support. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.
45
+
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*. 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. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.
46
46
47
-
The following Razor markup demonstrates a component (`Dialog.razor`), which can be nested within another component:
47
+
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:
48
48
49
49
```razor
50
-
<div>
51
-
<h1>@Title</h1>
52
-
53
-
@ChildContent
54
-
55
-
<button @onclick="OnYes">Yes!</button>
50
+
<div class="card" style="width:22rem">
51
+
<div class="card-body">
52
+
<h3 class="card-title">@Title</h3>
53
+
<p class="card-text">@ChildContent</p>
54
+
<button @onclick="OnYes">Yes!</button>
55
+
</div>
56
56
</div>
57
57
58
58
@code {
59
59
[Parameter]
60
-
public string Title { get; set; }
60
+
public RenderFragment ChildContent { get; set; }
61
61
62
62
[Parameter]
63
-
public RenderFragment ChildContent { get; set; }
63
+
public string Title { get; set; }
64
64
65
65
private void OnYes()
66
66
{
67
-
Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
67
+
Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
68
68
}
69
69
}
70
70
```
71
71
72
-
The dialog's body content (`ChildContent`) and title (`Title`) are provided by the component that uses this component in its UI. `OnYes` is a C# method triggered by the button's `onclick` event.
73
-
74
-
Blazor uses natural HTML tags for UI composition. HTML elements specify components, and a tag's attributes pass values to a component's properties.
75
-
76
-
In the following example, the `Index` component uses the `Dialog` component. `ChildContent` and `Title` are set by the attributes and content of the `<Dialog>` element.
72
+
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.
77
73
78
-
`Pages/Index.razor`:
74
+
The `Dialog` component is nested within another component using an HTML tag. In the following example, the `Index` component (`Pages/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 `<Dialog>` 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.
79
75
80
76
```razor
81
77
@page "/"
82
78
83
79
<h1>Hello, world!</h1>
84
80
85
-
Welcome to your new app.
81
+
<p>
82
+
Welcome to your new app.
83
+
</p>
86
84
87
-
<Dialog Title="Blazor">
85
+
<Dialog Title="Learn More">
88
86
Do you want to <i>learn more</i> about Blazor?
89
87
</Dialog>
90
88
```
91
89
92
-
The dialog is rendered when the parent (`Pages/Index.razor`) is accessed in a browser:
90
+
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:
93
91
94
-
92
+
95
93
96
-
When this component is used in the app, IntelliSense in [Visual Studio](/visualstudio/ide/using-intellisense) and [Visual Studio Code](https://code.visualstudio.com/docs/editor/intellisense) speeds development with syntax and parameter completion.
97
-
98
-
Components render into an in-memory representation of the browser's Document Object Model (DOM) called a *render tree*, which is used to update the UI in a flexible and efficient way.
94
+
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.
99
95
100
96
## Blazor WebAssembly
101
97
102
-
Blazor WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor WebAssembly uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.
98
+
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. Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly works in all modern web browsers, including mobile browsers.
103
99
104
100
Running .NET code inside web browsers is made possible by [WebAssembly](https://webassembly.org) (abbreviated `wasm`). 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.
105
101
106
-
WebAssembly code can access the full functionality of the browser via JavaScript, called *JavaScript interoperability* (or *JavaScript interop*). .NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.
102
+
WebAssembly code can access the full functionality of the browser via JavaScript, called *JavaScript interoperability*, often shortened to *JavaScript interop* or *JS interop*. .NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.
107
103
108
104
109
105
110
106
When a Blazor WebAssembly app is built and run in a browser:
111
107
112
108
* C# code files and Razor files are compiled into .NET assemblies.
113
-
* The assemblies and the .NET runtime are downloaded to the browser.
109
+
* The assemblies and the [.NET runtime](/dotnet/framework/get-started/overview) are downloaded to the browser.
114
110
* Blazor WebAssembly 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.
115
111
116
112
The size of the published app, its *payload size*, is a critical performance factor for an app's useability. 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:
@@ -133,32 +129,34 @@ The size of the published app, its *payload size*, is a critical performance fac
133
129
134
130
## Blazor Server
135
131
136
-
Blazor decouples component rendering logic from how UI updates are applied. Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a [SignalR](xref:signalr/introduction) connection.
132
+
Blazor decouples component rendering logic from how UI updates are applied. *Blazor Server* provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a [SignalR](xref:signalr/introduction) connection.
133
+
134
+
The runtime handles:
137
135
138
-
The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.
136
+
* Sending UI events from the browser to the server.
137
+
* Applying UI updates to the rendered component that are sent back by the server.
139
138
140
139
The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.
141
140
142
141
143
142
144
143
## JavaScript interop
145
144
146
-
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, and JavaScript code can call into C# code. For more information, see the following articles:
147
-
148
-
*<xref:blazor/call-javascript-from-dotnet>
149
-
*<xref:blazor/call-dotnet-from-javascript>
145
+
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/call-javascript-from-dotnet), and JavaScript code can [call into C# code](xref:blazor/call-dotnet-from-javascript).
150
146
151
147
## Code sharing and .NET Standard
152
148
153
-
Blazor implements [.NET Standard 2.1](/dotnet/standard/net-standard), which enables Blazor projects to reference libraries that conform to .NET Standard 2.1 or earlier specifications. .NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.
149
+
Blazor implements the [.NET Standard](/dotnet/standard/net-standard), which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.
154
150
155
151
APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a <xref:System.PlatformNotSupportedException>.
0 commit comments