I've turned Stack Overflow up and down, but, unfortunately, none of the answers helped me.
I have a web app that works perfectly on my local PC using IIS provided by the Visual Studio, but when I deploy this app to the server only the CSS is displayed properly.
Folder structure for files is as follows:
Root (this folder is named Knowledge Management on the server)
CSS
JS
Media
Uploads
Documents
Images
Users
My code, at least for Master page head section looks like this:
<head runat="server">
<link href="CSS/Style.css" rel="stylesheet" />
<script src="/JS/jQuery203Min.js"></script>
<script src="/JS/jQueryUI1103Min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
However, browser generates it like this:
<head>
<link href="../../CSS/Style.css" rel="stylesheet" />
<script src="JS/jQuery203Min.js"></script>
<script src="JS/jQueryUI1103Min.js"></script>
<script src="/JS/HomeArticles.js"></script>
</head>
The problem is that besides CSS neither none of the files in JS folder and none of the files in Media or Uploads folders and subfolder doesn't generate properly.
The thing is if I add "slash" in front of the image src attribute the image gets location http://localhost/Media/Discussion.png and if I don't add "slash" then the image location is http://localhost/Uploads/Users/HrvojeFadiga.jpg when it should be http://localhost/Knowledge%20Management/Uploads/Users/HrvojeFadiga.jpg
Here is a sample of code with images:
<div class="profileInfoWrapper">
<img src="/Uploads/Users/<%=article.User.PhotoLocation %>" />
<span class="postInfo">
<img src="/Media/Rating.png" /><%= GetArticleRating(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Visitors.png" /><%= GetArticleViews(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Comments.png" /><%= GetArticleComments(article.idArticle) %>
</span>
</div>
FYI, Global.asax doesn't contain any rules for ignoring file routes except for .axd files which is added by default.
I was able to sort this by adding runat=server attribute and using the tilt(~) before defining the source of the file. For example:
<link href="~/CSS/Style.css" rel="stylesheet" runat="server" />
Same applies to javascript files.
For any URLs for scripts and styles you need to call ResolveUrl like this:
<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />
Try this. without "~" it can also work but you can add it just to refer the root directory which is always your project solution. So by using Tilde "~" you can properly specify where your css and js files are located.
<link href="~/CSS/styles.css" type="text/css" rel="stylesheet"/>
<script src="~/JS/jScript.js" type="text/javascript"/>
Similarly for your images that you have stored in upload folders. You can access it by using
<img src="~/Uploads/Images/youImage.gif" />
Just try like below and its worked for me...
<script src="JS/jQuery203Min.js" type="text/javascript"></script>
<script src="JS/jQueryUI1103Min.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css"/>
First of all, thank you all for your replies. After couple of days of playing I've finally figured out what to do to make everything work.
JS problems
I've solved JS problems by adding ScriptManager control to the .aspx page and by adding JS files inside it.
<asp:ScriptManager ID="smScripts" runat="server">
<Scripts>
<asp:ScriptReference Path="JS/jQuery203Min.js"/>
</Scripts>
</asp:ScriptManager>
For some reason CSS files were working "out of the box" so I left them unchanged.
Image problems
I've managed to sort images problems out by avoiding hardcoded links to the images and by adding <%: Page.ResolveUrl("~/Media/Image.png") %> to the src attribute of the <img> tag. I guess I should've done this for everything that I don't want to route. This can be done for CSS files, JS files, everything. However, (even though this should work perfectly) I've experienced some strange problems with JS files and that's the reason for using ScriptManager.
Page links problem
At first I didn't realize that none of my links was working so I figured that the problem were semi-hardcoded links that, for some reason, don't route properly even though I hardcoded route the same way as defined in Global.asax file. I'm still not sure why this isn't working.
The solution for this is to generate links by using <%: Page.GetRouteUrl("RouteName", new { routeParameter1 = routeParameter1Value, routeParameter2 = routeParameter2Value}) %> and everyhting will work fine.
The directories/virtual-directory setup is the likely culprit.
View your page in Google Chrome then "Inspect Element". Scroll to the top and you include your .JS files. You can click on them to see what URL they are trying to link to. More than likely the path is slightly different on the server than your local copy.
Related
I created a Leaflet Map, and uploaded the html and js file on Github. However, the map part is not showing up. Would appreciate any help on it. Here is the link below:
https://william-wang93.github.io/html/MedievalEngland/LeafletHeat.html
These are the 2 links in your LeafletHeat.html file, if you try to open these link in the browser these require certificate thus browser is failing to fetch these files.
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
Try replacing it with
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="">
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
You can refer the source for more information - https://openstreetmap.be/en/projects/howto/leaflet.html
I was having the same trouble like this but I was solved this by doing this:
Add close tag to script tag
Wrong path of javascript file
Try to change javascript name file to main.js.
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
I'm experiencing a very peculiar issue with ASP.NET.
I have a small website. I've written a simple MasterPage that is used across most of the site's pages.
I want to include Bootstrap and jQuery's CSS and Javascript files. When I link then in my master page with URI pointing at remote location (see below), everything works fine:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
For couple of reasons I want these JS and CSS files to be available locally, so I downloaded the relevant files to the server. But when I try to include these local files in the master page, they fail to load.
I tried:
Using absolute paths (i.e. ~/res/css/...)
Using <%= ResolveUrl("...") %>
Using <ScriptManager> - identical effect
When trying to include these files in the same way in the head contentPlaceHolder in the content pages, the effect is the same.
Example of non-working code:
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="~/App_LocalResources/css/bootstrap.min.css"/>
<script src="~/App_LocalResources/js/jquery.min.js"></script>
<script src="~/App_LocalResources/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
The result is the same whether I use the ContentPlaceHolder or not.
If you could assist me in resolving this issue, I'd be genuinely awesome - thanks in advance.
I was able to detect and resolve the cause of this issue failry quickly after reading through some very helpful comments - so kudos for the users who posted them.
The issue was being caused by 404s (when trying to acces the js and css files). The 404s happened due to:
The URLs were not correct - although I used the ~ (home) character it somehow was converted to a path relative to the page.
Example of such 404 as seen in Firefox/Firebug Console (make sure that "Logging" is on:
I was able to resolve this issue by using ResolveUrl.
Example:
<script src="<%= ResolveUrl("~/App_LocalResources/js/bootstrap.min.js") %>"></script>
After resolving this first issue, the 404s persisted.
I tried to access the files directly through the browser, and I got a IIS 404.8 error - meaning that the server was blocking access to the App_LocalResources folder. This is the default behaviour of IIS server on some predefined folder names (including App_LocalResources, bin, App_Data, etc.).
So, I moved the css and js files to a folder named res and that did the trick.
Eventually, the <head> section in the master page looks like this:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="<%= ResolveUrl("~/res/css/bootstrap.min.css") %>" />
<script src="<%= ResolveUrl("~/res/js/jquery.min.js") %>"></script>
<script src="<%= ResolveUrl("~/res/js/bootstrap.min.js") %>"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
I have a master page with a reference to javascript file that is js folder.
Both File and masterpage are in the root directory.
Many of my forms are in different folders Like
Root>first>abc.aspx
Root>second>def.aspx
Root>second>anotherFolder>def.aspx
I kept the reference like this
<script type="text/javascript" src="js/Check.js"></script>
I also tried src="<%= Page.ResolveUrl("~/js/Check.js") %>" and src="~/js/Check.js". While using Page.ResolveUrl and Server.ResolveUrl page shows error.
What i need to do so that any form in any directory get the reference of the file.
I dont want to do ../ and ../../ in every form.
<script type="text/javascript" src="/js/Check.js"></script>
you can use "/" --> web site root
If you're running your Visual Studio's internal server for debugging then firstly remove the virtual folder it insists on using.
Do this by selecting the root of your site in VS Solution explorer, then right-click and choose "Properties Window" - in the properties change "Virtual Path" from your "AppName" to /
This virtual path plays havoc with all sorts of paths..I find that if i don't make this change in VS then when I DO get all my paths working they won't work when I put the site on a live server that isn't using a virtual site.
Then set your JS reference to <script type="text/javascript" src="/js/Check.js"></script> - using the root / in your src.
UPDATE
If you really want to keep the virtual folder then you can try this - using ResolveClientUrl():
First, add Runat="Server" to your <head>
<head runat="server" id="myhead">
<script type="text/javascript" src='<%=ResolveClientUrl("~/js/check.js") %>' />
I have an error trying to use $(document).ready() as in the above image.
What should i try to solve this problem ?
Edit 23/05/2011 10:54
I have got a clue.
The page i am working inherit from masterpage
In master page this code isn't work, maybe problem of different path
<head id="Head1" runat="server">
<title>Back Office</title>
<link href="~/Styles/MasterPage.css" rel="stylesheet" type="text/css" />
<link href="Styles/custom-theme/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.5.1.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
This code don't seems to work
On the body of master page, there is a script manager and jquery is there,
This make the jQuery works, is because we use scriptmanager in the body so that the document.ready is not work ?
<asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.5.1.min.js" />
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
I have found the problems.
The problem is the jquery code is on the masterpage, in the script manager, and script manager is in inside the body tag.
the document.ready is on the header tag on page that inherit on master page, so before the code to excuting to the body, the jquery is not included yet and that wat it is error.
The easiest way to solve this is, i have to move javascript code in the bottom of body tag.
The proper way to solve, which i still can't find is to put the javascript include code in the header. but i don't find a way that work yet. My master page and inherit page is on the differnt path. I have find a lot of technique such as but none of them work.
Take out all of the other javascript includes except for jquery-1.5.1.min.js. Try it with just that one include. If that works, add the other includes back in one at a time until you get the error. If it doesn't work with just the jQuery script included, chances are it's not pointing at the correct path.
Short answer though, yes, you can use jQuery and document.ready in an ASP.NET page.
Surely you can. Seems, however that jQuery object is not available at the moment of script execution. Verify that jquery library file is indeed loaded via script directive. Or maybe there are some other nuances behind this.