I've tried researching my problem but I can't find anything that answers my question. I'm sure the answer is out there somewhere, all though, I don't know what to specifically search for, therefore, I'd like to apologize in advance.
My code:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cph_head" runat="server">
<link href="/assets/css/layout.css" rel="stylesheet" runat="server" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//use.edgefonts.net/source-code-pro.js"></script>
<script src="/assets/scripts/modernizr.js"></script>
</asp:ContentPlaceHolder>
</head>
As you can see, my stylesheet should have been added there, I've put a slash infront of the path to make sure it works no matter which folder you're in. However, when I put the slash infront of it, it's not working. If I remove the slash it works fine.
I'm using Visual Studio 2012 and I'm working in ASP.NET Webforms. I hope someone can help me. This issue isn't happening on my laptop, even with the same project, but unfortunately it's happening here on my stationary pc.
I hope you can help me, thank you very much in advance.
I assume, thats you master page markup, so try it like this:
<head runat="server">
<title></title>
<link href="/assets/css/layout.css" rel="stylesheet" runat="server" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//use.edgefonts.net/source-code-pro.js"></script>
<script src="/assets/scripts/modernizr.js"></script>
<asp:ContentPlaceHolder ID="cph_head" runat="server">
</asp:ContentPlaceHolder>
</head>
The asp:ContentPlaceHolder should stay empty at your master page. it is overridden by what is on you child pages.
Related
The error i get seems to be centered around jquery finding what it's in (window,document, etc.). Right now i'm just trying to implement the jQuery datepicker. the project has a master page, where i placed my script references.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.5.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.datePicker.js"></script>
<script type="text/javascript" src="Scripts/date.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
in my aspx file for the page i am trying to implement the date picker, the code looks like this.
i placed this in the header place holder
<script type="text/javascript" charset="utf-8">
$(window).ready(function () {
$("#<%=this.tbTestPass.ClientID %>").datePicker();
});
</script>
This is the asp control i am trying to apply the datepicker to.
<asp:TextBox ID="tbTestPass" runat="server" Width="120px"></asp:TextBox>
I have tried document and window for jquery context, but they both throw the same error. What noob mistake am i making?
Verify Jquery(.js) file folder path is resolved properly from the application as well as in the IIS.
i had the same situation, i had Jquery.js file under Scripts folder(Scripts/Jquery.js).
but when i went to iis, i am not able to see the Scripts folder.
later i came to know there there is an Script virtual directory in IIS when is taking precedence over the local Script folder.
found that linking to http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js fixed the object missing. pointing to a local file was not working. not sure why, but this will do and suit my needs i think.
I am trying to use ajaxtool kit downloaded from here for colorpicker.
When i tries to use this on any of my page, it shows me an error
This page is missing a HtmlHead control which is required for the CSS
stylesheetlink that is being added. Please add <head runat="server" />.
What can be the reason.
I am using ToolScriptManager rather than Script Manager as said in the documentation.
I am using Asp.net 3.5 and using colorPicker control under a content page and adding ToolScript Manager in the same place.
As said by rafel
<head>
<title>l</title>
<link href="<%= ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/css/chromestyle.css") %>"/>
<script src="<%= ResolveUrl("~/js/JScript.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/js/chrome.js") %>"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
If I adds runat in head i starts getting this error
The Controls collection cannot be modified because the control
contains code blocks (i.e. <% ... %>).
I am getting the same sequence of events that Shantanu was getting. It tells me to add the runat=server to the HEAD when I add the AJAX Control Toolkit ComboBox. So I did that and then it started saying
"The Controls collection cannot be modified because the control
contains code blocks (i.e. <% ... %>)." again just like in Shantanu's case.
If I am reading this correctly, is it saying I cannot use the AJAX Control Toolkit's ComboBox if I have lots of inline code in this aspx file (both in java/inline vb as well as HTML/inline vb)? I mean hey I know our aspx pages are ugly and barely hanging on, but seriously?
You can't use <%= ResolveUrl %> when defining your javascript includes when using the Toolkit. Add the references to the header in your code behind instead.
Ajax control is trying to add its styles to the head section of your page, but cannot do that because it cannot find it. Here's how to fix this:
<head runat="server">
Correct format is : <link rel="Stylesheet" href="~/style.css" type="text/css" />
When using Ajax toolkit, don't use <%...%> in the link to external style sheet. Use above link format.
This question already has answers here:
ASP.Net Master Page and File path issues
(10 answers)
Closed 9 years ago.
We're having some trouble with including javascript in masterpages. The "~/" root shortcut doesn't seem to work, and so we're having to manually enter in the path to the javascript from where it will be used, for example: "../../tooltip.js"
However, the problem is that if the nested page is in a different path, this approach does not work as the path stays the same despite the nested page being in a different location - any solutions on how to get the path automatically working like it does for the css files?
Thanks!
The ~/ is a special entity in ASP.NET which represents the "application root". The translation only happens when you pass that URL through an ASP.NET server control, such as <asp:Image runat="server" ImageUrl="~/path..." />. Trying to use it in something that is passed as literal text directly to the client, such as ` will be rendered exactly that in the browser.
There are a few solutions to this:
Put your scripts in a predictable place relative to the domain root, such as domain.com/scripts/script.js, and you can refer to it as /scripts/script.js. The preceding / tells the client (browser) it is an absolute path from the domain root.
Use Page.ResolveClientUrl to render the correct path (<%=Page.ResolveClientUrl("~/script./js")%>)
Create your own server control which handles the ~/ resolution.
Embed the script as an assembly resource.
Cory Larson recommends:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/tooltip.js") %>"></script>
Try
<script type="text/javascript" src=<%=Request.ApplicationPath+"/Scripts/Script_Name"%>></script>
I've been using url rewriting and "~" occasionally chokes on special characters in the url even when they are encoded.
If the script tag is in the HEAD element just use a path that is relative to the master page and asp.net will automatically fix the reference for you. Just make sure that the HEAD element has the runat=”server” attribute.
This also works really well for CSS files. It's the only way I've been able to get them to resolve in the VS.NET designer.
Here is a sample from my project:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/reset.css" />
<link rel="stylesheet" type="text/css" href="../styles/960.css" />
<link rel="stylesheet" type="text/css" href="../styles/default.css" />
<link rel="stylesheet" type="text/css" href="../styles/buttons.css" />
<script type="text/javascript" src="../jQuery/jquery-1.3.2.js"></script>
</head>
Linked style sheets can be put within the header (with runat="server") and use a ~ to resolve to the root. However, Javascript files cannot be referenced this way. One additional way to add scripts is with a script manager in the body.
<html>
<head runat="server">
<title>title</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.custom.min.js" />
</Scripts>
</asp:ScriptManager>
</body>
</html>
As answered # [Include Javascript adn CSS][1]
http://www.codeproject.com/Articles/404942/Include-JavaScript-and-CSS-on-your-MasterPage
For CSS files:
<link href="<%# ResolveUrl("~/") %>css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
For JavaScripts:
<script src="<%# ResolveUrl("~/") %>Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Can you explain what you mean by the "~/" isn't working? It should be exactly what you're looking for. You might check that your head tag has the runat="server" attribute, since that might prevent the "~/" from working.
Why doesn't asp.net css link path work outside of the head tag?
I have this code in a master page:
<head runat="server">
<title>Untitled Page</title>
<link href="../CSS/default.css" rel="stylesheet" type="text/css" runat="server" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
This seems to resolve the CSS link no mater what folder depth the page is at.
I notice that if you use the css link it only resolves to the correct path if it's in the head (if used in the body it does not work).
I know how to get around it by using ResolveUrl, but I am wondering if this is just how it works or if I'm missing something.
ASP.NET does some magic rebasing of urls in link and script tags when you specify runat="server" on the head element of a master page.
There are some details of this strange behavior here.
Server controls will process relative URLs and will output the appropriate URL to the client. <head runat='server'> is a server control that does this. If you remove the runat='server' attribute, you'll see that this address translation won't happen anymore.
I have no issues when doing using JQuery in a aspx page without a masterpage, but when I try to use it in pages that have a masterpage, it doesn't work, so I end up putting the jquery files and other script files in the page instead of the master. Now if I have 10 pages, I am doing this for all 10, which I know is incorrect. In the sample masterpage below, where would I put my script files.
<html>
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPanel" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
I recently used the fancybox plugin and what I did was instead of putting the jquery script and fancybox scripts in the masterpage because I got frustrated on getting it to work, I just put it in the page where I wanted the script to run, specifically at the bottom, right before the closing asp:Content. Of course, now I have the issue of, if I wanted to use the fancybox plugin in other pages, I would put the jquery script and fancybox script on all 5 pages instead of just the masterpage. When dealing with masterpages, where does everything go using my example above?
You would declare your main jQuery scripts within the master page, as you would normally:
<head runat="server">
<link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.
However, a better option would be to look into the ScriptManager and ScriptManagerProxy controls - these can provide you with a lot more control over the way your JS files are served to the client.
So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManager>
Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:
<asp:Content ID="bodyContent" ContentPlaceholderID="body">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
</Scripts>
</asp:ScriptManagerProxy>
The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI (or better yet, after by setting it to False).
I use this method.
<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>
Just place it above your tag...
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Alright use a different contentplaceholder for your script. It should look like this
<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">
</asp:ContentPlaceHolder>
Place this tag at the bottom of your masterpage, close to the </body> tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.
Oh one more thing, make sure jQuery and then FancyBox load up before any other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!
This is what will work inside a Master page:
For Script file:
<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>
For CSS file:
<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />
Additional Notes:
Use the minified versions as could as possible (FileName.min.js) and
(FileName.min.css) to reduce loading time and improve SEO.
Put the CSS before the </head> and the script before the </body> to
enhance performance and improve SEO.
The tile character (~) in the path will resolve automatically to the root of your website.
Do not forget to use runat="server" for the stylesheet only. The script must not have runat="server" because it already uses server operators <%= %>.
You can use the online http://jscompress.com/ to compress your javascript and https://csscompressor.net/ to compress your CSS files.