Adding styles to the head for specific blocks

Nat

Vote:

I would like to be able to add styles - which are specific to certain blocks - only when those blocks are used in a page.

I had found this - although I realise it is rather out of date: web.archive.org/web/20170304083327/http://dodavinkeln.se/post/how-to-inject-a-script-for-a-block

which amounts to basically doing:

private IRequiredClientResourceList RequiredClientResourceList { get; }

public MyBlock(IRequiredClientResourceList requiredClientResourceList){
    RequiredClientResourceList = requiredClientResourceList;
}

public override ActionResult Index(MyBlock currentBlock){
    ...
    RequiredClientResourceList.RequireStyle(style.AbsolutePath).AtHeader();
}

That was being called from a block along with ensuring the _Layout.html had this in:

<head>
...
@Html.RequiredClientResources("Header")
</head>

and all seemd to be working fine, at least locally it was. But it turns out it its not working reliably at all.

is there a way to add styles on a block by block basis, or am I going to have to simply inline the css link in the block view?

#247283

Edited, Jan 19, 2021 16:31

Johan Petersson

Vote:

Hi,

I'm the author of that blog post. What is not working? Adding resources this way should work.

#247285

Jan 19, 2021 17:52

Nat

Vote:

Hi Johan, thanks for the reply. It's simply not adding styles to the head. Scripts at the end of the body work fine -

I have both the

@Html.RequiredClientResources("Header")

in the head and,

@Html.RequiredClientResources("Footer")

at the end of the body.

Having thought about it a bit, I assumed this was because the block is decided/controller is called after the _Layout <head> was rendered/processed, and adding stuff with the AtHeader() was happening too late. Although it does seem to work intermittantly...

But I would be happy to take some pointers as to what I can do to get this working, as it seemed like a really nice way of doing it.

many thanks

#247314

Edited, Jan 20, 2021 8:18

Nat

Vote:

Small amendment, as I have found the cause of the problem.

The Page type in question has a ContentArea which is being called by a Html.Action outside of the RenderBody() in the _Layout.cshtml, and the Block I am attempting to add the styles for is in that ContentArea. Which means, as I understand it, that the _Layout is now being worked through from top to bottom and the RequiredClientResources("Header") has already been dealt with, so it is too late to add styles to from this block.

I am not sure if there is a way to fix this, short of changing the Layout considerably, and moving the Html.Action call(s) into the Page view, which unsurprisingly I don't want to do.

Are there any other options I am missing?

#247408

Jan 21, 2021 15:25

Nat

Vote:

I realise this is a bit old now this post, and I have been able to use the IRequiredClientResourceList for msot isntances to put styles in the head.

however, I wonder if it is possible to override the markup which is produced by using

RequiredClientResourceList.RequireStyle(style.AbsolutePath).AtHeader();

as I would like a link tag like this:

<link rel="preload" as="style" type="text/css" href="path/to/file.css />

I had tried using a RenderSection in the _Layout but it doesnt seem to work when called from a block view - works fine for pages.

#252884

Edited, Apr 09, 2021 10:36

Przemysław Derkacz

Vote:

Hi Nat

I use `RequireHtmlInline`

requiredClientResourceList.RequireHtmlInline($@"<link rel=""preload"" href=""{urlSmall}"" as=""image"" media=""(max-width: 500px)"">").AtHeader();
requiredClientResourceList.RequireHtmlInline($@"<link rel=""preload"" href=""{urlMiddle}"" as=""image"" media=""(min-width: 500.1px) and (max-width: 1200px)"">").AtHeader();
requiredClientResourceList.RequireHtmlInline($@"<link rel=""preload"" href=""{urlLarge}"" as=""image"" media=""(min-width: 1200.1px)"">").AtHeader();

#253549

Apr 19, 2021 10:45

Try our conversational search powered by Generative AI!

Adding styles to the head for specific blocks