在内容页面中使用脚本和 css 文件答案

【问题标题】：Use script and css files in content pages在内容页面中使用脚本和 css 文件
【发布时间】：2013-03-08 12:58:46
【问题描述】：

多年来，我一直在尝试解决在我的内容页面中加载 javascript 和样式表的方法。

如何在master page 的标记中链接所有资源文件，如.css 和.js，然后直接在内容页面中使用它们而不将它们添加到每个所述内容页面？

我发现我们可以通过使用主题和在母版页中初始化一个主题来链接.css文件；但是.js 文件和图像呢？

如何在母版页中链接它们，然后在内容页中访问它们？

请指点我正确的方向。

【问题讨论】：

标签： asp.net master-pages

【解决方案1】：

在母版页上，您放在头部的任何内容都会出现在使用该母版的所有内容页面中。

也就是说，如果您的母版页中有：

<head runat="server">
    <script type="text/javascript" src="/js/pages/jquery.min.js"></script>
    <script type="text/javascript" src="/js/pages/jquery.jscrollpane.min.js"></script>
</head>

那么每个内容页面的头部都会包含相同的内容。

如果您的脚本被某些页面使用而不是其他页面使用，那么在母版页上，您可以在母版页的 <head> 中定义 <asp:content> 标记。

然后在您的内容页面中，您可以将指向您的 javascript 文件的链接直接放入页面标题中内容标签的内容占位符中。

如果你想链接图片，我建议通过 javascript 来做。如果您在母版页头中创建了 <script> 块，内容如下：

var ReusableImageVariable = new Image();
ReusableImageVariable.src = '\A\Path\To\Your\image.jgp';

然后，您可以在任何内容页面上放置一个使用该ReusableImageVariable 的脚本块并将其复制到指定位置的文档中：

<script type='text/javascript'>
    document.getElementById('PlaceHolderForImage').appendChild(ReusableImageVariable);
</script>

其中PlaceHolderforImage 是<div> 或其他包含元素的ID。这也有助于缩短浏览器加载时间，因为您在加载样式表和脚本的同时加载图像。

最后，如果您只想使用 ASP，我会将图像定义为母版页的属性。然后任何内容页面都可以在后面的代码中访问它们并将它们加载到您需要的地方。

【讨论】：

【解决方案2】：

我假设我们在谈论 Web 表单，而不是 MVC？您可以将脚本放在<asp:ScriptManager> 控件的<Scripts> 集合或<CompositeScript> 列表中。您可以通过ScriptManager.GetCurrent(PageReference);获得对 ScriptManager 的引用

图像没有专门为图像构建的类似的东西；但是，它可以构建。

【讨论】：