asp.net 在Orchard中使用样式及脚本

小渣渣 · 发表于 2016-7-28 16:21:53

在Orchard中开发模块我们可能会添加一些这个模块特有的样式或脚本。从web页面优化的角度来看，我们通常需要将样式添加到页面的头部（<head>标签处），而脚本则希望添加到页面地底部（靠近</body>标签）。然而我们开发模块所对应的视图文件其实一个部分视图（PartialView），如果直接在视图中添加样式或脚本引用标签就无法达到我们希望的效果。那么在Orchard中是如何处理这一功能的呢？

在Orchard框架中重写了MVC视图引擎的WebViewPage类，新增了scrip{过滤}t和Style属性用于引入样式和脚本。这样我们就可以在视图中直接使用这个两属性，来调用相应的方法了。

在视图中使用内部样式和脚本

如果我们需要将样式定义或脚本定义直接写到页面中。那么我们可以通过把样式和脚本写入Orchard主题所定义的特定区域中。例如使用以下方法就可以把脚本写入页面的底部区域：
@using (scrip{过滤}t.Foot())
{
  <scrip{过滤}t type="text/javascrip{过滤}t">
function JsSub() {
   //这里可写脚本
}
  </scrip{过滤}t>
}
在Orchard中Style属性并没有Head方法，也许是Orchard不希望我们使用内部样式吧。所以我们还是把样式放在一个外部样式文件中来引用好了。
在视图中使用外部样式和脚本

如果我们想在模块中的调用样式和脚本。那么我就可以通过scrip{过滤}t和Style属性的Include方法，如：
@{
  Style.Include("xxx.css");
  scrip{过滤}t.Include("xxx.js");
}
这样在呈现页面的时候的，orchard会自动调查找此模块中Styles目录下相应的样式文件并生成样式引用标签写在页面的头部。也会查找scrip{过滤}ts目录下相应的脚本文件并生成脚本引用标签写在页面的底部。
使用资源文件

除了以上介绍的两种方法以外，Orchard还提供了一个资源文件清单的功能。我只需要在模块根目录中创建一个ResourceManifest.cs文件，并实现IResourceManifestProvider接口即可。在这个资源清单文件中，我们可以对样式和脚本文件的引用有更丰富的功能。
如：定义一个脚本文件的引用就可以用：
public void BuildManifests(ResourceManifestBuilder builder) {
      builder.Add().Definescrip{过滤}t("jQuery").SetUrl("jquery-1.5.2.min.js")
}
这样在视图上引用的时候可以用：
@{
scrip{过滤}t.Require("jQuery ");
}
而且定义好后其他模块也可以使用这一资源，并且在一个页面中有多个视图文件引用此资源时，也不会出现重复引用，Orchard只会生成一个引用此脚本的标签。
定义样式也一样：
builder.Add().DefineStyle("jQueryUI_Orchard").SetUrl("jquery-ui-1.8.11.custom.css");
使用时：
@{
Style.Require("jQueryUI_Orchard ");
}
同时资源文件清单还有一个依赖设置的功能。就是当一个脚本资源需要依赖其他的脚本资源时，就可以使用以下定义：
builder.Add().Definescrip{过滤}t("jQueryUI_Core").SetUrl("jquery.ui.core.min.js").SetDependencies("jQuery");
这样我们只用在视图上使用jQueryUI_Core脚本，他会自动把它所依赖的jquery脚本也同时引入进来。
如果以脚本同时依赖多脚本，可以用逗号分隔多个依赖的资源，如：
builder.Add().Definescrip{过滤}t("jQueryUI_Draggable").SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
不过目前Orchard还不支持脚本资源依赖样式资源的功能，这有点可惜，其实有些js需要和样式文件同时使用的，如：jQueryUI插件。
另外，资源清单文件还可为调试模式和发布模式设置不同的脚本文件，并且还可以定义相应资源的版本，如：
builder.Add().Definescrip{过滤}t("jQuery").SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js").SetVersion("1.5.2");

Orchard中自带的Orchard.jQuery模块就是这样一个定义jQueryUI插件的模块。如果我们有需要用到这个插件的地方，就可以查看这个清单文件中所定义的js插件，并在我们自己的模块中引用他。不过值得注意的是：如果我们需要引用Orchard.jQuery模块中的内容，就需要在模块清单文件中设置依赖Orchard.jQuery模块，这样在启用我们的模块的时候就会同步启用Orchard.jQuery模块，确保我们所引用的资源都能正常调用。

引用jquery是用scrip{过滤}t.Require("jQuery").AtHead();

		自动登录	找回密码
密码			注册[Register]

[ASP.NET] asp.net 在Orchard中使用样式及脚本

相关帖子