Add example for configuring JS collocation in _Layout.cshtml

[sliekens]

This advice should work for Razor pages and for MVC views. I'm not sure about scripts provided by Razor class libraries, I don't use them personally.

EDIT:

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: c90104e1-65b1-0007-e56d-0dffef4b1a44
• Version Independent ID: 5c95e5dc-dc10-8658-91fd-1d55d3959c37
• Content: Script Tag Helper in ASP.NET Core
• Content Source: aspnetcore/mvc/views/tag-helpers/built-in/script-tag-helper.md
• Product: aspnet-core
• Technology: aspnetcore-mvc
• GitHub Login: @Rick-Anderson
• Microsoft Alias: riande

---

Internal previews

📄 File	🔗 Preview link
aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/wwwroot/lib/jquery-validation/LICENSE.md	aspnetcore/mvc/views/tag-helpers/built-in/samples/ScriptTagHelper/wwwroot/lib/jquery-validation/LICENSE

[guardrex]

Hello @sliekens ... It's a reasonable tip, but this would need to call out that every page of the layout must have a collocated JS file.

@Rick-Anderson ... Are you interested in this?

[sliekens]

@guardrex I see why you might think that it always adds a script tag to every page, but asp-src-include omits the script tag when there are no matching files. So, this allows a mix of pages with and without collocated scripts.

[guardrex]

I see. I looked it up, and it didn't say that was the case ...

https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/script-tag-helper?view=aspnetcore-8.0#asp-src-include

Rick manages that article, so he'll determine if any additional updates are in order.

BTW Rick ... The INCLUDE file is no longer used for Blazor. Blazor now has a dedicated INCLUDE to cover special Blazor-y things. This INCLUDE is only used in the RP article now, so you could (or I could since I created this file in the first place) drop it and place the contents of the file into that one article where it appears. Let me know if you want me to do it after this PR is resolved. 👂

[sliekens]

For context about why this works:

<!-- <script asp-src-include="@(ViewContext.View.Path).js"></script> -->
<script asp-src-include="/Pages/Index.cshtml.js"></script>

The ScriptTagHelper uses the string "/Pages/Index.cshtml.js" as a globbing pattern to find matching files. It then renders a new script tag for each matching file. Since the pattern doesn't include any wildcards (*), it should either find 1 or 0 matching files. If no matching file is found, no script tag is rendered.

https://github.com/dotnet/aspnetcore/blob/48a07213d4d8df15c6dffccd161844842c196998/src/Mvc/Mvc.TagHelpers/src/ScriptTagHelper.cs#L334-L347

The ScriptTagHelper also deletes the original <script> tag because it doesn't have a src attribute.

https://github.com/dotnet/aspnetcore/blob/48a07213d4d8df15c6dffccd161844842c196998/src/Mvc/Mvc.TagHelpers/src/ScriptTagHelper.cs#L307-L313

(Perhaps I need to update the PR with a note about this behavior?)

[guardrex]

update the PR with a note about this behavior?

Probably best to wait for Rick to see this. It seems harmless enough as a tip. Rick might want to document the underlying behavior in the Script Tag Helper article and cross-link to it from here. The cross-link will probably be to xref:mvc/views/tag-helpers/built-in/script-tag-helper#asp-src-include. And ... he can dissolve the INCLUDE file at the same time.

He'll be along in a few hours ... he's in a different time zone 🌔.

[Rick-Anderson]

@sliekens can you PR a RP sample. See #33400 for the sample location.

[sliekens]

@Rick-Anderson sorry, what's an RP sample? 😀

/edit: having just realized RP means Razor Pages, what are your expectations for such a sample?

[Rick-Anderson]

@Rick-Anderson sorry, what's an RP sample? 😀

/edit: having just realized RP means Razor Pages, what are your expectations for such a sample?

Sorry for using RP, I should have spelled it out. Just the simplest possible sample that demonstrates JS collocation in _Layout.cshtml and asp-src-include omits the script tag when there are no matching files. So, this allows a mix of pages with and without collocated scripts.

Start with the template generated RP project and add what's need to demonstrate the preceding.

You can do the sample in another PR and add add closes #33400

[sliekens]

Okay @Rick-Anderson I canceled the automerge because I had already pushed a part of the sample to this branch. I will move the changes over to a new PR.

[Rick-Anderson]

@sliekens sorry about that, merging here would have been fine. I didn't realize you could generate a sample that fast and didn't want to hold up this PR. Either way is fine.

[sliekens]

Okay, I pushed the sample to this branch after all.

I used dotnet new razor, removed the Privacy page and instead added two pages.

1. a page with a collocated JS script
   
2. another page without any script
   

[sliekens]

@Rick-Anderson if you could review again, I hope this is what you had in mind.

[Rick-Anderson]

@Rick-Anderson if you could review again, I hope this is what you had in mind.

Looks great. I'll test it tomorrow.