Using scripts in a master page with ASP.NET MVC

Question

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>

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
– belugabob, Commented 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
– feihtthief, Commented Dec 6, 2012 at 20:04

Eduardo Campañó · Accepted Answer · 2008-12-07 13:21:41Z

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") %>

answered Dec 7, 2008 at 13:21

Eduardo Campañó

6,8184 gold badges31 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marc Gravell Over a year ago

I like this; for the common API, I've now done something similar using an extension method on HtmlHelper, but +1

Eduardo Campañó Over a year ago

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

Marc Gravell Over a year ago

The use of HtmlHelper was just for likeness to a lot of other MVC code

superlogical · Accepted Answer · 2009-07-02 04:36:27Z

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>

answered Jul 2, 2009 at 4:36

superlogical

15.1k9 gold badges69 silver badges76 bronze badges

2 Comments

saille Over a year ago

Why bother with any other method? This is the easiest and best.

Eon Over a year ago

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.

Marc Gravell · Accepted Answer · 2008-12-07 14:28:08Z

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>";
}

edited Dec 7, 2008 at 14:28

answered Dec 7, 2008 at 14:20

Marc Gravell

1.1m273 gold badges2.6k silver badges3k bronze badges

2 Comments

Eduardo Campañó Over a year ago

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

Marc Gravell Over a year ago

Fair comment - but in this case, it is a single master page

OJ. · Accepted Answer · 2008-12-07 12:43:31Z

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?

answered Dec 7, 2008 at 12:43

OJ.

29.6k6 gold badges59 silver badges71 bronze badges

3 Comments

Marc Gravell Over a year ago

That assumes network access to Google, which isn't always the case... ideally it would work with just a local web-server

Marc Gravell Over a year ago

Good approach for .com sites, but not necessarily good for intranet-style apps

OJ. Over a year ago

Totally agree. This is purely an FYI in case :)

Eduardo Campañó · Accepted Answer · 2008-12-07 13:37:39Z

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 ;)

answered Dec 7, 2008 at 13:37

Eduardo Campañó

6,8184 gold badges31 silver badges24 bronze badges

Comments

Leandro López · Accepted Answer · 2009-01-16 10:19:34Z

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.

answered Jan 16, 2009 at 10:19

Leandro López

2,1851 gold badge15 silver badges17 bronze badges

1 Comment

Marc Gravell Over a year ago

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.

Peder Skou · Accepted Answer · 2010-04-29 13:20:03Z

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.

answered Apr 29, 2010 at 13:20

Peder Skou

334 bronze badges

Comments

lamchakchan · Accepted Answer · 2011-12-14 18:59:19Z

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

answered Dec 14, 2011 at 18:59

lamchakchan

712 bronze badges

Comments

Raisul Asad · Accepted Answer · 2012-12-19 09:04:20Z

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.

answered Dec 19, 2012 at 9:04

Raisul Asad

111 bronze badge

Comments

Russell · Accepted Answer · 2010-08-12 23:43:14Z

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>

answered Aug 12, 2010 at 23:43

Russell

17.8k24 gold badges84 silver badges127 bronze badges

1 Comment

Kieron Over a year ago

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...

Alex Pryiomka · Accepted Answer · 2012-08-31 21:27:50Z

0

You can try Url.Content extension method with Razor syntax

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

answered Aug 31, 2012 at 21:27

Alex Pryiomka

4414 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using scripts in a master page with ASP.NET MVC

11 Answers 11

3 Comments

2 Comments

2 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

2 Comments

2 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related