Umbraco 8 - How to render two different JS Bundles using ClientDependency - RenderJsHere()

Question

I want to render two different bundles of javascript files using RenderJsHere().

I have placed it at two different places on my page but it's showing all files (1st group + 2nd group of files) at both places. Can anyone please guide me on how to render two different sets of files using RenderJsHere()?

Below is some sample code.

Thanks,

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using ClientDependency.Core.Mvc
<!DOCTYPE html>
<html>
<head>                        
    @Html.RenderCssHere()

     @{
        Html.RequiresJs("~/content/js/jquery-3.5.1.js", 1);        
     }
    @Html.RenderJsHere() ===========  **1st group of files in header**

</head>
<body>
    Some HTML here

    Bottom of page

    @{
        Html.RequiresJs("~/content/js/bootstrap.js", 1);
        Html.RequiresJs("~/content/js/jquery.lazy.js", 2);
        Html.RequiresJs("~/content/js/slick.js", 3);
        Html.RequiresJs("~/content/js/app.js", 4);
        Html.RequiresJs("~/content/js/myjs.js", 5);
    }
    @Html.RenderJsHere() **2nd group of files at last in page**

</body>
</html>

score 0 · Answer 1 · answered Oct 27 '20 at 15:40

0

Have a look at how you create named bundles here: ClientDependency in umbraco doesn't include my bundles - then you can render individual bundles wherever you want.

answered Oct 27 '20 at 15:40

Jannik Anker

3,320
1
13
21

score 0 · Answer 2 · answered Oct 27 '20 at 21:53

You can use RequiresJsBundle to set the named bundle you want to use. Then use RenderJsHere

Html.RequiresJsBundle("customjs1"); 
@Html.RenderJsHere()

https://github.com/Shazwazza/ClientDependency/blob/b5ba8cf6fbe476365b948888478e4389dbd0f710/ClientDependency.Mvc/HtmlHelperExtensions.cs

Umbraco 8 - How to render two different JS Bundles using ClientDependency - RenderJsHere()

2 Answers2