I have just created some directories and tidied up my growing ASP.NET project but it has caused some issues that I can't solve. I have a directory in the root of the project called js and another one called Pages.
In Pages I have a file called MasterPage.master which is a master page. The Pages directory has Default.aspx and some subdirectories of other pages.
I have two main issues. In MasterPage.master I have code like this to reference javascript files:
<script src="js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
However none of my javascript can be found any more. I tried <script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> and I tried <script src="~/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> but it still doesn't work.
The other issue is that I have a menu system written is CSS and that has some strange behaviour. When the page loads the menu works fine. If I navigate to /Pages/Trades/TradeInfo.aspx and then hover over that item the page path now says /Pages/Trades/Trades/TradeInfo.aspx
Why has the Trades directory been added twice?
Have you tried ResolveUrl?
It sure works for the script tags and your anchor tags.
<script src='<%=ResolveUrl("~/Scripts/jquery/ui/jquery-ui-1.8.11.custom.min.js") %>' type="text/javascript"></script>
Related
I moved whole ASP.Net website folder into another location, now when I run it, there is an error in loading css files, I have Master page which loads Css files, and other pages should use it, but when I debug the page with FireBug, there is no rule in .css files which this page used them. why is it happenning??
my website Structure
my Folder/style/main.css
mu folfer/js/jquery-1.10.1.min
in my master page I use this Code
<link rel="Stylesheet" type="text/css" href="style/main.css" />
<script src='<%= ResolveUrl("~/js/jquery-1.10.1.min.js")%>'></script>
in Firebug , there is this message when I click on each Css file in Css Part.
There are no rules. You can create a rule.
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
For many days I have been trying to figure out a work around to loading javascript and style sheets in my content pages.
How do I link all the resource files like .css and .js in the markup for the master page and then use these directly in the content pages without adding them to each of said content pages?
I found that we can link .css files by using themes and initializing a theme in the master page; But what about .js files and images?
How can they be linked in a master page and then accessed in the content pages?
Please point me in the right direction.
On a master page anything you put in the head will be present for all content pages that use that master.
That is to say if in your master page you have:
<head runat="server">
<script type="text/javascript" src="/js/pages/jquery.min.js"></script>
<script type="text/javascript" src="/js/pages/jquery.jscrollpane.min.js"></script>
</head>
then every content page will contain the same thing in the head.
If you had scripts that were used by some pages and not others then on a master page you can define an <asp:content> tag that is in the <head> of the master page.
Then in your content pages you can place links to your javascript files right into the content place holder for the content tag in the page head.
If you wanted to link pictures, I would suggest doing this through javascript. If you created a <script> block in your master page head with something like the following:
var ReusableImageVariable = new Image();
ReusableImageVariable.src = '\A\Path\To\Your\image.jgp';
Then on any content page you could place a script block that would use that ReusableImageVariable and copy it onto the document in a specified place:
<script type='text/javascript'>
document.getElementById('PlaceHolderForImage').appendChild(ReusableImageVariable);
</script>
Where PlaceHolderforImage is the id of a <div> or other containing element. This would help with browser load times as well because you are loading the images the same time you are loading the style sheets and scripts.
Finally if you wanted to use just ASP, I would define the images as properties of the master page. Then any content page can just access them in code behind and load them where ever you need them.
I assume we are talking web forms, not MVC? You can put scripts in the <asp:ScriptManager> control's <Scripts> collection, or <CompositeScript> list. You can get a reference to the ScriptManager via ScriptManager.GetCurrent(PageReference);
Images there isn't anything specifically like this that's built for images; however, it can be built.
I have an asp.net application containing pages that lie in multiple folder. I have my .js files also in one "JS" folder and I have added their reference in head of master page like:
<script type="text/javascript" src="JS/jquery.min.js"></script>
Now when I am on home page, the script loads fine. But when I am on some other page that is present in another folder(Physics for example), the path gets appended and hence I get the error:
Failed to load resource: the server responded with a status of 404
(Not Found)
Similar thing is happening for my image paths and <a> tags also.
Now I want to give paths with respect to root path something like:
~/JS/VerticalMenu.js
But this ~ is not taking me to the root of my application. Do I need to set where ~ should lead to? And if yes then where and how??
The #Charlie Kilian answer is a workable solution however you can also specify a base URL for all the relative URLs in your page by base tag in head of your html page.
<head>
<base href="http://www.yourdomain.com/anyvirtualdirectory/" />
</head>
Try this:
<script type="text/javascript"
src="<%=Page.ResolveUrl("~/JS/VerticalMenu.js")%>"></script>
If it's an ASP.NET application, you can access the root by prefixing the path ~/:
<script src="~/common/scripts/safeguard.common.js" type="text/javascript"></script>
You can also try prefixing the path with just /:
<script src="/common/scripts/safeguard.common.js" type="text/javascript"></script>
I have an IIS web site. This web site contains other web sites so the structure is like this.
\
MainWebSite\
Scripts\
CSS\
App1\
Scripts\
CSS\
App2\
Scripts\
CSS\
All sites are ASP.NET MVC web applications.
In the MasterPage of App1, I reference the script files like this:
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.custom.min.js">
</script>
The problem is that it now tries to find the file at http:\server\MainWebSite\Scripts....
How can I work around that? Should I put all my scripts and CSS files into the root directory, is that a preferred solution?
In ASP.NET there is a great function that is part of the Page Object:
ResolveUrl(String)
This is used by passing in a relative string, but the best part is you can use the ~ to symbolize the root of your website:
<script type="text/javascript" src='<%=ResolveURL("~/PATH_FROM_ROOT/Scripts/jquery-ui-1.8.custom.min.js")%>'></script>
[Note the single quotes.]
Try this
<script type="text/javascript" src="~/../Scripts/jquery-ui-1.8.custom.min.js" runat="server"></script>
In the above markup, I'm assuming that your script files are in MainWebSite\Scripts\
"~" brings your reletive reference from your application root directory. The benefit is that if you shift your master page file from MainWebSite\App1\ to MainWebSite\App1\MasterPages\ you will not have to change all the relatively referenced urls in your master page.
The best solution is to use absolute URLs for CSS and JavaScript. Using an appending global variable you can also use it on your development system, too.