I'm right now using asp.net mvc 4.5 in my projects . I like the way asp.net MVC is designed and works, but i am struggling with the script and styles sheet management.
Every page of my project use different style sheet and scripts files so i can not add all the scripts and style sheet file in the layout file as it is not the good technique & increase page loading time , i want to add those related files on each page where they are needed. suggest me a good solution
You could register a section in your layout:
#RenderSection("scripts", required: false)
and then in each view override this section and define any custom scripts related to it:
#section scripts {
<script type="text/javascript" src="#Url.Content("~/scripts/myscript.js")"></script>
}
Using this same technique you could define another section for the custom stylesheets.
This being said, if you take advantage of the built-in bundling and minification mechanism, it might be more effective to have a single minified and compressed file rather than multiple files because the browser will need to make separate HTTP request to retrieve them.
i would recommend using ClientDipendancy Framework.
https://github.com/Shazwazza/ClientDependency
Related
I'm currently learning ASP.NET 4.5 of the MVC flavour, and I've decided to remove bootstrap completely and go with PureCSS (http://www.purecss.io).
This is largely due to the fact that my web application requires almost no scripting other than on the code-behind, and some light JS for data validation and the like.
Currently I'm linking to the combined PureCSS style sheet from the Yahoo! CDN:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
in my _Layout.cshtml file. This is obviously functional, however I have 2 concerns:
If the CVN (for whatever reason) fails/goes down/changes, all of the styling disappears and I'll have to solve that on the fly (or implement some time of failsafe switchover to another CDN)
I really like the concept of bundling and I'd like to have the local PureCSS library bundled, to prevent the aforementioned problem as well as for the sake of modularization/compartmentalization.
Is generating this bundle a simple matter of:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/purecss_release_1_6/some.css",
"~/Content/purecss_release_1_6/other.css",
"~/Content/purecss_release_1_6/neat.css",
"~/Content/purecss_release_1_6/etc.css",
...
"~/Content/site.css"));
If so, that's fine and dandy, but there are DOZENS of css files in the release. Is there a cleaner way to bundle them?
Thank you!
You can use IncludeDirectory to reference the whole directory containing all your CSS files.
Example specific to your case:
bundles.Add(new StyleBundle("~/Content/css")
.IncludeDirectory("~/Content/purcss_release", "*.css"));
New in .NET 4.5 is an integrated system for falling back from a failed CDN to local material. Tutorial/information: http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx
Usable information from the link above:
The basic idea for CDN fallback is to check for a type or variable
that should be present after a script load, and if it's not there, try
getting that script locally. Note the important escape characters
within the document.write. Here's jQuery:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
My default ASP.NET MVC 4 project has bundles created for JQuery and JQuery UI that is referenced in the pages.
I want to change this to use an absolute link from a CDN instead of relative on my web server.
I thought it could be as simple as just changing the url's in the bundles to point to the CDN urls. I understand why this won't work because bundles essentially bundle everything up into one file. These cases, I only have one file though.
I'm wondering. What is the best practice here. Basically, I want the code to exist in my layout or even individual pages that directs the view to load the script tags for these scrips. Then I can manage which script tags are included. The same way we do it with bundling, but I want it to work by doing the bundling and also do any other alternative script tags instead of the bundle. This way I can swap in and out depending on how I feel I want to manage my scrips at any one time. Let's say I want to add another js file to the bundle some day, or I want to include another script that will have it's script tag rendered on every page. I want a central place to do this.
Thoughts?
I have this:
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include("~/Content/Styles/Default/Site.css"));
On my sites i have this:
#section Styles
{
#Styles.Render("~/Content/Styles/Default"))
}
My _Layout.cshtml looks like this:
#RenderSection("Styles", true)
Everything looks good, eh? Well, not really. When i compiled my application in release mode, decided to publish it, this is what it renders:
<link href="/Content/Styles/Default?v=78dkNySP_xsiuzsgxCx_GGnnHzYS-B8nNdnXqcl47XI1" rel="stylesheet">
Instead of generating href to a file, it generates some kind of id? Guid? Why? O.o
This is how bundles work. It's main purpose is for you to combine multiple CSS (and JS files for that matter) files into one package. e.g. you no longer have to put all your css (and js) into one huge file. Just split it up into sections, then add it into your bundles, and it packages it up into one item. Less web requests, the faster your page load time.
e.g. Lets say you had 2 css files. One's the main, but you had one for your menu system.
bundles.Add(new StyleBundle("~/Content/Styles/Default").Include(
"~/Content/Styles/Default/Site.css",
"~/Content/Styles/Default/Menu.css"));
This would show up as a single call with the GUID type code (to prevent caching on file changes) on the URL. This URL will link to a minified and bundled css.
But my browser cannot read that! There is no physical path to a file!
It's a sort of virtual file. MVC's bundling uses the routing engine to point it to a combined and minified version of a particle bundle.
I'm using jQuery plugins in an ASP.Net MVC site.
I've often to include CSS and JS files as required by the plugins I use in every page. So I want to centralize all those dependencies in a single place in my app. thus if a dependency for a given plug-in is changed or updated, I'll only have to modify a single place in my app.
I've thought in two possible solutions:
Extend the HTMLHelper with a partial method
like GetPlugin("jqgrid"); that
will print out all the script and
style tags needed.
Create a partial view for each
pluginlike jqGridDependencies.ascx
that will contain the script and
style tags needed.
Do you have any other idea? what do you think of both proposals?
Could http://combres.codeplex.com/ provide you with a framework for this.
My only personal objection to this method is that each individual pages will have a unique JavaScript/CSS file where as if you combined and compressed everything into one and simply used classes and events to trigger the JavaScript enhancements as and when needed your site would run a lot faster.