69

I'm fairly new to ASP.NET MVC, and I'm having a little trouble with scripts... in particular, I want to use jQuery in most pages, so it makes sense to put it in the master page. However, if I do (from my ~/Views/Shared/Site.Master):

<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>

Then that is literally what goes down to the client - which of course only works if our current route happens to have the right number of levels. Starting with ~/Scripts/... doesn't work. Starting with /Scripts/... would only work if the project was at the site root (which I don't want to assume).

I have one working approach (I'll post below) - but: am I missing something?

I'd rather not have to involve a script-manager, as that seems to defeat the simplicity of the ASP.NET MVC model... or am I worrying too much?

Here's the way I can get it working, which works also for non-trivial virtuals - but it seems over-complicated:

<script src="<%=Url.Content("~/Scripts/jquery-1.2.6.js")%>" type="text/javascript"></script>
2
  • 3
    The annoying thing about this, is that using the "~" prefix works fine for the href attribute of <link> elements, but not for the 'src' attribute of <script> elements
    – belugabob
    Sep 5, 2009 at 18:21
  • @belugabob: What makes you say that this does not work in the src attribute of a script tag?
    – feihtthief
    Dec 6, 2012 at 20:04

11 Answers 11

45

I have a AppHelper class with some methods for adding script references:

public static string ReferenceScript(string scriptFile)
{
    var filePath = VirtualPathUtility.ToAbsolute("~/Scripts/" + scriptFile);
    return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
}

so in your master page you can use:

<%= AppHelper.ReferenceScript("jquery-1.2.6.js") %>
3
  • 6
    I like this; for the common API, I've now done something similar using an extension method on HtmlHelper, but +1 Dec 7, 2008 at 14:29
  • Yeah, I really like extension methods but I created a lot of methods for referencing images, css and swf files. Not to overload HtmlHelper class y created AppHelper and add it's namespace to the web.config Dec 7, 2008 at 16:15
  • The use of HtmlHelper was just for likeness to a lot of other MVC code Dec 7, 2008 at 20:08
35

I think the simplest way is to use the following, and it works in views to.

<script type="text/javascript" src="<%=ResolveUrl("~/Scripts/myscript.js") %>">

</script>
2
  • 4
    Why bother with any other method? This is the easiest and best.
    – saille
    Sep 27, 2010 at 22:49
  • I'm in an agile production environment. Motto: if it works, good enough. If it lessens the amount of work i need to do, better. If its a 2 in 1, its great. this is great.
    – Eon
    Mar 5, 2012 at 9:04
20

Based on the other replies, perhaps an extension method on Html (which is very common for MVC), similar to Eduardo's answer:

 <%=Html.Script("~/Scripts/jquery-1.2.6.js")%>

With:

public static string Script(this HtmlHelper html, string path)
{
    var filePath = VirtualPathUtility.ToAbsolute(path);
    return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
}
2
  • 1
    I prefer not to have the path to the scripts in the views so if I have to move them to another domain or subdomain (or maybe a CDN) I don't have to touch every view Dec 7, 2008 at 17:23
  • Fair comment - but in this case, it is a single master page Dec 7, 2008 at 20:06
10

Why not just point your master page at Google's js file hosting? Then even when it comes to deployment (assuming your site is Net facing) you can abuse possibly pre-cached jquery files?

3
  • 3
    That assumes network access to Google, which isn't always the case... ideally it would work with just a local web-server Dec 7, 2008 at 14:21
  • 1
    Good approach for .com sites, but not necessarily good for intranet-style apps Dec 7, 2008 at 14:30
  • 2
    Totally agree. This is purely an FYI in case :)
    – OJ.
    Dec 9, 2008 at 10:46
4

I made some of what OJ mentions, I created a GoogleHelper class with this methods

public static string ReferenceGoogleAPI()
{
    var appSettings = new AppSettingsReader();
    string apiKey = appSettings.GetValue("GoogleApiKey", typeof(string)).ToString();
    return ReferenceGoogleAPI(apiKey);
}

public static string ReferenceGoogleAPI(string key)
{
    return "<script type=\"text/javascript\" src=\"http://www.google.com/jsapi?key=" + key + "\"></script>";
}

public static string ReferenceGoogleLibrary(string name, string version)
{
    return "<script type=\"text/javascript\">google.load(\"" + name + "\", \"" + version + "\");</script>";
}

Now I'm adding extra methods to get some ClientLocation data ;)

1

At work we are doing something like this from the ASP code behind:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  Const jQuery As String = "jQuery"

  With Me.Page.ClientScript
    If Not .IsClientScriptIncludeRegistered(jQuery) Then
      .RegisterClientScriptInclude(jQuery, VirtualPathUtility.ToAbsolute("~/Includes/jQuery-1.2.6.js"))
    End If
  End With
End Sub

I don't know if it's possible to do that with ASP.NET MVC.

1
  • Nope, it isn't. MVC doesn't use the same approach. You could probably do something similar in the view, but there wouldn't be much purpose. By the way, I added notes re the GetHashCode question you asked earlier. Jan 16, 2009 at 16:33
1

ResolveUrl is the most elegant solution IMO. Though it's a real shame the urls to CSS are resolved by runat=server and not the script.

1

You should take a look at using a utility like squish it. It can aggregate and obfuscate all of your css and js files for you. Or you can use it to generate script tags if you just keep it in debug more by using ForceDebug()

http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

1

I just use a slash(/). For Example:

<script src="/Script/jquery-1.4.1.js"></script>

when the "jquery-1.4.1.js" file is in the Script directory of root. And it works perfectly.

0

Our applications are deployed using virtual directories, and we have had some issues with other answers mentioned here (not resolving the path correctly). One way that worked well, (not the only way mind you), was to use this:

<script src="<%=Request.ApplicationPath%>/Web/AppName/JavaScript/jquery-1.4.1.js"></script>
1
  • Sounds like it need to be wrapped up in a Url helper extension. That way you could use Url.Content or your version based on some config or a parameter, maybe...
    – Kieron
    Aug 13, 2010 at 9:08
0

You can try Url.Content extension method with Razor syntax

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.