I'm just getting started with ASP.NET MVC. I'm going to be using JQuery on the website I'm making, but I'm not really sure about one thing: where would JQuery code be placed?
This concerns two things:
Where do I import the JQuery JavaScript file? (I've been thinking that the Master page would be a good place to do this; am I right, or do I have to import it in each view?)
Should all my JQuery code be referenced from the Master page (i.e., I store my code that uses JQuery in a separate .js file and reference it in a <script> tag)?
Thanks in advance.
Anything that you will use in every page put a import in your master. If its something that you will only use on a smaller scale, put the import in the view that will use it.
The key is to not load unnecessary bytes when they won't even be used. I have a universal js file that contains anything that will be used as more common functions across the board imported in my master. Then on a page by page basis, I have only the js imports that I need for that page.
If you put every js import in your master that means it will load that js on every page, when maybe half of them aren't even used for that particular page. That can have a big impact on page load times.
I suggest also using something that can compress the js to a minified version for production. Telerik has their Script Registrar and it's a really nice tool as well.
Add JQuery to the bottom of Site.Master just about the body tag. This means the page will load and not wait for the Javascript.
But the JQuery relevant to each view, but add on a View level.
You should import your JQuery library on the master page. Probably you'll use JQuery on most of the views so having the reference in only one place it's most welcome.
Normally it's a good practice to have all javascript code you can in separated files, as less inline javascript as you have the better. 2 reasons: more readable code and better performance since external javascript files are cached.
My jquery code is placed in the head of the masterpage since it's used on just about every view on the site. The only reason you wouldn't do this is if you're only using the jquery library on a few of your views, in which case there's no reason to load it up for every user.
You should let Google host jQuery for you.
Related
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
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.
Our web application started out as a big, honkin' ASP.NET AJAX 'page' with oodles of controls on it. They all shared a small set of large .js and .css files. I need to use some of these controls in other, unrelated pages around our site. The difficulty is in all the other stuff the .css and .js files bring along with them when I try to use those controls elsewhere - too much and there's a lot of bloat, too little and the controls don't work.
So, I've been experimenting with breaking up the .css and .js and writing the controls to register the .js and .css they need. Initially I will end up with many more but smaller .js and .css files, but I can combine them at run-time later. I just want to encapsulate these controls so the pages that use them know less about what it takes to use them.
But I am running into a problem. I am using OnInit or OnLoad to register the .css and .js as needed. Unfortunately, none of these methods is called if the control is not visible the first time you hit the page when all the .css and .js needs to make its way to the client. It isn't until later on that the controls are enabled for thier specific functions that they are visible and could emit the .js or .css. Then it's too late!
Do I have to bite the bullet and hand-include the right .css/.js on the pages I use these controls on, or is there a better way to 'inventory' the controls in use to get them to emit what they need?
I assume that the problem you are facing is that some controls are loaded dynamically (i.e. in an update panel). It is a tricky problem - usually because you don't know in advance what controls you will need and thus what JS + CSS to include.
Perhaps you should consider loading the JS and CSS dynamically using a script loader?
The YUI script loader and the new MS one spring to mind (but I am sure that there are dozens of other equally good ones out there).
See this previous answer for a couple of potentially useful links. Also see here for more about the MS script loader and YUI scriptloader.
Being that you are already using MS stuff I would recommend the MS script loader but as far as I know, the MS script loader does not support managing your dynamically loaded CSS (if anyone knows different please correct me) and so maybe the YUI solution might be more suitable (or maybe you can roll your own way of dynamically adding CSS if it has not already been added - it shouldn't be too hard).
Using a script loader removes the headache of working out up front what you need to include but it may require some changes to your javascript. In particular, if you have any javascript inline in your control's markup that relies on functions declared in the javascript you are dynamically adding.
E.g. If you current have user control markup like this
<div id="my control">
<script type="text/javascript>
foo(); // foo is defined in foo.js, which is included in a script element in the head
... more script ...
</script>
....
</div>
Then using a script loader you must change it to look like this
<div id="my control">
<script type="text/javascript>
var onLoadHandler = function() {
foo();
... more script ...
};
Sys.loader.registerScript("foo_package_name", null, onLoadHandler);
</script>
</div>
You may be able to include the js and css files in with the rendering for the controls that you are using. Basically adding them into the first line of the html that is generated by the control. I know you should be able to put in the include for the js files anywhere in the html, although I've yet to try it out with the css files.
If that works, you may want to put in some logic to make sure that the files are only included once if you have more than one of those controls. This shouldn't be too hard to do at the javascript level.
I'd be interested to see what you get working, because I've been looking at doing something similiar where I'm currently working.
I am getting ready to code a bunch of ASP.NET MVC User Controls. All those controls are UI and require CSS. What are the best practices for that? Should I have one gigantic CSS file with the code of all controls?
Ideally, I would like each control to have their own CSS file. Is it possible to do that?
Thanks!
I personally would create a "controls.css" or something similar and put all the css associated with your controls in there. When you're ready to deploy, compress and minify all your css into 1 file. I've been playing around with SquishIt lately and really enjoy it.
If you're dead set on keeping the css files separate for each control I would add an extra ContentPlaceHolder to the <head> of your Master Page, right before the closing </head> and call it something like "ExtraScriptsAndCss." That way if your view uses a certain control you can inject the appropriate css or javascript into the head tag.
"User Controls" in MVC are actually "Html Helpers." They're just HTML, so you're free to deploy/distribute them in whatever way makes sense to you. You can put the styles in a single stylesheet, or split them up. As long as the <link rel> tags bring them into the page to which they are added, it will work fine.
I would recommend you add a parameter to your helpers that allows a user to override the default CSS path and filename, in case they want to use their own.
From a pragmatic point of view, I would go for one gigantic css file. It can be minified and cached by the client. This will save you mocking around with trying to put the right CSS into the head of the document.
I prefer the use of external css and javascript files. There are however many cases where the content of a javascript or css file needs to be dynamic. I'll usually just transfer the javascript or css to inline or inpage code in my aspx page and handle the dynamic stuff there.
Does anyone have a better approach? Would there be a way to generate entire js or css files using asp.net's regular templating language?
I'm currently using webforms but I'd be interested in solving this issue in MVC as well.
Thanks
I've used a HTTPHandler to send back dynamic javascript before. But not something that inherits from System.Web.UI.Page.
Using a HTTPHandler and an ASHX or AXD is the "ASP.Net" way to send back resources dynamically.
I have used handlers for dynamic css. Depending on what you need, you can do the same for js files.
I had a css file with placeholders for the pieces that needed to be dynamic like ##bacgroundcolor##, and the handler just replaced as appropriate.
I have also used an approach where I use css classes to mark html elements that need special behaviors. Then the static js, looks for this elements and hook the appropriate handlers. This is something that certainly would be even easier with jquery (I did it with regular js back then :().
I've done this in an aspx page before, but in my opinion the WebForm style doesn't suit itself well to rendering strictly javascript or CSS. Every time I've done it, the page has ended up looking quite a bit like classic ASP.
hopefully the actual JavaScript you are using would stay static and you would just pass parameters to the JavaScript methods.
I have taken JavaScript code that had been in the markup of a page and containing things like <%= control.ClientID %> and replaced it with static JavaScript. I refactored the code into a class, I then refactored these variable parts into class members. The page creates an instance of the class, with things like ClientID set. The functions can then be static.