From 15302c429e6c1d2e5cfd51711a7791d319e803df Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Tue, 18 Jan 2022 06:29:59 -0600
Subject: [PATCH 1/2] Improve JavaScript colocation guidance
---
.../call-dotnet-from-javascript.md | 23 +++++-----
.../call-javascript-from-dotnet.md | 1 +
aspnetcore/includes/js-collocation.md | 45 ++++++++++++++-----
3 files changed, 48 insertions(+), 21 deletions(-)
diff --git a/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md b/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md
index bbb8c92fe9e7..00e50bcd9de6 100644
--- a/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md
+++ b/aspnetcore/blazor/javascript-interoperability/call-dotnet-from-javascript.md
@@ -295,6 +295,17 @@ For information on isolating scripts in [JS modules](https://developer.mozilla.o
> [!WARNING]
> Don't place a `
+
}
```
+ When the app is published, the framework automatically moves the script to the web root. In the preceding example, the script is moved to `bin\Release\{TARGET FRAMEWORK MONIKER}\publish\wwwroot\Pages\Index.cshtml.js`, where the `{TARGET FRAMEWORK MONIKER}` placeholder is the [Target Framework Moniker (TFM)](/dotnet/standard/frameworks). No change is required to the script's relative URL in the `Index` page.
+
+ Blazor example:
+
+ A JavaScript file for the `Index` component is placed in the `Pages` folder (`Pages/Index.razor.js`) next to the `Index` component (`Pages/Index.razor`). In the `Index` component, the script is referenced at the path in the `Pages` folder. The following example is based on an example shown in the article.
+
+ `Pages/Index.razor.js`:
+
+ ```javascript
+ export function showPrompt(message) {
+ return prompt(message, 'Type anything here');
+ }
+ ```
+
+ In the `OnAfterRenderAsync` method of the `Index` component (`Pages/Index.razor`):
+
+ ```razor
+ module = await JS.InvokeAsync(
+ "import", "./Pages/Index.razor.js");
+ ```
+
+ When the app is published, the framework automatically moves the script to the web root. In the preceding example, the script is moved to `bin\Release\{TARGET FRAMEWORK MONIKER}\publish\wwwroot\Pages\Index.razor.js`, where the `{TARGET FRAMEWORK MONIKER}` placeholder is the [Target Framework Moniker (TFM)](/dotnet/standard/frameworks). No change is required to the script's relative URL in the `Index` component.
+
* For scripts provided by a Razor class library (RCL):
- `_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}`
+ `_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js`
* The `{PACKAGE ID}` placeholder is the RCL's package identifier (or library name for a class library referenced by the app).
* The `{PATH}` placeholder is the path to the page, view, or component. If a Razor component is located at the root of the RCL, the path segment isn't included.
* The `{PAGE, VIEW, OR COMPONENT}` placeholder is the page, view, or component.
- * The `{EXTENSION}` placeholder matches the extension of page, view, or component, either `razor` or `cshtml`, followed by `.js`.
+ * The `{EXTENSION}` placeholder matches the extension of page, view, or component, either `razor` or `cshtml`.
In the following Blazor app example:
From 9c6b0db31b105ad812ee2f3a8db788d151e2fdff Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Tue, 18 Jan 2022 06:39:02 -0600
Subject: [PATCH 2/2] Updates
---
aspnetcore/includes/js-collocation.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md
index 54bb9266b254..22dad586907e 100644
--- a/aspnetcore/includes/js-collocation.md
+++ b/aspnetcore/includes/js-collocation.md
@@ -22,7 +22,7 @@ Collocated JS files are publicly addressable using the ***path to the file in th
Razor Pages example:
- A JavaScript file for the `Index` page is placed in the `Pages` folder (`Pages/Index.cshtml.js`) next to the `Index` page (`Pages/Index.cshtml`). In the `Index` page, the script is referenced at the path in the `Pages` folder:
+ A JS file for the `Index` page is placed in the `Pages` folder (`Pages/Index.cshtml.js`) next to the `Index` page (`Pages/Index.cshtml`). In the `Index` page, the script is referenced at the path in the `Pages` folder:
```razor
@section Scripts {
@@ -34,7 +34,7 @@ Collocated JS files are publicly addressable using the ***path to the file in th
Blazor example:
- A JavaScript file for the `Index` component is placed in the `Pages` folder (`Pages/Index.razor.js`) next to the `Index` component (`Pages/Index.razor`). In the `Index` component, the script is referenced at the path in the `Pages` folder. The following example is based on an example shown in the article.
+ A JS file for the `Index` component is placed in the `Pages` folder (`Pages/Index.razor.js`) next to the `Index` component (`Pages/Index.razor`). In the `Index` component, the script is referenced at the path in the `Pages` folder. The following example is based on an example shown in the article.
`Pages/Index.razor.js`: