Hello all I have a problem. I have a masterpage that all of my Content pages inherit from. Within this masterpage I have a script tag pointing to the Javascript file folder ~/Scripts/validation.js
On my content pages I use different usercontrols that require the use of many of the functions within the validation.js file however if I dont put the <script> tag and the Javascript functions within a contentholder on the contentpage the usercontrols do not see these functions and I get errors like OnNameValidation is not defined.
Of course I can copy the Javascript code into all of the pages but that's 30+ pages and a maintenance nightmare if I find a bug in one of the Javascript functions.
So the question (if you haven't already figured out from my long dissertation) is how can I declare the script tag with the path to the validation.js file so that contentpages and their usercontrols etc. can access the functions/code.
What you are trying to do should work, so I suspect that the path to your javascript file is wrong (without seeing your html code I can only assume). Keep in mind that you can only reference the javascript file like this: "~/Scripts/validation.js" if you have the link in a HEAD runat="server" tag. Without the runat="server" it won't find the file. You would have to do something like "../scripts/validation.js"
As a test I would try to call your javascript function in the masterpage, so you can rule out a bad file reference.
I picked up this tip from ScottGu here.
Add this to you user control which enables Intellisense in user controls but always evaluates false:
<% if (false) { %>
<script src="/Scripts/validation.js" type="text/javascript"></script>
<% } %>
I am currently doing this in my site by going to the Source code on the master page and putting the following in the head and outside of the ContentPlaceHolder.
<head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script src="CP.js" type="text/javascript"></script>
</head>
The path you are assigning for your js file is probably not matching in all the pages.
script src="../JavaScript/Scriptaculous/scriptaculous.js"
It should have something like above this if you have separate folder for Scripts, MasterPages, Pages & Controls.
Related
Not sure if the derived page is actually relevant to the problem here, but ran into an interesting gotcha on some code I'm working through at the moment.
I have a custom masterpage class, which derives from System.Web.UI.MasterPage so that it can be extended with additional useful properties.
The page that that uses this masterpage has a declaration at the top (note the Page Title being set).
<%# Page Language="C#" MasterPageFile="~/MasterPages/Landing.master" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" Title="Welcome to the site" %>
In addition, the master page has stylesheet references in the head which are pulled from a CDN that is defined in a config file.
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="<%= CDN %>/css/main.css" />
</head>
Now the example above obviously doesn't work, because the runat attribute in the head container means that the codeblock in the the link is static text, and renders as is, in the resulting html.
If I remove the runat attribute from head, the CDN works, but now I notice that the Title is no longer being set. If I debug, and try to access Page.Title in the Immediate Window, I get an exception:
// Using the Title property of Page requires a header control on the page. (e.g. <head runat="server" />).
So, is there a way to get the Page Title from the declaration, put my own title placeholder in the head and set it from the master page code-behind, or, is there a better way to dynamically set the CDN domain for the stylesheets? The only way I think I can do that is to build the entire html link tag(s) and append it to the header control, but I thought there might be a more elegant solution, so I'm asking here first.
Insofar as the CDN goes, we build a special Url.ResolveContentUrl() method that spoke with our configuration and pointed at the correct stylesheets (and any other static asset) depending on running mode, etc. So your dev and QA work locally then your production goes to the CDN with zero code changes.
Also, you should put a content placeholder into the part of the masterpage. It is the only way to fly.
In your masterpage, you can create a routine like this:
Public Sub AddStyleSheetLink(ByVal fileName As String, Optional ByVal media As String = "all")
Dim stylesheetLink As New HtmlLink
With stylesheetLink
.Attributes("href") = fileName
.Attributes("type") = "text/css"
.Attributes("rel") = "stylesheet"
.Attributes("media") = media
End With
MasterHeader.Controls.Add(stylesheetLink)
End Sub
And in your Page_Init (the page that inherits your masterpage), so something like this
CType(Master, MasterPage).AddStyleSheetLink(CND & "/css/main.css")
You can dynamically add what you need without messing with your <head> tags and page title.
I'm following this tutorial but it doesn't tell me how to run this jQuery script. Since this script will be run pretty much everywhere, I should attach this script to the Masterpage right, but how?
I guess what I'm asking is, what HTML tag do I need to reference the jQuery script, and where to put the jQuery code.
I have this library already in my project:
Thanks.
jQuery is a client-side scripting tool. ASP .Net is a server-side language.
You are correct, to add a reference to jQuery for all pages it is a good idea to use a master page for this purpose.
In the master page, you simply add the HTML script reference to the master page:
<# MasterPage .... >
<html>
<head>
<script src="../Scripts/jquery-1.4.1.js"></script>
</head>
<body>
<asp:ContentPlaceHolder id="Content" />
</body>
</html>
Add a script element for each of the jQuery scripts. Make sure the jquery-1.4.1.js is the first referenced though.
Also make sure you use the <script></script> instead of <script/> due to some browser issues.
Some newer Visual Studio MVC project files do this script referencing for you (as Lenial mentioned), and this may be easier.
Is there any reason why registering a javascript file from the head tags of an ASP.NET master page wouldn't work? For example, I have the following (plus many other) file referece:
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
but jquery (and every other JS reference) doesn't work when the page loads.
Any thoughts? Thanks.
The src attribute is relative, try
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
and see if that fixes your problem
If that doesn't work, you can try this:
<script type="text/javascript" src="<%# ResolveUrl("~/js/jquery/jquery-1.4.2.min.js") %>"></script>
and in your Page Load handler in the master page add this code:
Page.Header.DataBind();
The masterpage can have script resources just like a normal HTML page; you'll probably want to check the problem with an HTTP debugger like FireBug or Fiddler2, if phsr is correct you'll see the requests failing with an ErrorCode.
Using master pages will not affect the loading of JavaScript files. Your problem is either the location of the file or the script tag is formatted incorrectly.
I have a page login.aspx in a folder which is linked to masterpage. In the page load event of masterpage I have added some styles. When I redirect to login.aspx, it is just not able to get the styles from the masterpage's pageload event. I analysed the problem found that because my login.aspx is not in root folder, but in a folder which is inside root folder.
How do I run masterpage's pageload event in login.aspx?
You can place all your style sheets in a folder structure as follows:
App_Themes/Style/mystylesheet.css
Then in your content ASPX pages, just add Theme="Style" to the page directives and ASP.NET will automatically resolve it for every page that you have :-)
I assume you're talking about CSS stylesheets, and not ASP.NET styles (themes).
In that case, you can using a tag like the following from your Master page:
<link runat="server" rel="Stylesheet" href="~/scripts/common.css"
type="text/css" />
Or you can insert the same tag programmatically from your Page_Load() handler. However, in that case, it's best if you add the HtmlLink control to the Head control. Alternatively, you can add an ID to the control and use Visible="True" to control whether it appears in the generated markup.
If the code works when you move the code to your templatized page (not the but the one that uses it) then it suggests that you are using a relative link for the stylesheet.
I'd recommend using a relative URL off the root (something in the form of "/stylesheet.css") so that when you have pages that use the template, but in a subdirectory, it can resolve the stylesheet correctly.
The problem is that the section of the markup is located in the Master Page, so the reference to the StyleSheet cannot be made
Dim link As New HtmlLink
link.Href = "LocationOfStyleSheet.css"
link.Attributes.Add(HtmlTextWriterAttribute.Rel.ToString(), "stylesheet")
Page.Header.Controls.Add(link)
I'm trying to add a script reference to jQuery in my master page so that it will work for any page. It currently looks like this
<script type="text/javascript" src="jquery.js"></script>
The problem is that the path is always relative to the executing aspx page so this will only work if the "jquery.js" file is located in the same folder. To make it work I have to change the line to:
<script type="text/javascript" src="../../jquery.js"></script>
This is obviously less than ideal because it will only work for pages that are two levels deep from the root folder. If I try the following, IIS throws an error about an unexpected character.
<script runat="server" type="text/javascript" src="~/jquery.js"></script>
Any ideas?
EDIT: I forgot to mention as well that the script MUST be in the head tag
The current top answer throws a "ASP.NET Ajax client-side framework failed to load." error when I add it to my master page. Its thrown from javascript and not the .Net compiler. If I move the ScriptManager to the head section where it should be I get a compile error about the ScriptManager needing to be inside a form tag.
The third answer throws a "Illegal characters in path." exception from the compiler
EDIT 2: When I add that line to my head tag I get this error from IIS.
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
SOLVED: I took the edited response from the answer below and put it inside an asp:ContentPlaceHolder element
You could use a ScriptManager:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/jquery.js" />
</Scripts>
</asp:ScriptManager>
EDIT: If you absolutely need this in your <head> section, you could do something like:
<head>
<script type="text/javascript"
src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>
</head>
EDIT 2: According to the comments, if you are observing that
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
you may need to change the above to use the data-binding syntax:
<head>
<script type="text/javascript"
src="<%# Page.ResolveClientUrl("~/jquery.js") %>"></script>
</head>
Try <%# instead of <%= in Master page under head section
<script type="text/javascript"
src="<%# ResolveUrl("~/YourScriptFolder/YourJQueryOrJavascript.js") %>">
</script>
Then in Code Behind of Master page under Page_Load Event
Page.Header.DataBind();
Now you are good to go with either jQuery and JavaScript as well as CSS just you need to change your path in ResolveUrl which file you want to handle CSS, JavaScript, jQuery.
If you're not going to us asp:ScriptManager or absolute paths then you can do it like this:
<script runat="server" type="text/javascript"
src='<%= Page.ResolveUrl("~/jquery.js") %>'></script>
I do not know whether you guys found the solution to your problem or not. I was facing the same problem and going nuts to figure out why do I get "jQuery is undefined" error on the plugins i use. I tried all the solutions i get from the internet but no luck at all.
But, suddenly something splash on my mind that may be the script files should be in order. So, I moved the jquery referece to first position and everything start working like charm.
Remember guys, if you're using any plugins with jquery, make sure you use the folloing order of setting reference to those fiels.
reference to the jquery library
reference to the other subsequent plug-in libraries and so on...
e.g.:
"script src="js/jquery-1.3.2.min.js" type="text/javascript"...
"script src="js/jqDnR.min.js" type="text/javascript"...
"script src="js/jquery.jqpopup.min.js" type="text/javascript"...
"script src="js/jquery.bgiframe.min.js" type="text/javascript"...
Always make sure you must put the jquery reference to first and then the subsequent libraries.
Hope, this solves your problem especially when you use with MasterPages. Its very strange that it works no matter what order you use when you don't use MasterPages but when you do, then it somehow requres the proper order.
Good luck and happy coding,
Vincent D'Souza
Look at How to Run a Root “/”. This should fix all your issues regarding unresolved .js file paths. You basically reconfigure the VS Dev server to run your application as localhost:port/ as opposed to the regular localhost:port/application name/ making name resolution work the same way as it does on IIS.
For absolute path of the file for any page use it following:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>
<script type="text/javascript" src="/full/path/to/jquery.js"></script>
If this script tag goes directly to the browser, then you unlikely can substitute your site's root there. At least not on the server. So you can:
Deploy site to the root of domain
name and use absolute paths
(simplest solution).
Insert this
link with server control.
Preprocess resulting HTML before
sending it to the client (with
HttpResponse.Filter).
You can also use <base> HTML tag:
<base href="http://www.domain.com"></base>
and then all the links in header section are relative to base address:
<script type="text/javascript" src="scripts/jquery.js"></script>
It's often useful when you have multiple publishing destinations, like local dev web server, demo server, etc. You just replace that base URL.
<body>
<script language="javascript" src='<%= this.ResolveClientUrl("~/full/path/to/jquery.js") %>' type="text/javascript"></script>
</body>