MVC 4 Portable Areas CSS/JS minification - asp.net-mvc

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.

Related

How do i route to public folder JS and CSS files instead of sub-directories in rails?

I am working on a rails project where I have multiple users. I have used the standard architecture to create multiple users. I am trying not to use the asset pipeline for now for rendering CSS and JS files.
By default, on my homepage, when i include a JS or CSS file, it automatically looks in the public folder in my rails project folder. for example:
html.erb file 'include tags':
<link rel="stylesheet" href="css/default.css">
<script language="javascript" type="text/javascript" src="js/default.js"></script>
These 2 lines of code now look for the 'public/css/defaults.css' and 'public/js/default.js' respectively.
However, when I SHOW a single user, now the url path changes to for example: www.mywebsite.com/user/13
As a result, now the same 2 include tags for CSS and JS now point to 'public/user/css/defaults.css' and 'public/user/js/defaults.js'. I am having to duplicate the JS and CSS files in a public/user directory for the CSS and JS to be included in the user-show pages.
Is there a way to route the include tags back to the 'public' folder instead of the 'public/user' folder?
Did you try including a '/' for root?
<link rel="stylesheet" href="/css/default.css">
<script language="javascript" type="text/javascript" src="/js/default.js"></script>

iis 7 redirect (?) issue

I have a mvc app which runs here:
sometestingdemo.bla.com/mvcapp
on our test server. It usually runs at the 'top domain level' of the production server like this:
bladibla.com
The html that mvc produces contains code like this:
<link href="/content/css/global/somecoolstyles.css" rel="stylesheet" type="text/css" />
This works obviously fine for the production server but not the test server. What are my options to fix this (ideally without changing the mvc code - if possible)?
The Url.Content() helper produces relative path to the root of the virtual directory in which the application is hosted in IIS. So if on your test environment you host your application on a mvcapp virtual directory that will still produce correct output.
You are using an url helper and not hardcoding the location to this CSS, aren't you? Here's the correct way to link a CSS file:
<link href="#Url.Content("~/content/css/global/somecoolstyles.css")" rel="stylesheet" type="text/css" />
Of course if you are using ASP.NET MVC 4 (which relies on Razor v2.0) you could also simplify this to:
<link href="~/content/css/global/somecoolstyles.css" rel="stylesheet" type="text/css" />
which will implicitly use the url helper to generate correct path.
If on the other hand you have hardcoded the url to this CSS file, then I am afraid that you are pretty much toasted here.

Path to folder outside of folder

I have a folder for all my css in my main folder called "main." In "main" I have another folder called "math." I would like to use my css in the "math" folder, but when I type:
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
on the index.html of the "math" folder it doenst work. I think it's because it's looking for the css folder inside of the math folder. How can i link to the css folder, which is not in the math folder?
If I am understanding, your directory structure is as follows:
siteroot
main
math
css
You are looking to link to a style sheet in /main/css from /main/math/index.html.
There are two solutions, the easiest is to use an absolute path:
<link rel="stylesheet" href="/main/css/basic.css" type="text/css" media="screen" />
Absolute paths are a better solution and will cause less headache down the road. I do not know of any drawbacks, either.
Alternatively, you could use '..' to traverse up a directory
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
Use absolute path:
href="/main/css/..."
You must go up to the same directory as css and math using ../
So it would look like ../css/basic.css
If you Want To locate a file inside of that folder use this
<link rel="stylesheet" href="./css/basic.css" type="text/css" media="screen" />
and if you want to locate a file outside of that folder you could use this snippet
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
The answer also has some dependency on whether or not the site is being developed and tested locally or if your publishing your content to a web server and testing links on the Live Site.
If your href attribute's URL is using a Relative URL and has a domain name being mapped to your Document Root on a Live Site, the above answers are correct.
However, if your testing your links where all the files are on a local PC's file system where no web server is being used locally, then you might find the following information helpful too.
If you are testing locally, there is usually no domain associated with your Document Root and the pathing changes in a number of ways.
If you link to a file in any child directories, you will NOT have an initial slash ("/") in your href or in this case a src attribute because there is no domain and the Relative URL is relative to the current page. (The same rules apply to your href URLs as well)
Local testing URLS:
<img src="images/image-1.jpg" alt="my-Image-1">
..as opposed to a Relative URL on a page in a Live Site that has a domain name where you WOULD use an initial forward slash because it will be relative to the domain.
Remote Live Testing:
<img src="/images/image-1.jpg" alt="my-Image-1">
I am aware this is not the situation you ask about but it should help with the following two examples where the folders are adjacent and parent directories on a local file system. Your situation is that your Relative URL is to a file located in an adjacent directory. See below if your developing and testing locally.
For Relative URLs linking to your css stylesheet files in an adjacent directory or even links to files a parent directory above your current page on a local filesystem (usually without a domain), your href attribute URL pathing should use a double-dot-slash (../). So your situation (if testing locally without a domain) is:
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
...as indicated by #Cory Dolphin above.
I experienced this and found that my issue was that I kept finding different results depending on where I was testing and it was driving me mad.
I originally thought the pathing difference had to do with my local files being on my local Windows system and the reason it was slightly different was becuase of the file system of my remote Linux Apache VPS.
I found that it has more to do with whether it has a domain mapping to your site files or not. This is addressed somewhat in W3Schools.com's Page in the section that's titled The src Attribute and Relative URLs.

ASP.NET MVC: how to append a token to CSS URL properly?

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?

Asp.net MVC Routing Problem

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" />

Resources