So I know there are various ways of doing, however I'd like to know the "proper" way of including a specific CSS dynamically based on the page I am on. I could include all of them within the site master, however I'm wondering if I could simply include them ONLY when I need it, by either evaluating URL or passing a value through the controller for display flag, or just include it within the content page (outside of the head tags)... I'd like to keep it clean and link them all through my site master, but I'd like to be able to evaluate the page I'm on before I include that CSS..... thoughts??
No matter what its going to be something like this:
<% if( someCriteria ) { %>
<stylesheet type="text/css" href="mypath" />
<%} %>
You could wrap it in a helper or whatever but I don't think there can be a best practice or "cleaner" way of doing something this simple.
" I could include all of them within the site master, however I'm wondering if I could simply include them ONLY when I need it"
Another way to look at this is CSS files are cached by the browser so you may as well include it once and be done with. Your visitors may have a slightly longer initial load time but if you keep your CSS files small it will be barely noticeable. There is very little performance benefit by making it dynamic.
If you're using the Spark view engine, you can use the once attribute on your css include. I personally just put everything on the site master and let the browser handle caching.
http://sparkviewengine.com/documentation/expressions#Conditionalattributeonce
Good, bad, or indifferent, the thing I have been doing for years with master pages is include a ContentPlaceHolder in the <head> section of the master page. I can then inject page-specific CSS through that, instead of cluttering my master page with alot of processing logic. I am doing the same thing with my ASP.NET MVC solutions.
What I typically do is add a to the master in the to allow for pages to include things there. More often than not it is scripts rather than stylesheets, but it works for both.
I'd also vote for getting a Html helper in place to handle this so your developers don't need to care about exactly where the stylesheet is loaded from . . .
Related
I know there are several questions concerning this, but I still think that it's there are a few areas that could use some clarification since the Turbolinks way of doing it (1 js file to rule them all) apparently goes straight out the window when starting to include content that is dynamically loaded via Ajax.
So, regarding content that is dynamically loaded via Ajax inside _partial.html.erb's and thus not initially recognised by the DOM and unable bind any JS to new elements that are loaded;
I have a sneaky suspicion that the "Rails way" of dynamically binding JavaScript events to new elements is to put any JavaScript inside the js.erb file that dynamically renders the partial (?) But it somehow feels unintuitive to split all the javascript into so many different small files. I am currently including most of my JS inline each _partial.html.erb file which is giving me a massive headache when it comes to binding and unbinding events (which also btw feels really messy not to mention unintuitive).
Also, are js.erb files that are NOT in the asset pipeline, minified in production? Or are you supposed to put each js.erb file inside the Asset Pipeline for it to be minified?
-- Or am I missing/misunderstanding something?
I'm working on an MVC4 site, and I would like to use some resource management software to consolidate & minify JS & CSS (+ less & coffeescript),
SquishIt has all the plugins I want, they're already configured. All the examples show a very simple idea behind SquishIt, which never includes any asset management. It looks like (and the JavaScript model is almost identical):
<html>
<head>
#Html.BundleCss()
.Add("~/Content/first_file.css")
.Add("~/Content/second_file.css")
.Add("~/Content/third_file.css")
.Render()
</head>
What I'm wanting to do is more like this:
_Layout.cshtml:
<html>
<head>
#Html.BundleCss().Render()
</head>
....
App_Start():
Bundle.Css().Add("~/Content/bootstrap.css").Add("~/Content/jquery-ui.css");
_PartialView.cshtml:
#Html.BundleCss().AddString("a:active { color: red }")
The idea behind this is that I would build up the CSS/JS I need as the views recursively render and then the minifier builds, minifies, and caches at the end. AssMan (http://assman.codeplex.com/) does this, but seems less supported and requires more work to get the required minifiers and language support I want.
Ideas, suggestions?
If I'm following your question correctly, I think this issue is about as close as you're going to get (started from this SO thread). I don't really follow though, what bundle should the .AddString call in your example be added to? It looks to me like you are going to end up with a single combined file per view, which is about as bad as you can get from an optimization perspective.
If you read the discussion on that issue and check out the linked commits maybe it will give you some ideas about how to get the functionality you're after (it might actually be the AutoBundler stuff we've implemented, that is available in prerelease now, and will be getting a soft release in the very near future).
Cassette seems to do this natively. It's not as clean of a syntax as I'd like (I'd prefer being able to reference arbitrary scripts and CSS from pages without having to bundle them) but it does work.
Ok so this is a little random but..
Using MVC 3 (with Razor view engine) with Knockout.js which uses jQuery Templating i've come across a little problem i'm sure is possible to solve.
In order to use jQuery-Tmpl you need to supply a template in
<script type="text/html">
...template elements go here...
</script>
Now the problem is that the razor view engine doesn't seem to generate HTML inside of these specific script tags. It handles standard html, (script type="text/javascript") fine but appears to just not do anything with the aforementioned script tag.
Does anyone know how to get around this issue i.e. how to use MVC 3 Razor with jQuery-Tmpl?
There is a pretty good solution in this blog post: http://www.wiredprairie.us/blog/index.php/archives/1204
This creates a "template" helper that emits the script start/end tags.
Otherwise, I have some ideas for putting templates in external files, which would be another way to avoid this issue. It involves storing the templates in .html files and injecting them into the page into script tags. There are certainly many ways that this could be accomplished though on the client or server side, just a few ideas.
A more general approach if you want to keep things in the document is using #Html.Raw to output html without affecting the edit-time syntax state.
For example:
#Html.Raw("<script type='text/x-dot-template' id='awesome_template'>")
<!-- insert some awesomeness here -->
#Html.Raw("</script>")
I happen to like the helper method suggested above a little better, but it has not always been something I was able to implement, so this is an alternative with its own benefits (namely clarity over ease of use and terseness)
I have a ViewUserControl that will be used in some pages in my site, but not all.
This ViewUserControl requires a javascript file, so I would like to have the script reference added automatically to the head session of the pages that are using this ViewUserControl, is that possible?
I tried to add a content control to it, but looks like it is not allowed.
I could also add the script tag straight into the ViewUserControl's .ascx code, but then I will have the script reference added N times if I have N of such controls in a page.
Does anyone have any ideas?
In the code-behind of the ASCX, register your script reference (or block). I just answered a similar question explaining how to do this:
How to best control loading of multiple javascript files in ASP.NET?
With this technique, you can have the same control on the page multiple times, yet still include the script only once (and only on pages that actually include the control).
I have just started playing with the ASP.Net MVC framework, and today I created a simple UserControl that uses some CSS. Since the CSS was declared in a separate file and included in the View that called the UserControl, and not in the UserControl itself, Visual Studio could not find any of the CSS classes used in the UserControl. This got me thinking about what would be the most appropriate way of dealing with CSS in UserControls.
Declaring the CSS in the View that is using the UserControl gives more flexibility if the same control is used in different contexts and needs to be able to adapt to the style of the calling View.
Having the UserControl supply its own CSS would lead to a more clear separation, and the Views would not need to know anything about the HTML/CSS generated by the UserControl, but at the cost of a fixed look of the control.
Since I am totally new to the framework, I'm guessing people have already come to some good conclusions about this.
So, would you have the UserControl handle its own CSS, should it depend on the CSS declared in the calling View, or is there another, better solution?
If you look at a skinable toolkit like Yahoo UI it documents the classes used by each control and then provides a single skin file for the entire toolkit. By swapping out the single skin file you can change looks for your entire site.
I would assume that 99.9% of the time you would want to custom skin your controls and not have them come predefined with a look and feel.
As an example here are the CSS defines for Yahoo's TabView control
It should always be in your global CSS really. If you pass this on to a designer, you dont want to have to explain which control defines x style, etc.
A quick point... it's ok for your Views to be aware of HTML... that's what they are for. What I would recommend (if you want to be ubber cool), is to add a parameter to your "MVC UserControl" that specifies the class name. Example:
<%= MyHelperClass.Marquee("This text will scroll!!!", "important-text") %>
I'm of course pretending that "important-text" is the class name that I want to add to my control.
I am assuming that when you say "UserControl", you're referring to an example like in that link above.