I created a user control (CDLoader.ascx), a macro refering to the user control and then inserted the macro on my master page.
However the css is not rendered, and if I look in the source code of my rendered page, I don't see any link-tag to my css.
So no I try to use the code in CDLoader.cshtml from the uBootstrap starter kit to implement Client Dependency Framework through a Razor script. I just wonder if I can skip the using statement: @using Bootstrap.Logic.ClientDependency as this of course refers to a compiled class wich I don't have in my own web project.
you can remove the dependency on the Html5StandardRenderer class by using the built-in ClientDependency.Core.FileRegistration.Providers.StandardRenderer class so your cshtml file will look like this:
@*
Paramaters:
CssPaths (string)
JsPaths (string)
IncludeDefaultPaths (bool, default false)
*@
@using ClientDependency.Core
@using ClientDependency.Core.Controls
@using ClientDependency.Core.FileRegistration.Providers
@{
var cssPaths = Parameter.CssPaths;
var jsPaths = Parameter.JsPaths;
bool includeDefaultPaths;
bool.TryParse(Parameter.IncludeDefaultPaths, out includeDefaultPaths);
KeyValuePair cdPaths = GetClientDependencyPaths(cssPaths, jsPaths, includeDefaultPaths);
@Html.Raw(cdPaths.Key)
@Html.Raw(cdPaths.Value)
}
@functions
{
KeyValuePair GetClientDependencyPaths(string cssPaths, string jsPaths, bool includeDefaultPaths)
{
var paths = new HashSet
{
new ClientDependencyPath {Name = "Styles", Path = "~/css"},
new ClientDependencyPath {Name = "Scripts", Path = "~/scripts"}
};
var allDependencies = new List();
string cssOutput, jsOutput;
int priority;
if (!string.IsNullOrEmpty(cssPaths))
{
priority = 0;
allDependencies.AddRange(cssPaths.Split('|').Select(path => new CssInclude { PathNameAlias = includeDefaultPaths ? "Styles" : string.Empty, FilePath = path, Priority = priority++ }));
}
if (!string.IsNullOrEmpty(jsPaths))
{
priority = 0;
allDependencies.AddRange(jsPaths.Split('|').Select(path => new JsInclude { PathNameAlias = includeDefaultPaths ? "Scripts" : string.Empty, FilePath = path, Priority = priority++ }));
}
var renderer = new StandardRenderer();
renderer.RegisterDependencies(allDependencies, paths, out jsOutput, out cssOutput);
return new KeyValuePair(cssOutput, jsOutput);
}
}
Another option is to reuse the code for Html5StandardRenderer :
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Text;
using System.Web;
using ClientDependency.Core;
using ClientDependency.Core.Config;
using ClientDependency.Core.FileRegistration.Providers;
namespace Bootstrap.Logic.ClientDependency
{
public class Html5StandardRenderer : BaseRenderer
{
public const string DefaultName = "Html5StandardRenderer";
public override void Initialize(string name, NameValueCollection config)
{
if (string.IsNullOrEmpty(name))
{
name = DefaultName;
}
base.Initialize(name, config);
}
protected override string RenderJsDependencies(List<IClientDependencyFile> jsDependencies)
{
if (jsDependencies.Count == 0)
{
return string.Empty;
}
var stringBuilder = new StringBuilder();
if (ConfigurationHelper.IsCompilationDebug || !EnableCompositeFiles)
{
foreach (var clientDependencyFile in jsDependencies)
{
stringBuilder.AppendLine(RenderSingleJsFile(clientDependencyFile.FilePath));
}
}
else
{
foreach (var js in ProcessCompositeList(jsDependencies, ClientDependencyType.Javascript))
{
stringBuilder.AppendLine(RenderSingleJsFile(js));
}
}
return stringBuilder.ToString();
}
protected override string RenderCssDependencies(List<IClientDependencyFile> cssDependencies)
{
if (cssDependencies.Count == 0)
{
return string.Empty;
}
var stringBuilder = new StringBuilder();
if (ConfigurationHelper.IsCompilationDebug || !EnableCompositeFiles)
{
foreach (var clientDependencyFile in cssDependencies)
{
stringBuilder.AppendLine(RenderSingleCssFile(clientDependencyFile.FilePath));
}
}
else
{
foreach (var css in ProcessCompositeList(cssDependencies, ClientDependencyType.Css))
{
stringBuilder.AppendLine(RenderSingleCssFile(css));
}
}
return stringBuilder.ToString();
}
protected override string RenderSingleJsFile(string js)
{
return string.Format("<script src=\"{0}\"></script>", HttpUtility.HtmlEncode(js));
}
protected override string RenderSingleCssFile(string css)
{
return string.Format("<link rel=\"stylesheet\" href=\"{0}\">", HttpUtility.HtmlEncode(css));
}
}
}
I will be releasing the source code soon so you can play around with it
Thanks for your help. As my webproject is also using Html5 I chose the second option.
So I created a web project in VS 2010 and made sure I had the same namespaces as your Html5StandardRenderer class.
The code compiled fine and I copied the bootstrap.dll to the bin folder of my website. Then I created a CdLoader.cshtml file in the Umbraco Backend and placed the macro:
Just I was willing to jump of a bridge in despair, your typo-solution saved me:
As you can see in the screenshot, the menu-navigation is not rendered as it should be, but I think this is due to the fact that I'm only providing the Css path to one stylesheet (style.css) while I have three stylesheets: style.css, layout.css and reset.css.
So is there a way to provide a path for all three stylesheet files?
In the meantime I will mark you html5renderer.cshtml post as solution to this thread.
Yes, you can load several stylesheets. ClientDependency will compress them and put them in a single file. Try putting all the stylesheets in the CssPaths and separate them with the pipe symbol. The order you put those files is important, that's why reset.css is first in the list
Thanks to the uBootstrap Starter Kit, I learnt a lot of new stuff concerning integrating the Client Dependency Framework and succeed in integrating the Client Depency Framework in my own webproject.
Now I will look to integrate Combres in my webproject. I read in your blogpost Minify your css and javascript in Umbraco that Combres is a Library to minify and compress css and Javascript resources.
using the CDLoader.cshtml
Hi Jorge,
I followed instructions on your blog about integrating the Client Dependency Framework by using a user control:
Minify your css and and javascript in Umbraco
I created a user control (CDLoader.ascx), a macro refering to the user control and then inserted the macro on my master page.
However the css is not rendered, and if I look in the source code of my rendered page, I don't see any link-tag to my css.
So no I try to use the code in CDLoader.cshtml from the uBootstrap starter kit to implement Client Dependency Framework through a Razor script. I just wonder if I can skip the using statement: @using Bootstrap.Logic.ClientDependency as this of course refers to a compiled class wich I don't have in my own web project.
Thanks for your advice,
Anthony
Hi Anthony,
you can remove the dependency on the Html5StandardRenderer class by using the built-in ClientDependency.Core.FileRegistration.Providers.StandardRenderer class so your cshtml file will look like this:
Another option is to reuse the code for Html5StandardRenderer :
I will be releasing the source code soon so you can play around with it
Cheers,
Jorge
Hi Jorge,
Thanks for your help. As my webproject is also using Html5 I chose the second option.
So I created a web project in VS 2010 and made sure I had the same namespaces as your Html5StandardRenderer class.
The code compiled fine and I copied the bootstrap.dll to the bin folder of my website.
Then I created a CdLoader.cshtml file in the Umbraco Backend and placed the macro:
<umbraco:Macro Alias="CdLoader" CssPath="style.css" runat="server" />
I'm not really sure about the CssPath attribute. In my css folder I have three .css files: layout.css, reset.css and style.css
However, if I render the homepage, I don't see any rendered css. If I look in the source code of the rendered page there is no css link at all:
Also changing the version number in the ClientDepency.config file doesn't help
greetings
Anthony
Hi Anthony,
Try setting the IncludeDefaultPaths to true:
This will automatically will prepend ~/css for the stylesheets and ~/scripts for the javascripts
Jorge
Hmm, this is a though one. Still no css. What strikes me is that the css link in the header tag isn't even rendered.
I don't know if this could have anything to do with it, I'm working with a urlrewrite in the UrlRewriting.config file:
<add name="home"
virtualUrl= "^~/home$"
rewriteUrlParameter="ExcludeFromClientQueryString"
destinationUrl="~/"
ignoreCase="true"
redirect="Application"
redirectMode="Permanent" />
I also tried it in Firefox with the same result, no css link in the header tag
Greetings,
Anthony
Hi Anthony,
I believe is a typo. Try setting CssPaths (plural) and let me know if it works ok.
Cheers,
J
Just I was willing to jump of a bridge in despair, your typo-solution saved me:
As you can see in the screenshot, the menu-navigation is not rendered as it should be, but I think this is due to the fact that I'm only providing the Css path to one stylesheet (style.css) while I have three stylesheets: style.css, layout.css and reset.css.
So is there a way to provide a path for all three stylesheet files?
In the meantime I will mark you html5renderer.cshtml post as solution to this thread.
greetings,
Anthony
Hi Anthony,
Yes, you can load several stylesheets. ClientDependency will compress them and put them in a single file. Try putting all the stylesheets in the CssPaths and separate them with the pipe symbol. The order you put those files is important, that's why reset.css is first in the list
Hope this helps
J
Perfect!
Thanks to the uBootstrap Starter Kit, I learnt a lot of new stuff concerning integrating the Client Dependency Framework and succeed in integrating the Client Depency Framework in my own webproject.
Now I will look to integrate Combres in my webproject. I read in your blogpost Minify your css and javascript in Umbraco that Combres is a Library to minify and compress css and Javascript resources.
greetings,
Anthony
is working on a reply...