I have a layout page which is shared across all of the views in my app. That view references the .css in my app. For the sake of reference, I currently have the following at the top of my _layout.cshtml file:
<link rel="stylesheet" href="/css/themes/default/app.css" />
I am planning on taking this app and loading into a phone app via PhoneGap. Because of that, I cannot use /css/themes/default.app.css. Instead, I need to get it converted to a string that is relative to the path of the file. For instance, I need to dynamically generate a value that looks something like the following:
<link rel="stylesheet" href="../../../css/themes/default/app.css" />
The number of "../" will be determined based on how deep it is. I figured there would be a utility or something built into the ASP.NET MVC 3 framework to do this. However, I can't find anything. I have a LOT of files and I don't want to have to manually update all of the url patterns. Is there a utility that will automatically handle what I'm trying to acomplish? If so, how?
Thank you
Use the UrlHelper.Content HTML Helper method .
This method Converts a virtual (relative) path to an application absolute path.
<link href="#Url.Content("~/css/themes/default/app.css")"
rel="stylesheet" type="text/css" />
You may drop your css folder under the Content directory in the root of your MVC project
Related
I was supplied with a custom layout for the login page of my Laravel project.
When I opened login.html file, which represents the layout for that specific page I saw such links
<!-- Base Css Files -->
<link href="assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
...
So I figured that I only need to copy the assets folder, which came with the template (there are all needed bootstraps, jqueries and whatnot) to my projects app\resources\assets directory
Now, when I copied the code from login.html into my login.blade.php view and copied the templates' assets folder to app\resources\assets it doesnt work. It only displays naked html code when I open the page.
What am I doing wrong in linking the assets folder?
The resources folder is (like the name says) for the resources.
If you don't want/need to build/compile/min your scripts, then just put them in the public folder, so you can access them from your template.
In your case
public/assets/libs...
In order to access assets, you have two ways to approach it. Either using Elixir/gulp or to use direct access.
Gulp is a node.js application that reads your assets files, whether JS, CSS, Coffee, etc...and combine them in single files. Gulp reads the files defined in the gulpfile.js, and you can access the output files in your blade file using elixir().
You can read more about Elixir here.
In your specific case, you can just place the files under the public/ directory. So Laravel treats public as the root directory, and if you want to read the file assets/css/foo.css just place the file in public/assets/css/foo.css
I have developed an Asp.Net MVC application in Visual Studio 2010. So far so good. In terms of path resolution for images and script execution, everything runs perfect within Visual Studio. As I am using the default template of MVC I am using "../../Script/*.js" kind of path. After I build the package for deployment and deploy in IIS, the images and the script references stop working. I think it might be a path resolution issue. I tried with "~/Script/.js" but it does not work either. Could somebody suggest why this is happening?
Consider using two things in any of your asp.net MVC projects.
1) Using a Layout for common site elements using _Layout.cshtml and include all your javascript and css files inside that and do not put it on the any other .cshtml pages unless necessary required. see here how to use _Layout.cshtml
2) Second thing always use #Url.Content() directive to define your paths e.g
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
This two way always helps you and never have problem even if you deploy package.
Hope above helps.
This type of problem we get in asp.net when we use URL Rewriting and asp.net mvc have a URL Rewriting by default.
so when you use script or urls and js then you set your path like this .
#Url.Content("~/Your Url or Your script or Your js File ") ;
i think this will help you.
MVC has built in functions that generates url's, so use those instead of hard code url
#Url.Content("~/yourpath")
When you deploy your webapp onto IIS, your site is set to run as Virtual Directory so the website root is no longer the same as the application root, MVC has
ActionLinks,Url.Contents to resolve Url's.
MSDN help
I'm trying to use SquishIt for minifying CSS and Javascripts in ASP.NET MVC 3 project.
When I use Render method:
.Render("~/content/themes/base/combined_#.css");
css is generated with random number instead of #, but link to css file is not generated and I need to insert it manually to cshtml file:
<link href="~/content/themes/base/combined_#.css" rel="stylesheet" type="text/css" />
but I don't know this random number, added to file name.
Without # it works fine.
But I have impression that Render should automatically generate css link according to this article:
http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher
Am I correct?
The following works great for me:
#Html.Raw(Bundle.JavaScript()
.Add("~/scripts/jquery-1.5.1.js")
.Add("~/scripts/jquery.unobtrusive-ajax.js")
.ForceRelease()
.Render("~/scripts/combined_#.js")
)
#Html.Raw(
Bundle.Css()
.Add("~/content/site.css")
.Add("~/content/site2.css")
.ForceRelease()
.Render("~/content/combined_#.css")
)
it emits:
<script type="text/javascript" src="/scripts/combined_B8A33BDE4B3C108D921DFA67034C4611.js"></script>
<link rel="stylesheet" type="text/css" href="/content/combined_97A4455A9F39EE7491ECD741AB4887B5.css" />
and when I navigate to the corresponding url the correct squished and combined resource is obtained.
There is also a Contrib project which provides a base Razor page to integrate SquishIt in an ASP.NET MVC application.
Or add a reference to the SquishIt.Mvc assembly and use the .MvcRender method
eg.
#using SquishIt.Framework
#using SquishIt.Mvc
#(Bundle.JavaScript()
.Add("~/scripts/jquery-1.5.1.js")
.Add("~/scripts/jquery.unobtrusive-ajax.js")
.ForceRelease()
.MvcRender("~/scripts/combined_#.js")
)
Is it possible for a single page on a Joomla website to include it's own custom .js and .css files?
I basically would like to add two custom javascript and css files for a particular page. I don't want these files included into any other Joomla pages.
Any suggestions would be appreciated.
Thank you
Try using a custom code extension such as JUMI. It is designed exactly for this purpose.
From the description: With Jumi you can include php, html, javascript scripts into the modules position, articles, category or section descriptions, or into your own custom made component pages.
The solution from Soygul wont result in proper HTML since these statements / includes belong to the HTML header.
Use : http://extensions.joomla.org/extensions/edition/custom-code-in-modules/11936
This plugin allows inserting material into the head section of your Joomla web site.
You can then use the menu assignment functionality to just add that to certain pages.
Its quite easy to write a simple module like that for yourself - but since this seems already available go with that one. If it doesn't fit your needs :
You just need an "empty / hello world" module with these two statements :
( http://docs.joomla.org/Creating_a_Hello_World_Module_for_Joomla_1.5 )
( http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page )
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHTML::script($filename, $path, $mootools);
// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHTML::stylesheet($filename, $path);
I'm not a big fan of adding new extensions to Joomla unless absolutely necessary. If you do, make sure it's not on Joomla's list of vulnerable extensions, first. Each third-party extension/plugin you add is just one more potential back door for hackers.
To add your own custom CSS for a page, you can either edit your template's master CSS file, or just create your own and link it to the project. Here's how you'd do that:
First, figure out how your CSS files are being called. The actual file names will surely differ from my example, based upon the template you're using, but let's look at the Joomla SYSTEM template, which is located in templates/system. The index.php file controls everything, so open it up and you'll find this line:
<?php
include dirname(__FILE__).DIRECTORY_SEPARATOR.'component.php';
?>
Open component.php and you'll see some code that looks like this:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
You can see the call to include a CSS file in the 3rd line. All you need to do is add another line calling a CSS file you create. Create a new file called /templates/system/css/custom.css (or whatever you like) and rewrite the code segment in component.php to look like this:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/custom.css" type="text/css" />
Now you can just code out your own CSS in the new custom.css file you created. You can do this with any template system from RocketTheme or YooTheme just as easily. In fact, if you use one of their templates, they probably already have a custom.css file that you can simply add your own code to. Just be aware if you do it that way and then later update the template, you'll lose your code additions. That's why I prefer writing my own file. You can probably do something very similar to include custom JS code, but I tend to avoid JS like the plague, so someone else will have to address how to link out to a custom JS file.
I am new to spring MVC coming with experience using PHP MVC frameworks and ROR. I am having a hard time finding the appropriate way to organize and include front end assets into the view templates.
Here is the default code Roo produces for the default style sheet:
<spring:theme code="styleSheet" var="roo_css"/>
<spring:url value="/${roo_css}" var="roo_css_url"/>
<spring:url value="/static/images/favicon.ico" var="favicon" />
<link rel="stylesheet" type="text/css" media="screen" href="${roo_css_url}"></link>
This seems totally unnecessary to me. We are calling a variable from the spring:theme code list. Assigning it to a variable in the view scope/ and then calling that view variable for the
Ideally I would like to have some path tokens like: ${imagePage}, ${stylePath}, etc. That we could drop in and use for soft linking.
Hopefully somebody can point me to some quality SpringMVC documentation or give some examples. Thanks
Update:
I have seen a few examples and engfer has posted one below that suggest using the spring tags within the html to ouput the href like so
About
This would be acceptable however I am getting the following error from jetty
Caused by: org.apache.jasper.JasperException: /WEB-INF/views/footer.jspx(6,22) The value of attribute "href" associated with an element type "null" must not contain the '<' character.
Am I missing something with the encoding? or DTD?
Update:
So apparently the in-line href style only works with .jsp files as .jspx (What im using) is strict xml. What are the benefits of .jspx over .jsp and
The code you have provided from Roo is a little unnecessary. If you look at the Spring MVC documentation as tkeE2036 pointed out... you will see the themes section http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/mvc.html#mvc-themeresolver
<link rel="stylesheet" href="<spring:theme code='styleSheet'/>" type="text/css"/>
The Spring theme tag gives you the ability to internationalize your CSS/images/js (imagine an image that has the word 'Hello' which needs to be changed for English/Spanish/etc) into separate internationalized theme files that follow the http://java.sun.com/javase/6/docs/api/java/util/ResourceBundle.html convention and Spring will automatically resolve the correct resource bundled theme.
If you still want your ${imagePath} or whatever, you can use the <spring:url/> tag to get your job done.
<spring:url value="/images" var="imagePath"/>
<link rel="stylesheet" href="${imagePath}/foo.png" type="text/css"/>