Skip to content

[Blazor Wasm] Multiple layouts with different set of css and javascript #28624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
TanvirArjel opened this issue Dec 13, 2020 · 1 comment
Closed

[Blazor Wasm] Multiple layouts with different set of css and javascript #28624

TanvirArjel opened this issue Dec 13, 2020 · 1 comment
Assignees
@SteveSandersonMS
Labels
area-blazor Includes: Blazor, Razor Components ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. Status: Resolved
Milestone
Discussions

Comments

@TanvirArjel
Copy link
Contributor

TanvirArjel commented Dec 13, 2020 •
edited
Loading

The layout system described in ASP.NET Core Blazor layouts suggest that all the CSS and javascript files will be in the index.html file. That means CSS and javascript files specific to one layout will also be available in the other layout's <head> too.

Is it possible to have multiple layouts with completely different sets of CSS and javascript files like MVC and Razor Pages?

Thank you.

Note: Due to this problem I am already facing the CSS isolation problem described in #28626 . So each layout must have completely different <html>, <head> and </body> tag.
@TanvirArjel TanvirArjel added the design-proposal This issue represents a design proposal for a different issue, linked in the description label Dec 13, 2020
@Pilchie Pilchie added the area-blazor Includes: Blazor, Razor Components label Dec 14, 2020
@mkArtakMSFT mkArtakMSFT removed the design-proposal This issue represents a design proposal for a different issue, linked in the description label Dec 15, 2020
@mkArtakMSFT mkArtakMSFT added this to the Discussions milestone Dec 15, 2020
@SteveSandersonMS
Copy link
Member

SteveSandersonMS commented Dec 17, 2020 •
edited
Loading

If your goal is to have different CSS stylesheets on different pages, you can do that by having different layout components for each combination, and putting the <link> tags for the stylesheets into those layouts. See Blazor's docs about layouts for how to pick which layout goes with which page. Note that <link> tags don't have to go inside <head>.

If your goal is to have different JavaScript files loaded into different pages, this isn't a good idea and you should look for an alternative. Once a <script> has been loaded into a page, it cannot be removed - that's simply not how scripts work in web pages. If the JS you need to load can only be loaded via <script>, then the most reasonable option is to load it globally. However, if the JS you need to load is an ES6 module, then you can load it on demand - see https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#use-of-javascript-libraries-that-render-ui-dom-elements

If your goal is to vary other <head> contents such as <title>, then we have an ongoing issue tracking the need to make this easy: #25705. Until then, an alternative way to do it is to have your host page (e.g., index.html or _Host.cshtml) not contain the <head> and <body>, but instead put those into your Blazor layout component. Then you can modify them dynamically, e.g., a mechanism like this.

@SteveSandersonMS SteveSandersonMS added the ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. label Dec 17, 2020
@ghost ghost added the Status: Resolved label Dec 17, 2020
@ghost ghost locked as resolved and limited conversation to collaborators Jan 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@SteveSandersonMS SteveSandersonMS

Labels
area-blazor Includes: Blazor, Razor Components ✔️ Resolution: Answered Resolved because the question asked by the original author has been answered. Status: Resolved
Projects
None yet
Milestone
Discussions
Development

No branches or pull requests
4 participants
@Pilchie @SteveSandersonMS @TanvirArjel @mkArtakMSFT