using clientdependency framework from a razor macro

Geoff Beaumont 75 posts 104 karma points

Oct 13, 2012 @ 01:57

Razor

Hi,

This seems like something that ought to be dead straightforward - but so far I've not managed to figure this out or find a working example...

I'm trying to register CSS and JavaScript files with the ClientDependency framework, from an Umbraco 4.9 razor macro.

The ClientDependency docs
http://clientdependency.codeplex.com/wikipage?title=MVCFileRegistration&referringTitle=Documentation
and this
http://www.enkelmedia.se/blogg/2012/9/1/umbraco-och-client-dependency-framework.aspx
give razor examples for the ClientDependency framework, but I suspect only for a full MVC structure not simple razor macros.

I came up with this as a possible solution:

@using ClientDependency.Core
@using ClientDependency.Core.Controls
@Html.RequiresCss("styles.css","Styles").RequiresJs("script.js","Scripts");

But this simply reports:

'System.Web.WebPages.Html.HtmlHelper' does not contain a definition for 'RequiresCss' and no extension method 'RequiresCss' accepting a first argument of type 'System.Web.WebPages.Html.HtmlHelper' could be found (are you missing a using directive or an assembly reference?)

I've also tried registering the ClientDependency assembly in the web.config in the hope that that might expose its extensions, but no joy.

I've found code for rendering the output of the ClientDependency framework using a razor macro (all of which seem to ultimately derive from the code in the uBootstrap package), but I haven't found a single macro that registers a file with the framework. Seems like a core bit of Umbraco functionality that I'd expect to be exposed by default and well documented, but it would appear not, so is this something that's simply impossible or just so convoluted no-one bothers?

Geoff

Copy Link

Douglas Ludlow 210 posts 366 karma points

Oct 13, 2012 @ 02:24

Hey Geoff,

You are correct - the razor examples given for registering resources will only work in MVC. But, assuming that you have registered and added the ClientDependencyLoader to your template/masterpage like so:

<%@ Register Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" TagPrefix="CD" %>

<CD:ClientDependencyLoader runat="server" ID="Loader"></CD:ClientDependencyLoader>

You should be able to register resources within your razor scripts in the following manner:

@using ClientDependency.Core
@using ClientDependency.Core.Controls
@{
    ClientDependencyLoader.Instance
        .RegisterDependency("/css/styles.css", ClientDependencyType.Css)
        .RegisterDependency("/scripts/script.js", ClientDependencyType.Javasscript);
}

Alternatively, you can use the following methods to add external resources:

umbraco.library.RegisterStyleSheetFile(string key, string url);
umbraco.library.RegisterJavaScriptFile(string key, string url);

However, you won't get the benefit of ClientDependency's bundling and minification.

Hope that helps!

Copy Link

Douglas Ludlow 210 posts 366 karma points

Oct 13, 2012 @ 02:36

It might be worth noting that there are a number of overloads to the RegisterDependency() method, such as:

RegisterDependency(int priority, string filePath, ClientDependencyType type);
RegisterDependency(string filePath, string pathNameAlias, ClientDependencyType type);
RegisterDependency(int priority, string filePath,  string pathNameAlias, ClientDependencyType type);

Copy Link

Douglas Ludlow 210 posts 366 karma points

Oct 26, 2012 @ 01:36

Did that help at all?

Copy Link

Stephen 767 posts 2273 karma points c-trib

Oct 26, 2012 @ 08:54

One other thing to be aware of is that, in the given state of Umbraco (up to 4.10), if you _cache_ such a macro then the code for it will run _once_ and then the result will be cached. The result is the HTML markup only -- _not_ whatever dependencies you registered. In other words, when the macro is served from the cache, the dependencies will _not_ be registered.

Copy Link

Mike Chambers 635 posts 1252 karma points c-trib

Nov 28, 2012 @ 22:11

Hi guys, trying to get @Douglas Ludlow's approach to work in a 4.10 site, the straight forward entires in the masterpage template work, but for the life of me I can't get any razor code to work

First Off ClientDependencyLoader.Instance is now obsolete,

so we have ClientDependencyLoader.GetInstance(Context) but that always gives a null reference exception.... any ideas? As if we can't get razor to inject into the ClientDependancyLoader then we can't really use it full stop.

Copy Link

Geoff Beaumont 75 posts 104 karma points

Nov 29, 2012 @ 15:04

Hi,

Firstly - Douglas, please accept my apologies for very rudely not getting back to you a great deal earlier. This work is on our own website and it's inevitably been pushed aside by client work.

Yes, your code is working for me - thanks a lot.

Mike - Douglas' code works for me, as does replacing ClientDependencyLoader.Instance with ClientDependencyLoader.GetInstance(Context) - however, this site is on Umbraco 4.9, not 4.10.

For the record, this is the code I've ended up with:

@using ClientDependency.Core
@using ClientDependency.Core.Controls
@{
    ClientDependencyLoader.GetInstance(Context).RegisterDependency("RefineSlideTheme.less", "Less", ClientDependencyType.Css).RegisterDependency("jquery.refineslide.min.js", "Scripts", ClientDependencyType.Javascript);
}

Copy Link

Mike Chambers 635 posts 1252 karma points c-trib

Nov 30, 2012 @ 12:35

Found my issue...

If you move the

 <umb:ClientDependencyLoader runat="server" ID="Loader"></umb:ClientDependencyLoader>

so that positionally it is below the razor macro in the template html when you try to insert the dependency it errors.

eg this fails

<umbraco:Macro Alias="InjectCDL" runat="server" />
  <umb:ClientDependencyLoader runat="server" ID="Loader"></umb:ClientDependencyLoader>

but this works

 <umb:ClientDependencyLoader runat="server" ID="Loader"></umb:ClientDependencyLoader>
 <umbraco:Macro Alias="InjectCDL" runat="server" />

A page cycle instantiation issue?

I can't see a way around this to have JS added in the foot of the page, but css in the header....

Copy Link

Geoff Beaumont 75 posts 104 karma points

Nov 30, 2012 @ 12:47

Hi Mike,

Is this thread any help? It sounds like there may still be some issues, but the last post is a few months old they they may be fixed by now.

Documentation here.

I'll have to have a play with this myself!

Geoff

Copy Link

Mike Chambers 635 posts 1252 karma points c-trib

Nov 30, 2012 @ 12:50

Thanks Geoff that was what I was aiming for... but was back tracking to find out why I'm getting errors trying to inject into the loader from razor...

Copy Link

Mike Chambers 635 posts 1252 karma points c-trib

Nov 30, 2012 @ 13:06

So, as simple as it gets

template

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<%@ Register TagPrefix="umb" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %>
<%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols" Assembly="controls" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
    <html>
        <head>
        </head>
        <body>
            TESTING CDL
            <form runat="server" id="serverForm">
                <umb:UmbracoClientDependencyLoader runat="server" ID="ClientLoader" />
                <umbraco:Macro Alias="InjectCDL" runat="server" />                
            </form>
        </body>
    </html>
</asp:Content>

and the inhectCDL

@using ClientDependency.Core
@using ClientDependency.Core.Controls
@{
        ClientDependencyLoader.GetInstance(Context).RegisterDependency(1, "/scripts/test.js", ClientDependencyType.Javascript);
}

Whilst this works... move the <umb:UmbracoClientDependencyLoader runat="server" ID="ClientLoader" /> any lower than the injecting macro and it fails, with

Error Loading Razor Script (file: Inject CDL) Object reference not set to an instance of an object.    at ASP._Page_macroScripts_injectCDL_cshtml.Execute() in e:\WebDevelopment\15006_jpt\v10\u4111.dev.fidus.co.uk\LiveSite\macroScripts\injectCDL.cshtml:line 4
  at System.Web.WebPages.WebPageBase.ExecutePageHierarchy()
  at System.Web.WebPages.WebPage.ExecutePageHierarchy()
  at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage)
  at umbraco.MacroEngines.RazorMacroEngine.ExecuteRazor(MacroModel macro, INode currentPage)
  at umbraco.MacroEngines.RazorMacroEngine.Execute(MacroModel macro, INode currentPage)

:-(

Copy Link

Geoff Beaumont 75 posts 104 karma points

Nov 30, 2012 @ 13:16

Which is a bit of a showstopper as far as practical use of this goes...

I wonder if there's any other way to register loaders? i.e. are the ClientDependencyLoader and the PageHeaderProvider the only loaders you can declare, or is it possible to add something else which could control the location of the insertion point? There's nothing in the documentation, but then as far as I can see that page is the only one that even mentions the PageHeaderProvider, and then it just seems to assume you know about it! There's an (unanswered) comment at the bottom referring to PlaceHolderProvider, which sounds promising but it looks like if you want to know more you're going to have to trawl through the source code...

Geoff

Copy Link

is working on a reply...

Flag this post as spam?

Using ClientDependency Framework from a Razor Macro