diff --git a/aspnetcore/includes/js-collocation.md b/aspnetcore/includes/js-collocation.md index 183d2b2c09e6..9c8c41bb7f09 100644 --- a/aspnetcore/includes/js-collocation.md +++ b/aspnetcore/includes/js-collocation.md @@ -26,6 +26,12 @@ Collocated JS files are publicly addressable using the ***path to the file in th } ``` +The default layout `Pages/Shared/_Layout.cshtml` can be configured to include collocated JS files, eliminating the need to configure each page individually: + +:::code language="razor" source="~/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/Shared/_Layout.cshtml" range="54-54"::: + +The [sample download](https://github.com/dotnet/AspNetCore.Docs/tree/main/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper) uses the preceding code snippet to include collocated JS files in the default layout. + 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. 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\Components\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. diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/DeleteMe.txt b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/DeleteMe.txt deleted file mode 100644 index d6a09a82a7b0..000000000000 --- a/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/DeleteMe.txt +++ /dev/null @@ -1 +0,0 @@ -Delete this file in the PR that creats the https://github.com/dotnet/AspNetCore.Docs/pull/33190 sample. diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/CollocatedScript.cshtml b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/CollocatedScript.cshtml new file mode 100644 index 000000000000..1693a03f7cab --- /dev/null +++ b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/CollocatedScript.cshtml @@ -0,0 +1,34 @@ +@page +@model CollocatedScriptModel +@{ + ViewData["Title"] = "Collocated JS script"; +} +
This page consists of 3 files:
+ +JavaScript code can be added to "Collocated.cshtml.js". This file is included in the page by a ScriptTagHelper in "/Pages/Shared/_Layout.cshtml":
+ +
+
+ <!-- in /Pages/Shared/_Layout.cshtml -->
+ <script asp-src-include="@@(ViewContext.View.Path).js"></script>
+
+
+
+The asp-src-include
attribute is used to dynamically include collocated JS files. When a page has a matching JS file, a script tag is rendered.
+
+ <!-- Rendered markup -->
+ <script src="/Pages/CollocatedScript.cshtml.js"></script>
+
+
+
+On the other hand, if there is no matching JS file, the script tag is removed.
diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/CollocatedScript.cshtml.cs b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/CollocatedScript.cshtml.cs new file mode 100644 index 000000000000..9babb0b656ff --- /dev/null +++ b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/CollocatedScript.cshtml.cs @@ -0,0 +1,18 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace ScriptTagHelper.Pages; + +public class CollocatedScriptModel : PageModel +{ + private readonly ILogger
+ Request ID: @Model.RequestId
+
+ Swapping to the Development environment displays detailed information about the error that occurred. +
++ The Development environment shouldn't be enabled for deployed applications. + It can result in displaying sensitive information from exceptions to end users. + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + and restarting the app. +
diff --git a/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/Error.cshtml.cs b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/Error.cshtml.cs new file mode 100644 index 000000000000..710f0354dd02 --- /dev/null +++ b/aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/Pages/Error.cshtml.cs @@ -0,0 +1,27 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace ScriptTagHelper.Pages; + +[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] +[IgnoreAntiforgeryToken] +public class ErrorModel : PageModel +{ + public string? RequestId { get; set; } + + public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); + + private readonly ILoggerCheck out the links at the top for ScriptTagHelper samples.
+This page consists of 2 files:
+ +This page doesn't contain any JavaScript code of its own. Note that the ScriptTagHelper has omitted the script tag for NoScript.cshtml.js
, because that file does not exist.