Im trying to convert an html template to ASP.Net MVC 4 project. Bbut i have run in an problem. Then opening the localHost:11062/ site everything looks prefect. But if i try same address just calling the controller and action direct localHost:11062/StartMenu/Index, which should be the same, but it's not. For me it looks like the css file isent loaded correct. But if it wasent the start site should not look different?
I suspect that you have hardcoded the url to some of your CSS files, just like this:
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
instead of using an url helper:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Of course the same is true for all static resources such as javascript, images, ...
You should never hardcode urls in an ASP.NET MVC application. Always use url helpers when dealing with urls.
Also if you are referencing some static resources (such as images) in your CSS file, don't forget that they should be relative to the location of the CSS file.
You might easily see this in the Net tab of a javascript debugging tool such as FireBug where you would get 404 errors for the corresponding resource.
Related
I am new to Spring and I am trying to make a beautiful Web Application, and so far I set up everything, and if I run my page on the browser it shows as it is supposed. But if I run it with tomcat on port 8080 (I am using Intelijj) it doesn't load css and js files not even pictures.
I have literally searched this problem and open all the StackOverflow similar questions, I tried to write a configuration file, but it doesn't do anything, and I am uncertain about this approach because I have seen examples of people that did not write any configuration, but still they managed to make all their static resources load, and so on. Is it some secret application properties that need to write? Or there is a config code that has to write?
My resources folder looks like this:
-resources
-static
-CSS
-things.css
-JS
-datepicker.js
-Images
-many pictures
-templates
-Home.html and other pages
And the code that I used to refer to static-CSS-things.css is like this:
link href="../static/CSS/things.css" th:href="#{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"
I thought this would make my css file to load, but it doesn't. Same for the js and the pictures. Thank you!
Ensure your css and js files are in the following structure:
src/main/resources/static/css/things.css
src/main/resources/static/js/things.js
Ensure you are calling your static resources from pages that are under the spring boot template folder, which is in src/main/resources/templates
Always refer to your resources using the thymeleaf tag, because this way no matter the port you are running your application, it will always load properly.
src/main/resources/templates/example.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- CSS -->
<link th:href="#{/css/things.css}" rel="stylesheet"></link>
<!-- JS -->
<script th:src="#{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>
If still not working, try to use the inspect from Google Chrome, go to Network tab and check what error is returning from your css and js files, then comment here.
Assuming you have css and js folder under static folder then use it like this -
<link href="css/custom.css" rel="stylesheet">
<script src="js/custom.js"></script>
you might wanna take a look at these too -
https://www.springboottutorial.com/spring-boot-with-static-content-css-and-javascript-js
https://www.baeldung.com/spring-mvc-static-resources
Worth noting, make sure you have thymeleaf dependency(ies) and tags appropriately.
I have Rails application with documentation which is static html pages in the /public folder.
The tree of my public folder:
-public
-docs
-intro
introduction.html
-css
some.css
index.html
Index.html file is:
<link rel="stylesheet" href="css/some.css" type="text/css" />
Some of the text
<li>href="intro/introduction.html"><em>Introduction</em></a></li>
When I open index page css isn't loaded, and when I try to click on link it says routing error. As I understood static pages don't know where to look for css and other html pages.
I just want static pages without any routes and controllers, nginx.
Any ideas?
All the public folder content is accessible via "/"
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
You can use high_voltage gem to generate static_pages
Its perfectly valid to serve static files (pages or not) via the public directory. As Kirka121 said rails is not really built for this purpose but can still work with it.
In development environment it should just work to serve whatever files you have in public, for production environment you might need to configure whatever server you use to serve them - but this should be covered by its normal setup anyway, if not its set up wrong.
So by default the rails public folder can directly by accessed at the root of the project.
As far as your code goes the relative links/urls seem to be the issue. Its generally better to use absolute paths for everything not to confuse anything, which leads to very hard to find bugs.
With your folder structure and example this would be:
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
Some of the text
<li><em>Introduction</em></li>
I'm working on a simple CRUD application to keep track of phones using Webmatrix 3. My Default.cshtml file displays the table.
When clicking on a row it goes to the EditPN.cshtml page for the user to edit the information for that record.
Now, following this tutorial I look into the value of UrlData[0] in my EditPN page.
Everything works fine with just one problem: since the URL ends up being something like this:
http://localhost:64053/EditPN/2223334444 my paths for CSS and JS files are off. My brute force solution has been to have both:
<link href="_css/myStyles.css" rel="stylesheet">
<link href="../_css/myStyles.css" rel="stylesheet">
in my _Layout.cshtml.
That way both http://localhost:64053/Default.cshtml and http://localhost:64053/EditPN/222333444 will have the CSS styles.
Since I don't like that, I tried to format the URL string to be this: http://localhost:64053/EditPN?pn=2223334444. Didn't work.
Tried this too: http://localhost:64053/EditPN.cshtml?pn=2223334444. Didn't work either. It doesn't even go to the EditPN.cshtml page.
How can I solve this issue? Oh, and BTW, I don't want to use the Webmatrix helpers. I want to keep things under JS, jQuery, etc.
You should prefix the url to your css and js files with a ~/, which tells web pages to work out the relative path:
<link href="~/_css/myStyles.css" rel="stylesheet" />
I have multiple sites residing inside one umbraco CMS for one client. The sites has many design items in common but the designer had to make one shared css file with a few different ones specific to each site.
Now, I ran into a problem with selecting the relevant css file for a site page. If a user is viewing page1 on site X then I must use css X, but if the user is viewing page1 on site Y I must use css Y.
Any idea how to do it? I thought about using Razor inside the template and check the domain name or the homepage doctype for that domain, any better ideas?
You may want to check this answer to microsite in umbraco. It gives a pretty good explanation on how to style different sites within the same Umbraco instance. It's mostly geared towards master pages, but it should apply razor views as well.
I recommend using razor to find what site you are on. You most probably have several "site" nodes at your root with managed hostnames (I'm guessing here). Create a macro to include your stylesheets and using naming conventions, include both specific and generic stylesheets.
<umbraco:Macro ID="Macro1" Alias="Stylesheets" runat="server" />
Then the macro:
var site = CurrentModel.AncestorOrSelf("Site");
<link rel="stylesheet" type="text/css" href="/css/generic.css" media="all" />
<link rel="stylesheet" type="text/css" href="/site/#site.Name.css" media="all" />
You can do the same thing with javascript files if you need.
I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp
<link rel="stylesheet" href = "css/styles.css">
I'm having no luck getting my css to show...
what am i missing?
The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.
One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
This will end up in the generated HTML output as follows:
<link rel="stylesheet" href="/yourContextPath/css/styles.css">
This way the browser will be able to download them properly.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.
If your app context path is for example "myApp" then you can do something like this to make it work:
<link rel="stylesheet" href = "/myApp/css/styles.css">
If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp
Then your link tag would be
<link rel="stylesheet" href = "../css/styles.css">
Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.
Hope this helps!