在ASP.NET MVC的母版页中使用脚本


70

我对ASP.NET MVC相当陌生,并且在脚本方面遇到了一些麻烦……特别是,我想在大多数页面中使用jQuery,因此将其放在母版页中是有意义的。但是,如果我这样做(来自~/Views/Shared/Site.Master):

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

这就是字面上的意思,这取决于客户-当然,只有当我们当前的路线碰巧具有正确数量的等级时,这才起作用。从开始~/Scripts/...不起作用。/Scripts/...如果项目位于站点根目录(我不想假设),则从头开始将是有效的。

我有一种可行的方法(我将在下面发布)-但是:我缺少什么吗?

我宁愿不必使用脚本管理器,因为这似乎破坏了ASP.NET MVC模型的简单性……还是我太担心了?

这是我使其工作的方式,它对非平凡的虚拟机也适用-但似乎过于复杂:

<script src="<%=Url.Content("~/Scripts/jquery-1.2.6.js")%>" type="text/javascript"></script>

3
令人讨厌的事情是,对于<link>元素的href属性,使用“〜”前缀可以正常使用,但对于<script>元素的'src'属性则不能使用
belugabob

@belugabob:是什么让您说这在脚本标签的src属性中不起作用?
feihtthief 2012年

Answers:


45

我有一个AppHelper类,其中包含一些用于添加脚本引用的方法:

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

因此,在母版页中,您可以使用:

<%= AppHelper.ReferenceScript("jquery-1.2.6.js") %>

6
我喜欢这个; 对于通用API,我现在在HtmlHelper上使用扩展方法做了类似的事情,但+1
Marc Gravell

是的,我真的很喜欢扩展方法,但是我创建了很多方法来引用图像,css和swf文件。不要重载由您创建的AppHelper的HtmlHelper类并将其命名空间添加到web.config中
EduardoCampañó08年

使用HtmlHelper只是为了使其与许多其他MVC代码相似
Marc Gravell

36

我认为最简单的方法是使用以下代码,并且可以在以下视图中使用。

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

</script>

4
为什么还要打扰其他方法呢?这是最简单和最好的。
Saille

我处于敏捷的生产环境中。座右铭:如果可行,就足够了。如果减少了我需要做的工作量,那就更好了。如果它是2合1,那就太好了。这很棒。
2012年

20

根据其他答复,也许是Html的扩展方法(对于MVC非常常见),类似于Eduardo的回答:

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

带有:

public static string Script(this HtmlHelper html, string path)
{
    var filePath = VirtualPathUtility.ToAbsolute(path);
    return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
}

1
我不希望视图中没有脚本的路径,因此,如果我不得不将它们移到另一个域或子域(或CDN),则不必触摸每个视图
EduardoCampañó08年

公平评论-但在这种情况下,它是一个母版页
Marc Gravell

10

为什么不将您的主页指向Google的js文件托管?那么,即使涉及到部署(假设您的站点面向Net),您也可能会滥用可能预缓存的jquery文件?


3
假定网络可以访问Google,但情况并非总是如此...理想情况下,它只能与本地网络服务器一起使用
Marc Gravell

1
.com网站的好方法,但内联网样式的应用程序不一定好
Marc Gravell

2
完全同意。万一这是纯粹的FYI :)
OJ。

4

我做了OJ提到的一些事情,我用这种方法创建了一个GoogleHelper类

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

现在,我添加了一些额外的方法来获取一些ClientLocation数据;)


1

在工作中,我们正在后面的ASP代码中执行以下操作:

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

我不知道是否可以使用ASP.NET MVC做到这一点。


不,不是。MVC没有使用相同的方法。您可能会在视图中执行类似的操作,但是没有太大的目的。顺便说一句,我在您之前询问的GetHashCode问题中添加了注释。
马克·格雷韦尔



1

我只用一个斜杠(/)。例如:

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

当“ jquery-1.4.1.js”文件位于root的Script目录中时。而且效果很好。


0

我们的应用程序是使用虚拟目录部署的,这里提到的其他答案存在一些问题(无法正确解析路径)。一种有效的方法(不是您唯一的方法)是使用此方法:

<script src="<%=Request.ApplicationPath%>/Web/AppName/JavaScript/jquery-1.4.1.js"></script>

听起来好像需要将其包装在一个Url帮助程序扩展中。这样,您就可以使用Url.Content或基于某些配置或参数的版本,例如...
Kieron 2010年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.