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
A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. These scenarios are called *JavaScript interoperability* (*JS interop*).
19
17
20
18
This article covers invoking .NET methods from JavaScript. For information on how to call JavaScript functions from .NET, see <xref:blazor/call-javascript-from-dotnet>.
A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. These scenarios are called *JavaScript interoperability* (*JS interop*).
19
17
20
18
This article covers invoking JavaScript functions from .NET. For information on how to call .NET methods from JavaScript, see <xref:blazor/call-dotnet-from-javascript>.
[Blazor WebAssembly](xref:blazor/hosting-models#blazor-webassembly) apps call web APIs using a preconfigured `HttpClient` service. Compose requests, which can include JavaScript [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) options, using Blazor JSON helpers or with <xref:System.Net.Http.HttpRequestMessage>. The `HttpClient` service in Blazor WebAssembly apps is focused on making requests back to the server of origin. The guidance in this topic only pertains to Blazor WebAssembly apps.
19
17
20
18
[Blazor Server](xref:blazor/hosting-models#blazor-server) apps call web APIs using <xref:System.Net.Http.HttpClient> instances, typically created using <xref:System.Net.Http.IHttpClientFactory>. The guidance in this topic doesn't pertain to Blazor Server apps. When developing Blazor Server apps, follow the guidance in <xref:fundamentals/http-requests>.
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,8 +70,8 @@ Razor components in Blazor apps extensively use Razor syntax. If you aren't fami
70
70
71
71
When accessing the content on Razor syntax, pay special attention to the following sections:
72
72
73
-
*[Directives](xref:mvc/views/razor#directives):`@`-prefixed reserved keywords that typically change the way component markup is parsed or function.
74
-
*[Directive attributes](xref:mvc/views/razor#directive-attributes):`@`-prefixed reserved keywords that typically change the way component elements are parsed or function.
73
+
*[Directives](xref:mvc/views/razor#directives)–`@`-prefixed reserved keywords that typically change the way component markup is parsed or function.
74
+
*[Directive attributes](xref:mvc/views/razor#directive-attributes)–`@`-prefixed reserved keywords that typically change the way component elements are parsed or function.
75
75
76
76
## Static assets
77
77
@@ -971,7 +971,7 @@ Similarly, SVG images are supported in the CSS rules of a stylesheet file (*.css
971
971
}
972
972
```
973
973
974
-
However, inline SVG markup isn't supported in all scenarios. If you place an `<svg>` tag directly into a component file (*.razor*), basic image rendering is supported but many advanced scenarios aren't yet supported. For example, `<use>` tags aren't currently respected, and `@bind` can't be used with some SVG tags. We expect to address these limitations in a future release.
974
+
However, inline SVG markup isn't supported in all scenarios. If you place an `<svg>` tag directly into a component file (*.razor*), basic image rendering is supported but many advanced scenarios aren't yet supported. For example, `<use>` tags aren't currently respected, and `@bind` can't be used with some SVG tags. For more information, see [SVG support in Blazor (dotnet/aspnetcore #18271)](https://github.com/dotnet/aspnetcore/issues/18271).
Blazor WebAssembly apps can be debugged using the browser dev tools in Chromium-based browsers (Edge/Chrome). Alternatively you can debug your app using Visual Studio or Visual Studio Code.
19
17
20
18
Available scenarios include:
@@ -47,8 +45,6 @@ Debugging requires either of the following browsers:
47
45
48
46
## Enable debugging for Visual Studio and Visual Studio Code
49
47
50
-
Debugging is enabled automatically for new projects that are created using the ASP.NET Core 3.2 Preview 3 or later Blazor WebAssembly project template ([current release is 3.2 Preview 4](xref:blazor/get-started)).
51
-
52
48
To enable debugging for an existing Blazor WebAssembly app, update the *launchSettings.json* file in the startup project to include the following `inspectUri` property in each launch profile:
53
49
54
50
```json
@@ -68,7 +64,6 @@ The `inspectUri` property:
68
64
69
65
To debug a Blazor WebAssembly app in Visual Studio:
70
66
71
-
1. Ensure you have [installed the latest preview release of Visual Studio 2019 16.6](https://visualstudio.com/preview) (Preview 2 or later).
72
67
1. Create a new ASP.NET Core hosted Blazor WebAssembly app.
73
68
1. Press <kbd>F5</kbd> to run the app in the debugger.
74
69
1. Set a breakpoint in *Counter.razor* in the `IncrementCount` method.
@@ -112,7 +107,7 @@ To debug a Blazor WebAssembly app in Visual Studio Code:
112
107
113
108
* If you get the following notification that additional setup is required to enable debugging, confirm that you have the correct extensions installed and JavaScript preview debugging enabled and then reload the window:
Blazor supports [dependency injection (DI)](xref:fundamentals/dependency-injection). Apps can use built-in services by injecting them into components. Apps can also define and register custom services and make them available throughout the app via DI.
19
17
20
18
DI is a technique for accessing services configured in a central location. This can be useful in Blazor apps to:
@@ -142,7 +140,7 @@ Use multiple `@inject` statements to inject different services.
142
140
143
141
The following example shows how to use `@inject`. The service implementing `Services.IDataAccess` is injected into the component's property `DataRepository`. Note how the code is only using the `IDataAccess` abstraction:
Internally, the generated property (`DataRepository`) uses the `InjectAttribute` attribute. Typically, this attribute isn't used directly. If a base class is required for components and injected properties are also required for the base class, manually add the `InjectAttribute`:
To get started with Blazor, follow the guidance for your choice of tooling:
19
17
20
18
# [Visual Studio](#tab/visual-studio)
21
19
22
-
1. To create Blazor Server apps, install the latest version of [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) with the **ASP.NET and web development** workload.
23
-
24
-
To create Blazor Server and Blazor WebAssembly apps, install the latest preview of [Visual Studio 2019](https://visualstudio.microsoft.com/vs/preview/) with the **ASP.NET and web development** workload.
25
-
26
-
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
27
-
28
-
1. Install the Blazor WebAssembly Preview template by running the following command:
29
-
30
-
```dotnetcli
31
-
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
32
-
```
20
+
1. Install the latest version of [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) with the **ASP.NET and web development** workload.
33
21
34
22
1. Create a new project.
35
23
36
24
1. Select **Blazor App**. Select **Next**.
37
25
38
26
1. Provide a project name in the **Project name** field or accept the default project name. Confirm the **Location** entry is correct or provide a location for the project. Select **Create**.
39
27
40
-
1. For a Blazor WebAssembly experience (Visual Studio 16.6 Preview 2 or later), choose the **Blazor WebAssembly App** template. For a Blazor Server experience (Visual Studio 16.4 or later), choose the **Blazor Server App** template. Select **Create**.
28
+
1. For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App** template. For a Blazor Server experience, choose the **Blazor Server App** template. Select **Create**.
29
+
30
+
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
41
31
42
32
1. Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> to run the app.
43
33
44
34
# [Visual Studio Code](#tab/visual-studio-code)
45
35
46
36
1. Install the [.NET Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core/3.1).
47
37
48
-
1. Optionally install the [Blazor WebAssembly](xref:blazor/hosting-models#blazor-webassembly) preview template by running the following command:
49
-
50
-
```dotnetcli
51
-
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
52
-
```
53
-
54
-
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
55
-
56
-
> [!NOTE]
57
-
> The [.NET Core SDK version 3.1.201 or later](https://dotnet.microsoft.com/download/dotnet-core/3.1) is **required** to use the 3.2 Preview Blazor WebAssembly template. Confirm the installed .NET Core SDK version by running `dotnet --version` in a command shell.
58
-
59
38
1. Install [Visual Studio Code](https://code.visualstudio.com/).
60
39
61
40
1. Install the latest [C# for Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) and the [JavaScript Debugger (Nightly)](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly) extension with `debug.javascript.usePreview` set to `true`.
62
41
63
-
1. For a Blazor Server experience, execute the following command in a command shell:
42
+
1. For a Blazor WebAssembly experience, execute the following command in a command shell:
64
43
65
44
```dotnetcli
66
-
dotnet new blazorserver -o WebApplication1
45
+
dotnet new blazorwasm -o WebApplication1
67
46
```
68
47
69
-
For a Blazor WebAssembly experience, execute the following command in a command shell:
48
+
For a Blazor Server experience, execute the following command in a command shell:
70
49
71
50
```dotnetcli
72
-
dotnet new blazorwasm -o WebApplication1
51
+
dotnet new blazorserver -o WebApplication1
73
52
```
74
53
54
+
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
55
+
75
56
1. Open the *WebApplication1* folder in Visual Studio Code.
76
57
77
58
1. The IDE requests that you add assets to build and debug the project. Select **Yes**.
78
59
79
-
1. With Blazor Server, run the app using the Visual Studio Code debugger.
80
-
81
-
With Blazor WebAssembly, start the app using the **.NET Core Launch (Blazor Standalone)** launch configuration and then start the browser using the **.NET Core Debug Blazor Web Assembly in Chrome** launch configuration (requires Chrome). For more information, see <xref:blazor/debug#visual-studio-code>.
82
-
83
-
1. In a browser, navigate to `https://localhost:5001`.
60
+
1. Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> to run the app.
84
61
85
62
# [Visual Studio for Mac](#tab/visual-studio-mac)
86
63
87
-
> [!NOTE]
88
-
> Blazor Server is supported in Visual Studio for Mac 8.4 or later, and Blazor WebAssembly support is included in Visual Studio for Mac 8.6 or later.
89
-
90
64
1. Install [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/).
91
65
92
-
1. In Visual Studio for Mac versions prior to 8.6:
93
-
94
-
* Select **File** > **New Solution** or create a **New** project from the **Start Window**.
95
-
96
-
* In the sidebar, select **.NET Core** > **App**.
97
-
98
-
* Select the **Blazor Server App** template. Select **Next**.
99
-
100
-
* Confirm the following configurations:
101
-
102
-
***Target Framework** set to **.NET Core 3.1**.
103
-
***Authentication** set to **No Authentication**.
104
-
105
-
Select **Next**.
66
+
1. Select **File** > **New Solution** or create a **New** project from the **Start Window**.
106
67
107
-
*In the **Project Name**field, name the app `WebApplication1`. Select **Create**.
68
+
1.In the sidebar, select **Web and Console**> **App**.
108
69
109
-
* Select **Run** > **Start Without Debugging**to run the app *without the debugger*. Debugging isn't supported at this time.
70
+
For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App**template. For a Blazor Server experience, choose the **Blazor Server App** template. Select **Next**.
110
71
111
-
In the preview of Visual Studio for Mac version 8.6, which uses the [Preview channel](/visualstudio/mac/update):
112
-
113
-
* Select **File** > **New Solution** or create a **New** project from the **Start Window**.
114
-
115
-
* In the sidebar, select **Web and Console** > **App**.
116
-
117
-
* For a Blazor WebAssembly experience, choose the **Blazor WebAssembly App** template. For a Blazor Server experience, choose the **Blazor Server App** template. Select **Next**.
118
-
119
-
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
72
+
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
120
73
121
-
* Confirm the following configurations:
74
+
1. Confirm the following configurations:
122
75
123
-
***Target Framework** set to **.NET Core 3.1**.
124
-
***Authentication** set to **No Authentication**.
76
+
***Target Framework** set to **.NET Core 3.1**.
77
+
***Authentication** set to **No Authentication**.
125
78
126
-
Select **Next**.
79
+
Select **Next**.
127
80
128
-
* In the **Project Name** field, name the app `WebApplication1`. Select **Create**.
81
+
1. In the **Project Name** field, name the app `WebApplication1`. Select **Create**.
129
82
130
-
* Select **Run** > **Start Without Debugging** to run the app *without the debugger*. Run the app with **Run** > **Start Debugging** or the Run (▶) button to run the app *with the debugger*.
83
+
1. Select **Run** > **Start Without Debugging** to run the app *without the debugger*. Run the app with **Run** > **Start Debugging** or the Run (▶) button to run the app *with the debugger*.
131
84
132
-
If a prompt appears to trust the development certificate, trust the certificate and continue. The user and keychain passwords are required to trust the certificate.
85
+
If a prompt appears to trust the development certificate, trust the certificate and continue. The user and keychain passwords are required to trust the certificate.
133
86
134
87
# [.NET Core CLI](#tab/netcore-cli/)
135
88
136
89
1. Install the [.NET Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core/3.1).
137
90
138
-
1. Optionally install the Blazor WebAssembly preview template by running the following command:
139
-
140
-
```dotnetcli
141
-
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
142
-
```
143
-
144
-
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
145
-
146
-
> [!NOTE]
147
-
> The [.NET Core SDK version 3.1.201 or later](https://dotnet.microsoft.com/download/dotnet-core/3.1) is **required** to use the 3.2 Preview Blazor WebAssembly template. Confirm the installed .NET Core SDK version by running `dotnet --version` in a command shell.
148
-
149
-
1. For a Blazor Server experience, execute the following commands in a command shell:
91
+
1. For a Blazor WebAssembly experience, execute the following commands in a command shell:
150
92
151
93
```dotnetcli
152
-
dotnet new blazorserver -o WebApplication1
94
+
dotnet new blazorwasm -o WebApplication1
153
95
cd WebApplication1
154
96
dotnet run
155
97
```
156
98
157
-
For a Blazor WebAssembly experience, execute the following commands in a command shell:
99
+
For a Blazor Server experience, execute the following commands in a command shell:
158
100
159
101
```dotnetcli
160
-
dotnet new blazorwasm -o WebApplication1
102
+
dotnet new blazorserver -o WebApplication1
161
103
cd WebApplication1
162
104
dotnet run
163
105
```
164
106
107
+
For information on the two Blazor hosting models, *Blazor WebAssembly* and *Blazor Server*, see <xref:blazor/hosting-models>.
108
+
165
109
1. In a browser, navigate to `https://localhost:5001`.
166
110
167
111
---
@@ -216,7 +160,10 @@ Run the app. The `Index` component has its own counter that increments by ten ea
0 commit comments