I can append a token to my script references like this:
<script type="text/javascript" src="/Some.js?<%= Html.GetToken() %>"></script>
... and this works fine. But, if I try to append the same token the same way to a CSS file reference:
<link rel="stylesheet" type="text/css" href="/Some.css?<%= Html.GetToken() %>" />
... the IIS generates the following markup:
<link rel="stylesheet" type="text/css" href="/Some.css?<%= Html.GetToken() %>" />
I know I'm missing something super simple but I cannot see what exactly. Thanks in advance for any help!
This happens if your <head> section has runat="server". If you can live without it (in ASP.NET MVC you usually can) try it this way.
If not, add or modify the CSS link in your view's Page_Load. If that sounds awful to you, then removing runat="server" should be working :)
There a trick you can use for auto versioning.
Check out the post here:
Auto-versioning in ASP.NET MVC for CSS / JS Files?
Related
I used MVC 3 + Contrib Project PortableAreas to split my web to multiple projects.
Now I moved to MVC 4 and want to use new feature minification for my css and JS.
But when I do:
<link href="#Url.Content("~/DSB/Styles/CSS")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/common/js")" type="text/javascript">
instead of:
<link href="#Url.Content("~/DSB/Styles/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/smoothness/jquery-ui-1.8.12.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/common/jquery-1.4.4.min.js")" type="text/javascript" />
<script src="#Url.Content("~/Scripts/common/jquery-ui-1.8.11.custom.min.js")" type="text/javascript"></script>
it does not work.
How to use bundling/minification in Portable areas?
thanks
The problem here is that the bundling and minification does not foresee handling anything else than actual files. I have 2 solutions here that work.
Extract the files into temp files - requires write privileges for a folder within the app. Here is the code to handle that. It uses a directory called "Static" as the temporary target path. You can use it like this:
bundles.Add(new Rebundler(assemblyWithPortableArea, "~/VirtualPathUsedForResource")
.Include("Fully.Qualified.Embeded.Resource.Name", "other...")
.Rebundle());
Using it in a template is exaxctly as if you would use it in a non portable app, so #Scripts.Render() or #Styles.Render()
The other solution involves creating a bunch of classes that will allow you to use embeded resources. Here is the base class, and here are the script and style bundles. Here's the usage:
bundles.Add(new EmbededStyleBundle(assemblyWithPortableArea, "~/VirtualPathUsedForResource")
.Include("~/AreaName/Content/themes/custom/jquery-ui.css"));
With this approach, you need to use this class to render the resources. So instead of using the #Scripts.Render() or #Styles.Render() the template code looks like this:
#Assets.RenderStyles("virtual path here")
#Assets.RenderScripts("virtual path here")
Note that this code is far from clean. It has been mostly reverse engineered and may skip a few paths, but it seems to work so far.
I can't seem to get a css file to apply its styling to a form. It is quite frustrating now because as far as I know it should work!
In my head I have
<link href="/stylesheets/formtastic.css?1290524609" media="screen" rel="stylesheet" type="text/css" />
and in the body I have:
<form action="/agents" class="formtastic agent" id="new_agent" method="post">
The formtastic.css file should apply styling to the form. It's contents are viewable here:
formtastic.css
Any suggestions or fixes?
The problem was that the following code was not inserted in the form:
<% f.inputs do %>
This creates the html and now the css works.
i.e. the html missing was
dont you need to turn that number into a querysting var?
<link href="/stylesheets/formtastic.css?math=1290524609" media="screen" rel="stylesheet" type="text/css" />
Are you using this with Rails? If so, you could simply put this in your header:
<%= formtastic_stylesheet_link_tag %>
Also, have you run both bundle install and rails generate formtastic:install (for Rails 3, use ./script/generate formtastic for Rails 2)?
Are you sure the path is correct? if you check source with firebug check the link tag and see if its contents are a 404 error. It may be an issue with your root-relative path.
This is only a guess as I can't see how your site is structured.
Are you sure you have to begin with a forward slash ? (/)
Cause it's mean it's at the root of your domain.
Tried <link href="stylesheets/formtastic.css?1290524609" media="screen" rel="stylesheet" type="text/css" /> ?
I have a master page which references a style in the following manner:
<link rel="stylesheet" type="text/css" href="../../Content/Style.css" />
All my pages inherit from this master page. And this works well when the URL is http://www.domain.com/home/details/5, however the URL is http://www.domain.com/home/create, then, of course, Style.css cannot be found because `../../Content/Style.css' resolves to a directory one higher where there is nothing there.
How is this typically handled?
Use Url.Content("~/Content/Style.css") to resolve the path safely.
"~" means the host.
e.g.
<link rel="stylesheet" type="text/css"
href="<%= Url.Content("~/Content/Style.css") %>" />
On a skeleton ASP.MVC that Visual Studio creates, I add a script tag to my head section in Site.Master:
<script src="~/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
This causes the page to not render. In my case, I had a custom controllerfactory and the base method GetControllerInstance threw an exception:
The controller for path
'/~/Scripts/jquery-1.3.2.js' could not
be found or it does not implement
IController.
Using "../../Scripts/jquery-1.3.2.js" for the src does not work either.
The only way it works is:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"
type="text/javascript"></script>
Then of course, the intellisense does not work for jquery. So I have to resort to adding the hack:
<% if (false) { %>
<script src="~/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<% } %>
which the hotfix was supposed to fix according to ScottGu
A line above is a link to a stylesheet:
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
For some reason, that works fine. Whether I use the virtual or relative path, I can see that the resulting url on the page is "Content/Site.css". The same can't be said for the jquery url. jquery link is returned as is - the jquery url is returned on the page containing the "~" or the "../..".
Can someone tell me what is going on?
Thanks
UPDATE:
Thanks to the commenters, I remembered that ~ is an asp.net thing. My only question is then why doesn't the same issue exist for the stylesheet? The link tag above, for example, I can put ~ or relative paths and it always comes out right. Where is the magic?
Have you tried without the ~:
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
The ~ character is used only by server side processing scripts indicating the root of the web site. The reason:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
works is because it is translated to:
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
The "~" is not supported within standard HTML - it is an ASP.NET shortcut. So you've either got to do it the way you specified in your OP and the hack for intellisense, or as Darin specified but then you lose the ability to automatically pick up your VRoot.
I don't know for sure, but maybe MVC is smart enough to not include CSS files in the routing.
how many methods for adding style sheets in a page using Asp.net MVC
Wherever you're specifying the CSS for your details page instead of a relative path e.g.
<link href="../../Content/CSS/details.css" rel="stylesheet" type="text/css" />
try using the content helper and specifying a virtual path instead
<link href="<%= Url.Content("~/Content/CSS/details.css") %>" rel="stylesheet" type="text/css" />
It seems that the site is having trouble loading getting to the CSS file based on a relative link.
Use absolute links to css instead of relative (eg /Content/site.css" instead of "../Content/site.css"). Also you may use Html.Stylesheet("~/Content/site.css") extension (in MvcContrib library) to specify a stylesheet.
Is the problem not getting the right CSS? If so, then I would check your Details.aspx file and make sure the link to the CSS is the right path. Most likely, your Details.aspx file got moved into a new subdirectory or into another directory, thus making the relative paths between the aspx file and the CSS file different.
I would check the page source from the browser and look to see what the path to the CSS file is. The way I would solve the problem would be to modify the aspx file to use a fully-qualified path to the css file. Make sure that works. Then try changing the full path to use relative path.
I had the same issue when working through an example in an MVC book, it mentioned something about the '~' character only working because the <head> tag has the runat="server" attribute on it. So, I tried adding the runat attribute to the link tag itself, as seen below, and it worked:
<link runat="server" href="~/Content/styles.css" rel="stylesheet" type="text/css" />