ASP.NET – 用于引用.CSS和.JS的路径

我的项目根目录中有一个母版页。 我在整个项目中以及引用此母版页的子文件夹中都有内容页面。 如果我总是希望它们相对于根目录，那么引用我的.CSS和.JS文件的正确方法是什么？

我现在就是这样做的：

 link href =“/ common / css / global.css”
 script src =“/ common / javascript / global.js”

但这打破了联系。 我没有使用前导“/”但是在子文件夹中的页面上没有用。

Answer 1

我会用类似的东西

Server.ResolveClientUrl("~/common/css/global.css") 

这将在任何时候为您提供适当的url。

例：

根据评论，这将是完全使用。

根据评论，其他validation用法，没有“错误CS1061：’System.Web.HttpServerUtility’不包含定义”错误：

同样重要的是始终放置结束标记。

Answer 2

您可以使标记在服务器上运行，以便Asp.Net将为您解析URL：

（注意’〜’）
我不知道它是否可以应用于标签，你应该试试......

编辑：我最近在一个项目中发现，您可以（并且应该）使用ScriptManager来保存脚本（每页只能有1个）。 您可以在MasterPage中放置一个并引用所有脚本。 在内容页面中，然后添加一个ScriptManagerProxy ，它将“引用”母版页上的脚本，您甚至可以仅为该内容页面添加其他脚本。

Answer 3

我这样做很简单： link href="<%=ResolveUrl("~/common/css/global.css")%>"

Answer 4

到目前为止我看到的解决方案在我的项目中不起作用（尤其不适用于.css链接）。 问题如下：

• 在内部，它没有解析<%=...%>表达式
• 在所有情况下都没有找到Page.ResolveURL
• 如果嵌入<%=...%>则会出现“和”引号的问题

所以我想提供这个解决方案：在代码背后（您的母版页的C＃类），添加以下3种方法：

 public partial class SiteBasic : System.Web.UI.MasterPage { public string ResolveURL(string url) { var resolvedURL=this.Page.ResolveClientUrl(url); return resolvedURL; } public string cssLink(string cssURL) { return string.Format("", ResolveURL(cssURL)); } public string jsLink(string jsURL) { return string.Format("", ResolveURL(jsURL)); } } 

对于样式表引用，您可以说：

 <%=cssLink("~/css/custom-theme/jquery-ui-1.8.20.custom.css")%> 

对于JavaScript引用，它看起来像这样：

 <%=jsLink("~/Scripts/jquery-1.7.2.js")%> 

对于其他参考，您可以使用：

 link  

注意：我发现在href或src属性中使用单引号和双引号更好，如上例所示。 反之亦然，在我发现的某些情况下会造成麻烦。

这个解决方案很简单，在我的情况下运行良好，即使引用主页面的页面位于不同的子目录中。 它基本上做的是根据您当前显示的页面将~路径（需要绝对从您的网站的根目录）转换为相对路径（在路径中根据需要使用尽可能多的../ ）。

---

高级提示：

如果您正在使用AJAX调用来调用Web服务方法 ，那么如果您在不同的目录级别上安装ASPX页面，则会引发相同的问题。 我建议您定义类似的东西（假设您的Web服务位于~/AJAX目录中）：

在您的母版页的 ... 部分内。 这将使您的JavaScript中的Web服务的输入路径可用。 你可以像使用它一样

 $.ajax({ type: "POST", url: getWebServicePath()+"myWebService.asmx/myMethod", data: $.toJSON({ param: "" }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { // ... code on success ... }, error: function (ex) { // ... code on error ... } });