deployment path issue in css - asp.net-mvc

I have to rewrite a legacy asp.net mvc app using lots of:
Url.Content()
to get it to work in a different/additional deployment environment where the virtual directory is a sub directory of the default site.
At the moment css classes like this:
.icos-pencil:before { content: url(/content/images/global/icons/usual/icon-pencil.png); }
are also broke. Is there a similar 'helper' (?) like Url.Content for the css above?

If you want use helper in js or css file you can write own view engine such as jsHelper or you can use this code
background-image:url('../../content/images/global/icons/usual/icon-pencil.png');
becomes
background-image:url('content/images/global/icons/usual/icon-pencil.png');

Simply use relative path in your CSS.

Related

Html.EditorFor not loading custom template paths

In my program I have put,
<%: Html.EditorFor(m => m.EducationData
, "~/Views/HTML/Shared/EditorTemplates/Foo/CustomTemplate.ascx")%>
but it doesn't load the editor templates from the path I've given. I've seen in some of the examples,link where they have given custom paths for the templates. Can anyone suggest something? or does MVC2 supports custom paths for editor templates? or Is there a way to customize the web.config or some configurations,so I could change the default template locations???
I think you have too many folders. There is a specific convention you should follow when using EditorTemplates and DisplayTemplates. Try putting your templates in this folder and it should work:
"~/Views/Shared/EditorTemplates/CustomTemplate.ascx"
Update:
Not all of your editortemplates need to go into the Shared folder. You can put controller-specific templates into controller-specific folders too:
"~/Views/Home/EditorTemplates/CustomTemplate.ascx"

Relative filename in ERB files

I am putting my ERB files in app/view. The problem is that sometimes I make mistakes when including CSS and JS files. I refer to them as "js/include.js" or "css/default.css" instead of /js/include.js and /css/default.css
However, these files are located in the public directory not the app/views directory so as a result the page breaks.
Is there a way to change the default behavior so that it looks in public folder whenever I refer to these files relatively?
If you stick with the Rails conventions you'll save yourself some grief. Use stylesheet_link_tag and javascript_include_tag in your layouts. And don't scatter css and js includes around your views. Use custom layouts instead.
For example, if you have an admin interface with a different look and different behavior you could add app/views/layouts/admin.html.erb. Then, in AdminController specify that it should use the admin layout. You can also specify the layout at the controller action level if you need to.

How can I access Rails objects in Sass?

In a Rails 3.1.0 project, I have Companies with a few customizable attributes like background_color and link_color. I want to be able to set some Sass variables like so:
$background_color: <%= #company.background_color %>
$link_color: <%= #company.link_color
...
This doesn't work because #company is nil when Sass does its thing. I'm not sure how to go about solving this in a way that's dynamic (companies can be created and colors can be changed and the views update immediately). Any suggestions?
I can think of a couple approaches off the top of my head:
Serve your stylesheet through a controller.
Use CSS classes to configure the colors and serve just that CSS through a controller, inlined partial, or a CSS #import.
Serving your stylesheet through a controller is pretty straightforward so there's not much to say. This might be a bit ugly and cumbersome.
For the second one, you'd add a couple extra CSS classes:
.custom-bg {
background-color: some-default-bg;
}
.link-fg {
color: some-default-fg;
}
/*...*/
Then any element that need to use the custom background color would need their usual CSS classes and custom-bg; similar shenanigans would be needed for the other configurable values. To supply the customized CSS, you could inline a <style> element into your HTML using a standard ERB partial or you could serve the CSS through a controller (either through <style src="..."> or #import). So you'd fake the SASSy goodness with old school multiple CSS classes in your HTML.
There's also JavaScript. You'd need some way to identify the elements that need their colors adjusted and then adjust them directly with things like this:
$('.need-custom-background').css('background-color', '...');
I think you might be able to do something just like what you have there, but you need to change the extensions of the files to '.css.scss.erb'
To follow up on this, I did create a stylesheet controller but it was rather contrived to get Sass parsing and asset pipeline load paths all working correctly. I ended up dumping that and reorganizing the styles so I could generate a static stylesheet for each company which gets regenerated and uploaded to S3 on company update.
Well, if you mean a dynamic object like a model loaded via a controller, you can't really, at least not very easily. This is because unlike HTML ERB templates, the SASS ones are generally rendered once and served statically unless something changes in the code or they are re-precompiled via rake (depending on your environment configs). But you can access some helper methods, global objects, and use some ruby in there by renaming the file with an "erb" extension e.g. application.css.scss.erb. See
https://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
How can I use Ruby/Rails variables inside Sass?)
If you need styles based on dynamically loaded objects, like models, you can...
Write CSS styles literally in the template
Compile the stylesheets dynamically. See the top-rated answer here: How do I create dynamic CSS in Rails?
For some use cases you might accomplish the same thing by leveraging Rails/SASS's import path hierarchy (i.e. SASS #import 'partial_name_with_no_path' will search the importing SASS files folder first and then fall back to the top level - You can configure this as well).

Asp MVC 3: Dynamically resolve relative resources in views

I have a javascript application that runs in a view (index.cshtml).
Problem:
The problem is all relative paths are relative to the current url, which would be ok in a simple html webapp but not in asp mvc. The js-app shouldn't have to bother whether it's served in a normal html file or via a asp mvc page.
I.e. http://www.domain.com/<controller>/<action>/ contains a script test.js. This script loads an external xml file searching relative to it ie. "data/data.xml". The resulting url reads http://www.domain.com/<controller>/<action>/data/data.xml. This isn't found.
Question:
Is there a way to route static files (images,..., maybe even js files) to the content folder like "~/Content/controller/action/<pathToFile>/"?
Any help appreciated!
Lg
warappa
PS: I know about Url.Content() but that doesn't fit here.
The solution doesn't require mapping - just a simple html tag in the header:
<base href="#(Request.Url.GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped) +
Url.Content("~/content/controller/action/"))" />
Lg
warappa
EDIT
Some browsers need an absolute url - sample updated.
In you can use absolute URL addresses to access you static resources:
$('img').attr('src', '/Content/Pictures/picture1.png');
or
<script src="/Scripts/script.js"></script>
This way you will allways get the same resources relative to the page base address, no matter if you load the script in a /{Controller}/{Action}/{View}, {Area}/{Controller}/{Action}/{View}, a custom route or even in a static script html page.
Or perhaps what you're looking for is the use of css files, since CSS's url('<path>') resolves the addresses relative to the CSS file's location. You would just need to import the one CSS file that had all the resource (image?) file paths. Then the scripts could reference the distinct class names, thus not being location aware at all. This is what libraries like jQuery UI do. But again this would require a fixed folder structure relative to the CSS document.

Possible to use stylesheet.css.erb in Rails?

Hey, I'm new to Rails and Ruby in general. I was wondering if it's possible to use an embedded ruby css file (css.erb), similar to using html.erb files for views.
For example, I'm using
<%= stylesheet_link_tag "main" %>
to link to my main.css file in public/stylesheets, but when I change the file extension from main.css to main.css.erb, it no longer renders the css..
Is this even possible, or is there a better way?
By the time this question was answered there was indeed no way to use .css.erb files in rails properly.
But the new rails 3.1 asset pipeline enables you to use asset helpers inside your css file. The css parsers is not binded a controller/action scope, but the ruby parser is now able to resolve some issues like image path references
.class { background-image: url(<%= asset_path 'image.png' %>) }
or embed an image directly into your css
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
source: http://guides.rubyonrails.org/asset_pipeline.html
You can also generate a "stylesheets" controller
./script/generate controller stylesheets main admin maintenance
You get something like this:
exists app/controllers/
exists app/helpers/
create app/views/stylesheets
exists test/functional/
exists test/unit/helpers/
create app/controllers/stylesheets_controller.rb
create test/functional/stylesheets_controller_test.rb
create app/helpers/stylesheets_helper.rb
create test/unit/helpers/stylesheets_helper_test.rb
create app/views/stylesheets/main.html.erb
create app/views/stylesheets/admin.html.erb
create app/views/stylesheets/maintenance.html.erb
And you can later use the app/views/stylesheets/ files as dynamically rendered css files.
The same method works for javascript files (javascripts controller)
I dont think so. Whats your intention - to use variables and have them be evaluated at runtime, or "compile" time (meaning like deploy time?). Also, what would be the ERB binding? Would it bind to the controller, like views and helpers are, so that ERB instance would have access to the instance variables set in the controller? I just pose this question as more of a theoretical exercise.
If you want to use variables in your CSS than you can use Haml's SASS. You dont get access to the controller's scope but you do get basic variables and looping. Plus other cool stuff like mixins.

Resources