I've started to work a bit with master pages for an ASP.net mvc site and I've come across a question. When I link in a stylesheet on the master page it seems to update the path to the sheet correctly. That is in the code I have
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
but looking at the source once the page is fed to a browser I get
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
which is perfect. However the same path translation doesn't seem to work for script files.
<script src="../../Content/menu.js" type="text/javascript"></script>
just comes out as the same thing. It still seems to work on a top level page but I suspect that is just the browser/web server correcting my error. Is there a way to get the src path to be globbed too?
<script src="<%= ResolveClientUrl("~/Content/menu.js") %>" type="text/javascript"></script>
Make an extension method. Here's a method:
public static string ResolveUrl(this HtmlHelper helper, string virtualUrl)
{
HttpContextBase ctx = helper.ViewContext.HttpContext;
string result = virtualUrl;
if (virtualUrl.StartsWith("~/"))
{
virtualUrl = virtualUrl.Remove(0, 2);
//get the site root
string siteRoot = ctx.Request.ApplicationPath;
if (!siteRoot.EndsWith("/"))
siteRoot += "/";
result = siteRoot + virtualUrl;
}
return result;
}
You can then write your script ref like:
<script type="text/javascript" src="<%= Html.ResolveUrl("~/Content/menu.js")%>"></script>
Use this instead:
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
or you can use BASE tag in you HEAD section of page. All you links then are relative to location entered in "base" tag, and you don't have to use "../../" and "~" stuff. Except links in CSS files (background url,etc), where links are relative to location of css file.
Related
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 using asp mvc, and I'm using the following code to generate the CSS html reference:
#Styles.Render("~/Content/css")
which generates the following html:
<link href="/Content/site.css" rel="stylesheet"/>
and that works fine. However, I need to add media type as an additional attribute. How can I go about using this style.render to add attributes to the generated html? Should I be thinking about making the change in the bundle config instead?
edit: I would like the end product to look like this:
<link href="/Content/site.css" rel="stylesheet" media="handheld"/>
You should be using #Styles.RenderFormat() for that:
#Styles.RenderFormat(#"<link href=""{0}""
rel=""stylesheet""
media=""handheld"" />",
"~/Content/css")
Try this
< link href="#Styles.Url("~/Content/css")" rel="stylesheet" type="text/css" media="handheld" />
In almost every ASP.NET MVC example I've come across, I always see Url.Content being used to reference CSS, JavaScript, and Images. Not once has anyone explained WHY to use it.
Anyone care to explain?
What's so bad about doing:
<img src="/Content/Img/MyImage.png" alt="My Image" />
<script src="/Scripts/jquery.js" type="text/javascript"></script>
<link href="/Content/Css/Default.css" rel="stylesheet" type="text/css" media="all" />
What you have works the same as Url.Content(). Url.Content() is just like adding a ~ to be beginning of your paths:
<script src="~/Scripts/jquery.js" type="text/javascript"></script>
Just ensures the path is always correct with routing. You can also make a Html helper method to make this easier:
public static string RenderScript(this HtmlHelper htmlHelper, string file) {
var f = file.EndsWith(".js") ? file : string.Concat(file, ".js");
return string.Format("<script src=\"/public/scripts/{0}\" type=\"text/javascript\"></script>", f);
}
Then you can just put this in your masterpage:
<%=Html.RenderScript("jquery")%>
i have some script..it lies in some direktori :
var/www/html/dataTables-1.6/media/css/demo_page.css
how to put in html page?
<link href=......??? rel="stylesheet" type="text/css" media="all">
Assuming html is your webroot, place the following in your head tag.
<link href="/dataTables-1.6/media/css/demo_page.css" rel="stylesheet" type="text/css" media="all">
Is this what you were asking?
You could use the full server path "/location/of/the/file/here.css" or you could use the relative path from where the file you are placing it in resides. "../back/one/directory.css". Or you could use the full web URL for it "http://www.yourhost/yourwebRoot/yourfile.css".
I am working in an ASP.NET MasterPage and am having trouble with <link href="..." />.
I am trying to substitute in a stylesheet with a specific name:
<link href="/Content/Styles/<%=Model.Style%>.css" rel="stylesheet" type="text/css" />
Unfortunately, this creates the HTML output:
<link href="/Content/Styles/<%=Model.Style%>.css" rel="stylesheet" type="text/css" />
Which is clearly not what was intended.
If I put the same code in a View placeholder, it works perfectly. This is not a good solution though as I have many pages where I just want it to do the same thing.
It looks like it's trying to automatically correct the URL - is there a way to switch this off?
Edit 1:
I have fixed this temporarily using:
<link href=<%=String.Format("\"/Content/Styles/{0}.css\"", Model.Style)%> rel="stylesheet" type="text/css" />
All the links in your question and in the solution posted thus far will fail if your site is deployed in a virtual folder. Instead, do:
<link href="<%= Url.Content("~/Content/Styles/" + Model.Style + ".css") %>" rel="stylesheet" type="text/css" />
This (1) fixes the problem in your question, and (2) allows your site to work in a virtual folder.
Try this:
<link href="/Content/Styles/<%= "" + Model.Style%>.css" rel="stylesheet" type="text/css" media="screen" />
Ugly but works.