From dd95090f1f74eb4c1cd517007dddb5f2e98329dd Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 07:14:28 -0500 Subject: [PATCH 01/15] JS file collocation with pages/views/components --- .../javascript-interoperability/index.md | 38 ++++++++++++++++--- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index b910958c7f64..948fe5212ba8 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -40,7 +40,8 @@ Load JavaScript (JS) code using any of the following approaches: * [Load a script in `` markup](#load-a-script-in-head-markup) (*Not generally recommended*) * [Load a script in `` markup](#load-a-script-in-body-markup) -* [Load a script from an external JS file (`.js`)](#load-a-script-from-an-external-js-file-js) +* [Load a script from an external JavaScript file (`.js`) collocated with a component](#load-a-script-from-an-external-js-file-js-collocated-with-a-component) +* [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-js-file-js) * [Inject a script after Blazor starts](#inject-a-script-after-blazor-starts) > [!WARNING] @@ -53,7 +54,7 @@ Load JavaScript (JS) code using any of the following approaches: *The approach in this section isn't generally recommended.* -Place the script (``) in the `` element markup of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +Place the JavaScript (JS) tags (``) in the `` element markup of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): ```html @@ -74,7 +75,7 @@ Loading JS from the `` isn't the best approach for the following reasons: ### Load a script in `` markup -Place the script (``) inside the closing `` element markup of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): +Place the JavaScript (JS) tags (``) inside the closing `` element markup of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): ```html @@ -91,9 +92,36 @@ Place the script (``) inside the closing `` element The `{webassembly|server}` placeholder in the preceding markup is either `webassembly` for a Blazor WebAssembly app (`blazor.webassembly.js`) or `server` for a Blazor Server app (`blazor.server.js`). -### Load a script from an external JS file (`.js`) +### Load a script from an external JavaScript file (`.js`) collocated with a component -Place the script (``) with a script `src` path inside the closing `` tag after the Blazor script reference. +Collocate JavaScript (JS) files with Razor components using the `.razor.js` filename extension convention. Collocation of script files is a convenient way to organize JS code specific to components. Collocated JS files are publicly addressable using the path to the file in the project. + +[JS module](#javascript-isolation-in-javascript-modules) examples: + +* `Pages/{COMPONENT}.razor.js` for a scripts file in the app's `Pages` folder, where the `{COMPONENT}` placeholder is the name of the component. + + In the following example, scripts are loaded for the `Index` component (`Pages/Index.razor`): + + ```csharp + var module = await JS.InvokeAsync("import", + "./Pages/Index.razor.js"); + ``` + +* `_content/{PACKAGE ID}/Pages/{COMPONENT}.razor.js` for scripts provided by a [Razor class library (RCL)](xref:blazor/components/class-libraries). The `{PACKAGE ID}` placeholder is the RCL's package identifier, and the `{COMPONENT}` placeholder is the name of the component. + + In the following example, the RCL's package identifier is `AppJS`, and the scripts are loaded for the `Index` component (`Pages/Index.razor`): + + ```csharp + var module = await JS.InvokeAsync("import", + "_content/AppJS/Pages/Index.cshtml.js"); + ``` + +> [!NOTE] +> Collocation of JS is also supported for pages of Razor Pages apps and views of MVC apps using the `.cshtml.js` file extension convention. For more information, see XXXXXXXXXXXX. + +### Load a script from an external JavaScript file (`.js`) + +Place the JavaScript (JS) tags (``) with a script source (`src`) path inside the closing `` tag after the Blazor script reference. In `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server): From 435aaf09eda841de2f8cb0f6cc419b216eca62f9 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 07:32:54 -0500 Subject: [PATCH 02/15] Create js-collocation.md --- aspnetcore/includes/js-collocation.md | 53 +++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 aspnetcore/includes/js-collocation.md diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md new file mode 100644 index 000000000000..28c6d77010b3 --- /dev/null +++ b/aspnetcore/includes/js-collocation.md @@ -0,0 +1,53 @@ +--- +no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] +--- +Collocation of script files in the same folder as pages, views, or Razor components is a convenient way to organize JS code specific to components. Collocated JS files are publicly addressable using the path to the file in the project. + +Collocate JavaScript (JS) files using the following filename extension conventions: + +* Pages of Razor Pages apps: `.cshtml.js` +* Views of MVC apps: `.cshtml.js` +* Razor components of Blazor apps: `.razor.js` + +[JS module](#javascript-isolation-in-javascript-modules) examples: + +* `{Pages|Views}/{PAGE, VIEW, OR COMPONENT NAME}.{cshtml|razor}.js` for script files. + + * The `{Pages|Views}` placeholder is either `Pages` for the pages folder of a Razor Pages/Blazor app or `Views` for the views folder of an MVC app. + * The `{PAGE, VIEW, OR COMPONENT NAME}` placeholder is the name of the page, view, or component. + * The `{cshtml|razor}` placeholder is either `cshtml` for pages and views or `razor` for a component. + + In the following example, scripts are loaded for the `Index` component (`Pages/Index.razor`) of a Blazor app: + + ```csharp + var module = await JS.InvokeAsync("import", + "./Pages/Index.razor.js"); + ``` + + In the following example, scripts are loaded for the `Contact` view (`Views/Contact.cshtml`) of an MVC app: + + ```csharp + var module = await JS.InvokeAsync("import", + "./Views/Contact.cshtml.js"); + ``` + +* `_content/{PACKAGE ID}/{Pages|Views}/{PAGE, VIEW, OR COMPONENT NAME}.{cshtml|razor}.js` for scripts provided by a [Razor class library (RCL)](xref:blazor/components/class-libraries). + + * The `{PACKAGE ID}` placeholder is the RCL's package identifier. + * The `{Pages|Views}` placeholder is either `Pages` for the pages folder of a Razor Pages/Blazor app or `Views` for the views folder of an MVC app. + * The `{PAGE, VIEW, OR COMPONENT NAME}` placeholder is the name of the page, view, or component. + * The `{cshtml|razor}` placeholder is either `cshtml` for pages and views or `razor` for a component. + + In the following example, the RCL's package identifier is `AppJS`, and the scripts are loaded for the `Index` component (`Pages/Index.razor`) of a Blazor app: + + ```csharp + var module = await JS.InvokeAsync("import", + "_content/AppJS/Pages/Index.razor.js"); + ``` + + In the following example, the RCL's package identifier is `AppJS`, and the scripts are loaded for the `Contact` view (`Views/Contact.cshtml`) of an MVC app: + + ```csharp + var module = await JS.InvokeAsync("import", + "_content/AppJS/Views/Contact.cshtml.js"); + ``` From 7a3104ba03eee527f02bc08ff29c3c4b5648f8c4 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 07:37:09 -0500 Subject: [PATCH 03/15] Updates --- .../javascript-interoperability/index.md | 25 +------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index 948fe5212ba8..4ab3e95098dd 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -94,30 +94,7 @@ The `{webassembly|server}` placeholder in the preceding markup is either `webass ### Load a script from an external JavaScript file (`.js`) collocated with a component -Collocate JavaScript (JS) files with Razor components using the `.razor.js` filename extension convention. Collocation of script files is a convenient way to organize JS code specific to components. Collocated JS files are publicly addressable using the path to the file in the project. - -[JS module](#javascript-isolation-in-javascript-modules) examples: - -* `Pages/{COMPONENT}.razor.js` for a scripts file in the app's `Pages` folder, where the `{COMPONENT}` placeholder is the name of the component. - - In the following example, scripts are loaded for the `Index` component (`Pages/Index.razor`): - - ```csharp - var module = await JS.InvokeAsync("import", - "./Pages/Index.razor.js"); - ``` - -* `_content/{PACKAGE ID}/Pages/{COMPONENT}.razor.js` for scripts provided by a [Razor class library (RCL)](xref:blazor/components/class-libraries). The `{PACKAGE ID}` placeholder is the RCL's package identifier, and the `{COMPONENT}` placeholder is the name of the component. - - In the following example, the RCL's package identifier is `AppJS`, and the scripts are loaded for the `Index` component (`Pages/Index.razor`): - - ```csharp - var module = await JS.InvokeAsync("import", - "_content/AppJS/Pages/Index.cshtml.js"); - ``` - -> [!NOTE] -> Collocation of JS is also supported for pages of Razor Pages apps and views of MVC apps using the `.cshtml.js` file extension convention. For more information, see XXXXXXXXXXXX. +[!INCLUDE[](~/includes/js-collocation.md)] ### Load a script from an external JavaScript file (`.js`) From 7f037363ee3b06b0b0c0f4ce47a129701f29f2af Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 07:41:11 -0500 Subject: [PATCH 04/15] Updates --- aspnetcore/blazor/javascript-interoperability/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index 4ab3e95098dd..bd817a6667c0 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -40,8 +40,8 @@ Load JavaScript (JS) code using any of the following approaches: * [Load a script in `` markup](#load-a-script-in-head-markup) (*Not generally recommended*) * [Load a script in `` markup](#load-a-script-in-body-markup) -* [Load a script from an external JavaScript file (`.js`) collocated with a component](#load-a-script-from-an-external-js-file-js-collocated-with-a-component) -* [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-js-file-js) +* [Load a script from an external JavaScript file (`.js`) collocated with a component](#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component) +* [Load a script from an external JavaScript file (`.js`)](#load-a-script-from-an-external-javascript-file-js) * [Inject a script after Blazor starts](#inject-a-script-after-blazor-starts) > [!WARNING] From c7847390b2cd74d62bc68acbc356133d9c911bed Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:20:36 -0500 Subject: [PATCH 05/15] Updates --- aspnetcore/includes/js-collocation.md | 61 +++++++++++++-------------- 1 file changed, 29 insertions(+), 32 deletions(-) diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md index 28c6d77010b3..c00f4be8b4b1 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -1,53 +1,50 @@ --- no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] --- -Collocation of script files in the same folder as pages, views, or Razor components is a convenient way to organize JS code specific to components. Collocated JS files are publicly addressable using the path to the file in the project. +Collocation of JavaScript (JS) files in the same folder as pages, views, or Razor components is a convenient way to organize scripts in an app. -Collocate JavaScript (JS) files using the following filename extension conventions: +Collocate JS files using the following filename extension conventions: -* Pages of Razor Pages apps: `.cshtml.js` -* Views of MVC apps: `.cshtml.js` -* Razor components of Blazor apps: `.razor.js` +* Pages of Razor Pages apps and views of MVC apps: `.cshtml.js`. Examples: + * `Pages/Contact.cshtml.js` for the app's `Contact` page at `Pages/Contact.cshtml`. + * `Views/Home/Contact.cshtml.js` for the app's `Contact` view at `Views/Home/Contact.cshtml`. +* Razor components of Blazor apps: `.razor.js`. Example: `Pages/Index.razor.js` for the app's `Index` component at `Pages/Index.razor`. -[JS module](#javascript-isolation-in-javascript-modules) examples: +Collocated JS files are publicly addressable using the path to the file in the project: -* `{Pages|Views}/{PAGE, VIEW, OR COMPONENT NAME}.{cshtml|razor}.js` for script files. +* Pages, views, and components from a collocated scripts file in the app: - * The `{Pages|Views}` placeholder is either `Pages` for the pages folder of a Razor Pages/Blazor app or `Views` for the views folder of an MVC app. - * The `{PAGE, VIEW, OR COMPONENT NAME}` placeholder is the name of the page, view, or component. - * The `{cshtml|razor}` placeholder is either `cshtml` for pages and views or `razor` for a component. - - In the following example, scripts are loaded for the `Index` component (`Pages/Index.razor`) of a Blazor app: - - ```csharp - var module = await JS.InvokeAsync("import", - "./Pages/Index.razor.js"); - ``` + `{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js` + + * The `{PATH}` placeholder is the path to the page, view, or component. + * 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`. - In the following example, scripts are loaded for the `Contact` view (`Views/Contact.cshtml`) of an MVC app: + In the following example from a Razor Pages app, the script is collocated in the `Pages` folder with the `Contact` page (`Pages/Contact.cshtml`): - ```csharp - var module = await JS.InvokeAsync("import", - "./Views/Contact.cshtml.js"); + ```razor + @section Scripts { + + } ``` -* `_content/{PACKAGE ID}/{Pages|Views}/{PAGE, VIEW, OR COMPONENT NAME}.{cshtml|razor}.js` for scripts provided by a [Razor class library (RCL)](xref:blazor/components/class-libraries). +* For scripts provided by a Razor class library (RCL): + + `_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js` * The `{PACKAGE ID}` placeholder is the RCL's package identifier. - * The `{Pages|Views}` placeholder is either `Pages` for the pages folder of a Razor Pages/Blazor app or `Views` for the views folder of an MVC app. - * The `{PAGE, VIEW, OR COMPONENT NAME}` placeholder is the name of the page, view, or component. - * The `{cshtml|razor}` placeholder is either `cshtml` for pages and views or `razor` for a component. + * The `{PATH}` placeholder is the path to the page, view, or component. + * 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`. - In the following example, the RCL's package identifier is `AppJS`, and the scripts are loaded for the `Index` component (`Pages/Index.razor`) of a Blazor app: + In the following Blazor app example, the RCL's package identifier is `AppJS`, and a module's scripts are loaded for the `Index` component (`Pages/Index.razor`): ```csharp var module = await JS.InvokeAsync("import", "_content/AppJS/Pages/Index.razor.js"); ``` - In the following example, the RCL's package identifier is `AppJS`, and the scripts are loaded for the `Contact` view (`Views/Contact.cshtml`) of an MVC app: - - ```csharp - var module = await JS.InvokeAsync("import", - "_content/AppJS/Views/Contact.cshtml.js"); - ``` + For more information on RCLs, see the following articles: + + * + * From b637522f01e4b8c479da7c46012336ebd898ab5c Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:27:01 -0500 Subject: [PATCH 06/15] Updates --- aspnetcore/includes/js-collocation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md index c00f4be8b4b1..ccfacc22682a 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -6,9 +6,9 @@ Collocation of JavaScript (JS) files in the same folder as pages, views, or Razo Collocate JS files using the following filename extension conventions: * Pages of Razor Pages apps and views of MVC apps: `.cshtml.js`. Examples: - * `Pages/Contact.cshtml.js` for the app's `Contact` page at `Pages/Contact.cshtml`. - * `Views/Home/Contact.cshtml.js` for the app's `Contact` view at `Views/Home/Contact.cshtml`. -* Razor components of Blazor apps: `.razor.js`. Example: `Pages/Index.razor.js` for the app's `Index` component at `Pages/Index.razor`. + * `Pages/Contact.cshtml.js` for the `Contact` page of a Razor Pages app at `Pages/Contact.cshtml`. + * `Views/Home/Contact.cshtml.js` for the `Contact` view of an MVC app at `Views/Home/Contact.cshtml`. +* Razor components of Blazor apps: `.razor.js`. Example: `Pages/Index.razor.js` for the `Index` component at `Pages/Index.razor`. Collocated JS files are publicly addressable using the path to the file in the project: @@ -32,7 +32,7 @@ Collocated JS files are publicly addressable using the path to the file in the p `_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js` - * The `{PACKAGE ID}` placeholder is the RCL's package identifier. + * 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. * 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`. From 1019f06619f1c08ea37971fc1d9b7e9f0629a2a9 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:30:24 -0500 Subject: [PATCH 07/15] Updates --- aspnetcore/blazor/javascript-interoperability/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index bd817a6667c0..8fc7cd39fcca 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -96,6 +96,11 @@ The `{webassembly|server}` placeholder in the preceding markup is either `webass [!INCLUDE[](~/includes/js-collocation.md)] +For more information on RCLs, see the following articles: + +* +* + ### Load a script from an external JavaScript file (`.js`) Place the JavaScript (JS) tags (``) with a script source (`src`) path inside the closing `` tag after the Blazor script reference. From 36d7bc3822f8d24ef51849226383b774a47de80b Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:30:49 -0500 Subject: [PATCH 08/15] Updates --- aspnetcore/includes/js-collocation.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md index ccfacc22682a..b21c7fee31c5 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -43,8 +43,3 @@ Collocated JS files are publicly addressable using the path to the file in the p var module = await JS.InvokeAsync("import", "_content/AppJS/Pages/Index.razor.js"); ``` - - For more information on RCLs, see the following articles: - - * - * From 06b57a0f7cde29c6bd30ae4507604a079046c4c2 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:34:51 -0500 Subject: [PATCH 09/15] Updates --- aspnetcore/blazor/components/class-libraries.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 904b3d9a5d90..0b1f6c18dd2c 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -252,7 +252,7 @@ The distinction between using the `Link` component in a child component and plac * Can be modified by application state. A hard-coded `` HTML tag can't be modified by application state. * Is removed from the HTML `` when the parent component is no longer rendered. -## Create an RCL with static assets +## Create an RCL with static assets in the `wwwroot` folder An RCL's static assets are available to any app that consumes the library. @@ -311,6 +311,12 @@ Rendered `Jeep` component: For more information, see . +## Create an RCL with static assets collocated with components + +[!INCLUDE[](~/includes/js-collocation.md)] + +For more information on RCLs, see . + ## Supply components and static assets to multiple hosted Blazor apps For more information, see . From 2236ef975fb01dea66c4295925254b518d9851b1 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:50:41 -0500 Subject: [PATCH 10/15] Updates --- aspnetcore/blazor/components/class-libraries.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 0b1f6c18dd2c..354a408d0151 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -315,8 +315,6 @@ For more information, see . - ## Supply components and static assets to multiple hosted Blazor apps For more information, see . From f3fe26c29e10a1249a43692d5c946fa574393eec Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:51:54 -0500 Subject: [PATCH 11/15] Updates --- aspnetcore/blazor/javascript-interoperability/index.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/aspnetcore/blazor/javascript-interoperability/index.md b/aspnetcore/blazor/javascript-interoperability/index.md index 8fc7cd39fcca..2a3141022423 100644 --- a/aspnetcore/blazor/javascript-interoperability/index.md +++ b/aspnetcore/blazor/javascript-interoperability/index.md @@ -96,10 +96,7 @@ The `{webassembly|server}` placeholder in the preceding markup is either `webass [!INCLUDE[](~/includes/js-collocation.md)] -For more information on RCLs, see the following articles: - -* -* +For more information on RCLs, see . ### Load a script from an external JavaScript file (`.js`) From 726e59277cc76332fff59898bcad2ff5f8a7ca52 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:56:56 -0500 Subject: [PATCH 12/15] Updates --- aspnetcore/includes/js-collocation.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md index b21c7fee31c5..e5ca2e7e84f2 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -1,7 +1,7 @@ --- no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] --- -Collocation of JavaScript (JS) files in the same folder as pages, views, or Razor components is a convenient way to organize scripts in an app. +Collocation of JavaScript (JS) files for pages, views, or Razor components is a convenient way to organize scripts in an app. Collocate JS files using the following filename extension conventions: @@ -33,11 +33,15 @@ Collocated JS files are publicly addressable using the path to the file in the p `_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. + * 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`. - In the following Blazor app example, the RCL's package identifier is `AppJS`, and a module's scripts are loaded for the `Index` component (`Pages/Index.razor`): + In the following Blazor app example: + + * The RCL's package identifier is `AppJS`. + * A module's scripts are loaded for the `Index` component (`Index.razor`). + * The `Index` component is in the `Pages` folder of the RCL. ```csharp var module = await JS.InvokeAsync("import", From faadb32c80acd9bb4f6a5e120e9c5db90c79adf4 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 09:01:28 -0500 Subject: [PATCH 13/15] Updates --- aspnetcore/blazor/components/class-libraries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 354a408d0151..b3fb75d8285e 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -311,7 +311,7 @@ Rendered `Jeep` component: For more information, see . -## Create an RCL with static assets collocated with components +## Create an RCL with JavaScript files collocated with components [!INCLUDE[](~/includes/js-collocation.md)] From 18e81c6ac1dfc4f87bd74b663cec3e9f4df03c5e Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 10:43:58 -0500 Subject: [PATCH 14/15] 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 e5ca2e7e84f2..b738ab813d7e 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -1,7 +1,7 @@ --- no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] --- -Collocation of JavaScript (JS) files for pages, views, or Razor components is a convenient way to organize scripts in an app. +Collocation of JavaScript (JS) files for pages, views, and Razor components is a convenient way to organize scripts in an app. Collocate JS files using the following filename extension conventions: @@ -18,7 +18,7 @@ Collocated JS files are publicly addressable using the path to the file in the p * The `{PATH}` placeholder is the path to the page, view, or component. * 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`. + * The `{EXTENSION}` placeholder matches the extension of the page, view, or component, either `razor` or `cshtml`. In the following example from a Razor Pages app, the script is collocated in the `Pages` folder with the `Contact` page (`Pages/Contact.cshtml`): From 6bb9b0af8c05649ab7e88e7e35ee382d53c2bc0e Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Thu, 16 Sep 2021 10:45:53 -0500 Subject: [PATCH 15/15] Updates --- aspnetcore/includes/js-collocation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md index b738ab813d7e..5d822007894a 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -14,11 +14,11 @@ Collocated JS files are publicly addressable using the path to the file in the p * Pages, views, and components from a collocated scripts file in the app: - `{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js` + `{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}` * The `{PATH}` placeholder is the path to the page, view, or component. * The `{PAGE, VIEW, OR COMPONENT}` placeholder is the page, view, or component. - * The `{EXTENSION}` placeholder matches the extension of the page, view, or component, either `razor` or `cshtml`. + * The `{EXTENSION}` placeholder matches the extension of the page, view, or component, either `razor` or `cshtml`, followed by `.js`. In the following example from a Razor Pages app, the script is collocated in the `Pages` folder with the `Contact` page (`Pages/Contact.cshtml`): @@ -30,12 +30,12 @@ Collocated JS files are publicly addressable using the path to the file in the p * For scripts provided by a Razor class library (RCL): - `_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}.js` + `_content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}` * 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`. + * The `{EXTENSION}` placeholder matches the extension of page, view, or component, either `razor` or `cshtml`, followed by `.js`. In the following Blazor app example: