How to insert javascript in asp.net master pages

Question

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!

score 8 · Accepted Answer · answered Aug 07 '09 at 17:36

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.

Thank you for the detailed solution - the absolute path method seems easy enough if it works. — stringo0, Aug 07 '09 at 18:12

score 5 · Answer 2 · edited May 23 '17 at 11:58

5

Cory Larson recommends:

<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/tooltip.js") %>"></script>

edited May 23 '17 at 11:58

Community

1
1

answered Aug 07 '09 at 17:39

lance

16,092
19
77
136

This is the correct way, missed the tilde. This works, I'll remove mine. – ScottE Aug 07 '09 at 17:45
I favor a slightly different syntax: `` – Ken Browning Aug 07 '09 at 17:54

Kelly Robins · Answer 3 · 2009-08-07T17:44:54.177

0

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.

edited Aug 07 '09 at 17:44

answered Aug 07 '09 at 17:38

Kelly Robins

7,168
6
43
66

score 0 · Answer 4 · answered Aug 07 '09 at 17:53

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>

score 0 · Answer 5 · answered Dec 31 '12 at 15:44

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>

score 0 · Answer 6 · answered Mar 10 '11 at 15:47

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>

score -1 · Answer 7 · answered Aug 07 '09 at 17:34

-1

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.

answered Aug 07 '09 at 17:34

hugoware

35,731
24
60
70

Not sure what the down vote was for since what I said is true... -- Hmmm... – hugoware Aug 07 '09 at 17:40
The ~/ doesn't resolve correctly for javascript include tags. (I didn't vote down however) – stringo0 Aug 07 '09 at 18:11
Bah! I stand corrected!! -- I knew it worked for tags inside the head tag (like for stylesheets) -- Didn't realize it didn't work for scripts! – hugoware Aug 07 '09 at 19:34

How to insert javascript in asp.net master pages

7 Answers7