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")
)
Related
Error Message From Dev Tools
The Folder Structure of the project
How I linked this
So I am trying to Link local css file to thymeleaf but it has not been working. I was wondering how to link css to thymeleaf in this case. Thank you.
You are using href="#{/css/signup.css}", but you need to use th:href like this:
<link rel="stylesheet" th:href="#{/css/signup.css}" />
In spring-boot application, pointed all css, js, images are in below structure:
JSP page is loading with all css/js/images when the URL is like this http://localhost:8080/request/
But when the URL is like this http://localhost:8080/request/rt/home
(css/image/js are not loading).
When I click the url of bootstrap.min.css from view source page, it is showing like below:
http://localhost:8080/request/rt/public/css/bootstrap.min.css
"rt" is adding in between the url.
How to omit the "rt" from path.
so that will get path like http://localhost:8080/request/public/css/bootstrap.min.css
It will load css/js/images
Please suggest
Without seeing your jsp, according to your statements of how it behaves, I would say that you are declaring your stylesheet and resources reference this way, without starting by a /:
<link href="public/css/bootstrap.min.css" rel="stylesheet">
<script src="public/css/bootstrap.min.js"></script>
This means that the resources are relative to the virtual directory of the url bar of the browser.
You should declare your references this way:
<link href="/request/public/css/bootstrap.min.css" rel="stylesheet">
<script src="/request/public/css/bootstrap.min.js"></script>
To avoid hardcoding the contextpath, you could use:
<link href="${pageContext.request.contextPath}/public/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/public/css/bootstrap.min.js"></script>
Whicho would resolve your context name
Try this way
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
or
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
I'm porting an old site to a new template and am having problems with the Windows 2008 rewrite module. The link I'm trying to rewrite looks like this:
http://ltweb2008.serveronline.net/product.php?pID=75
and brings up the page just fine. Then I apply the new URL and it loads the proper content, but doesn't load the template's style.css file anymore.
http://ltweb2008.serveronline.net/product/75/any-text-here
The problem seems to be that the company who made the template (canvas) put the main .css file in the root directory, but loaded all the rest in /css. Now I can't get the main .css file to load using the rewrite and when I move it down to /css it only displays a blank page, though when I check out the page source it's all there.
With this the page shows but is not using style.css (with rewrite):
<link rel="stylesheet" href="style.css" type="text/css" />
With any of these the page is completely blank (with rewrite):
<link rel="stylesheet" href="/style.css" type="text/css" /> OR
<link rel="stylesheet" href="/css/style.css" type="text/css" /> OR
<link rel="stylesheet" href="http://ltweb2008.serveronline.net/style.css" type="text/css" />
I'm using this for the Pattern:
^product/([0-9]+)/([^/]+)$
And the Rewrite URL:
/product.php?pID={R:1}
Does anyone know what I'm missing?
one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,
This is because your relative URIs have their base changed. Originally, the base is / when the page is /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
Maybe you need one thing, maybe both, I didn't test, but this solved it for me:
1.) ADD THIS in page_load :
Page.Header.DataBind() ' Needed because we have <%# %> codeblocks in the HEADER (seems header only causing this) WITH the AjaxControlToolkit running on the page. That's what broke it until we put in this and put in the pound instead of = sign in the html.
2.) Add this in ASPX:
<%# MasterType VirtualPath="~/dir1/dir2whateverdir/MasterPage.master" %>
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
I am using Spring roo and STS Insight server. I want to create a javascripts folder to add my javascript files and link them in my JSP. however, I don't know where to put the javascript files because, my JSP never can find it.
More interestingly, the dojo.js is located with no fuss. I looked in my sts directory. It appears insight.war could be housing the dojo.js. but I still can't figure out how the path is setup.
resources/dojo/dojo.js is located.
in file system, we have insight.war/dojo/dojo/dojo.js. So clearly, resources is pointed to insight.war/dojo/dojo.js. Where is this configuration? I want to change it, Preferably best load it from within my application.
Can someone help me please?
You can put all your files (images, css, javascript ...) in src\main\webapp
include a css like
<style type="text/css">
#import "${pageContext.request.contextPath}/your_dir_in_src_main_webapp/your_css.css";
</style>
include a js like
if you js contains jsp tag then
<script type="text/javascript" charset="utf-8">
<%# include file="/your_dir_in_src_main_webapp/your_js.js" %>
</script>
if you js doesnt contant jsp tag than
<script type="text/javascript" charset="utf-8" src="/your_dir_in_src_main_webapp/your_js.js"></script>