if i have a single CSS stylesheet for a website and only want to declare it once, that is, not use the following code on every aspx page..
<link href="stylesheets/general.css" rel="stylesheet" type="text/css" />
Am i forced to use a .master page? or is there another way to do this..
in addition to what was mentioned above, use an ASP.Net theme with the CSS in it. The master page will have the css file included automatically.
http://odetocode.com/articles/423.aspx
Master pages are you best bet here. I would guess that once you get that in there, before long you'll find lots of other great things to put in there, too.
There are other solutions, but they're not as easy (e.g. subclass page and inject scripts).
You can use a base page that all your pages inherit from and load it in that. Other than that there's probably a way of doing something by hooking into the pipeline. (Example of this last approach here https://web.archive.org/web/20211029043851/https://www.4guysfromrolla.com/articles/120308-1.aspx)
Related
In an mvc 3 razor project I have a helper which creates a component. I can use this helper to create as many components as I need in the same page.
I have different folders containing css files and their images.
Can I specify the css style of each component from the helper?
i.e #html.MyComponent(100, 200, "pink") will uses the style.css in pink folder.
Ps: I am not using html5 neither css3
If you would use classes instead of files it would be much easier. I would just use different styles for themes. You should look at this question: ASP.NET MVC 3, how to do themes right
ASP.NET MVC 3 Razor: Include JavaScript file in the head tag
I think the same thing can be applied but I don't know if you can do it from a helper.
If you are set on doing it this way - then
You need to select the css file at the top for pink
You need to include all style sheets in loading.
You need to dynamically include style sheets when requested by MyComponent. This is tough as you may end up double including them. You can accomplish this via an ActionFilter to write out the css tags at the end, but this is a hack and I wouldn't recommend it.
Stick with convention and your styles should be requested at the top, so you need to know which styles you are using on the page. Your components shouldn't care about loading a style sheet, it should already be loaded which means you have to make this decision at the top of your page. Since you should already 'know' the names at this point (pink, etc) you can easily write the code at the top to request these files via a simply
<LINK href="#string.Format("/{0}/style.css",YourStyleSheetnameIePinkInThisExample)" rel="stylesheet" type="text/css">
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'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.
I have some pages that use the master page and apply a theme. Some of my pages are not using master pages, instead they have individual css files linked
<link href="../Style/pck.css" rel="stylesheet" type="text/css" />
Although the css works for regular pages for most cases, the body css is taken from the theme. I do not want that. I want that the body css should be taken from pck.css.
What to do?
On the pages that the CSS file is not working, have you checked to make sure that it actually loading the CSS file? (with the relative CSS link, it might not be working for pages that a deeper into your site structure).
Alternatively, I sometimes find that the needs to be the very first thing on the page or you force some browsers into compatibility mode and all hell breaks loose when that happens.
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.