I have a ASP.Net MVC project in maintenance. Apparantely the IISExpress is adding portnumbers to localhost which is fine. except when the relative style sheet link does not contain the portnumbers?
How come the portnumbers are not added automaticaly? Seems pretty logical to me that when Visual Studio 2013 starts up it sends the browser to localhost with portnumber but when building the relative style sheet links it does not?
Guy
In view file:
<link rel="stylesheet" href="./metrouicss.css" />
After running in IISexpress:
<link rel="stylesheet" href="http://localhost//Templates/Design 2/metrouicss.css" />
Since IISexpress is running on port 42532 I would rather see it rendered like this:
<link rel="stylesheet" href="http://localhost:42532//Templates/Design 2/metrouicss.css" />
Sorry try this (I missed the rest of the path):
<link rel="stylesheet" href="~/Templates/Design 2/metrouicss.css" />
Or
If you are using MVC 5 you can use the BundleConfig class:
Public Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New StyleBundle("~/Templates/css").Include(
"~/Templates/Design 2/metrouicss.css"))
End Sub
And in view use the following in the tags:
#Styles.Render("~/Templates/css")
Related
I am trying to run this links with thymeleaf but it doesnt work
, the static version with th: runs fine but when using jetty and trying to get thesame css files at run time it does not work
<link rel="stylesheet"
href="../../resources/static/css/font-awesome.min.css"
th:href="#{/resources/static/css/font-awesome.min.css}">
<link rel="stylesheet"
href="../../resources/static/css/bootstrap.css"
th:href="#{/resources/static/css/bootstrap.css}">
If you're accessing your app from http://localhost:8080, try removing the absolute path.
See if this works:
<link rel="stylesheet"
th:href="#{/resources/static/css/font-awesome.min.css}"
href="/css/font-awesome.min.css" />
<link rel="stylesheet"
th:href="#{/resources/static/css/bootstrap.css}"
href="/css/bootstrap.css" />
Also, try to access you css on the browser URL to see if it shows its content:
http://localhost:8080/css/font-awesome.min.css
or
http://localhost:8080/css/bootstrap.css
Hope it's somehow useful.
To working my static file (CSS, JS) I have to write absolute path like /AppName/templates/style/main.css. Is there any solution, that I could write relative path like style/main.css?
If your actual concern is the dynamicness of the webapp context (the "AppName" part), then just retrieve it dynamically by HttpServletRequest#getContextPath().
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/templates/style/main.css" />
<script src="${pageContext.request.contextPath}/templates/js/main.js"></script>
<script>var base = "${pageContext.request.contextPath}";</script>
</head>
<body>
link
</body>
If you want to set a base path for all relative links so that you don't need to repeat ${pageContext.request.contextPath} in every relative link, use the <base> tag. Here's an example with help of JSTL functions.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<head>
<c:set var="url">${pageContext.request.requestURL}</c:set>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(pageContext.request.requestURI))}${pageContext.request.contextPath}/" />
<link rel="stylesheet" href="templates/style/main.css" />
<script src="templates/js/main.js"></script>
<script>var base = document.getElementsByTagName("base")[0].href;</script>
</head>
<body>
link
</body>
This way every relative link (i.e. not starting with / or a scheme) will become relative to the <base>.
This is by the way not specifically related to Tomcat in any way. It's just related to HTTP/HTML basics. You would have the same problem in every other webserver.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is it recommended to use the <base> html tag?
Just use <c:url>-tag with an application context relative path.
When the value parameter starts with an /, then the tag will treat it as an application relative url, and will add the application-name to the url.
Example:
jsp:
<c:url value="/templates/style/main.css" var="mainCssUrl" />`
<link rel="stylesheet" href="${mainCssUrl}" />
...
<c:url value="/home" var="homeUrl" />`
home link
will become this html, with an domain relative url:
<link rel="stylesheet" href="/AppName/templates/style/main.css" />
...
home link
You start tomcat from some directory - which is the $cwd for tomcat. You can specify any path relative to this $cwd.
suppose you have
home
- tomcat
|_bin
- cssStore
|_file.css
And suppose you start tomcat from ~/tomcat, using the command "bin/startup.sh".
~/tomcat becomes the home directory ($cwd) for tomcat
You can access "../cssStore/file.css" from class files in your servlet now
Hope that helps, - M.S.
Instead using entire link we can make as below (solution concerns jsp files)
With JSTL we can make it like:
To link resource like css, js:
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/sample.css" />
<script src="${pageContext.request.contextPath}/js/sample.js"></script>
To simply make a link:
<a id=".." class=".." href="${pageContext.request.contextPath}/jsp/sample.jsp">....</a>
It's worth to get familiar with tags
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
There is also jsp method to do it like below, but better way like above:
<link rel="stylesheet" href="<%=request.getContextPath()%>/style/sample.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/sample.js"></script>
To simply make a link:
<a id=".." class=".." href="<%=request.getContextPath()%>/jsp/sample.jsp">....</a>
This could be done simpler:
<base href="${pageContext.request.contextPath}/"/>
All URL will be formed without unnecessary domain:port but with application context.
This is a derivative of #Ralph suggestion that I've been using. Add the c:url to the top of your JSP.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:url value="/" var="root" />
Then just reference the root variable in your page:
<link rel="stylesheet" href="${root}templates/style/main.css">
I'm experiencing a peculiar issue and I'm having trouble diagnosing it.
I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as a bi-product.
The markup looks like this.
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/site.less" rel="stylesheet" />
<script src="~/Scripts/less-1.5.1.min.js" type="text/javascript"></script>
I am seeing the files correctly delivered to the browser (from Network tab)
There are NO errors in the console.
but when I inspect my element, I see this:
The styles from bootstrap.css are applied as expected.
Am I missing a step? I've used less with ASP.NET before, this one's got me stumped.
Thanks!
Solved. This issue was that the link tag that references the less files had an incorrect rel attribute. For less it should be stylesheet/less as opposed to just stylesheet, which is used for CSS.
<link href="~/Content/site.less" rel="stylesheet/less" type="text/css" />
I installed bootstrap using nuget package manager and the css files are now in my /Content/ folder. However, when trying to reference them using:
<link rel="stylesheet" href="∼/Content/bootstrap.min.css" />
It doesn't work. But when referencing them using a CDN like:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
It does work. I can't seem to figure out what is wrong as I have never had this problem before. I'm using an Empty template with MVC.
EDIT: After some playing around, I found that it was failing to load /%E2%88%BC/Content/bootstrap.css but after removing the tilda (~) it works fine. Anybody got any ideas?
This is not a correct path, it uses the tilda, which is used on the server when rendering links in server controls in asp.net.
Instead of this:
<link rel="stylesheet" href="∼/Content/bootstrap.min.css" />
Try this:
<link rel="stylesheet" href="#Url.Content("∼/Content/bootstrap.min.css")" />
Assuming that you are using Razor.
Alternatively, consider looking into style and script bundling that you get with new asp.net sites. Can be very useful.
Adding "app.UseStaticFiles()" to Startup.cs worked for me:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseBrowserLink();
app.UseStaticFiles();
app.UseMvcWithDefaultRoute();
}
}
Now only Bootsrap 3 works with local links in .Net. Terrible. :( For 4, you must use CDN :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
I'm trying to get my css files bundling with the new MVC4 bundling.
I've added this to my _Layout.cshtml:
<link href="#Url.Content("~/Content/css")" rel="stylesheet" type="text/css" />
When my page renders I see the style being loaded, but nothing is in the request: http://localhost/Content/css
In Global.asax, I've enabled:
BundleTable.Bundles.EnableDefaultBundles();
Instead of EnableDefaultBundles, have you tried this?
BundleTable.Bundles.RegisterTemplateBundles();
Also, I don't think you're supposed to use #Url.Content. I have this and it works:
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
I had an error in my page which was causing this not to work. A partial view was getting called from jQuery and returned a 500 error. Fixing that resolved this problem, now all works well.