asp.net オーチャードでのスタイルとスクリプトの使用

クズども · 掲載地 2016/07/28 16:21:53

Orchardでモジュールを開発する際には、そのモジュールに特有のスタイルやスクリプトを追加することがあります。ウェブページの最適化の観点からは、ページの先頭(<head>ラベル付近)にスタイルを追加する必要があり、スクリプトはページの下部(ラベル付近)に追加したい</body>のです。しかし、私たちが開発したモジュールに対応するビューファイルは実際にはPartialViewであり、スタイルやスクリプト参照タグを直接ビューに追加すると望ましい効果は得られません。では、この機能はオーチャードでどのように扱われているのでしょうか?

MVCビューエンジンのWebViewPageクラスはOrchardフレームワークで書き直され、scrip{filter}tとStyle属性が追加されてスタイルやスクリプトが導入されました。これにより、これら2つの性質をビュー内で直接利用して対応するメソッドを呼び出すことができます。

ビューには内部スタイルやスクリプトを使いましょう

もしスタイル定義やスクリプト定義をページに直接書き込む必要があるなら、そして、オーチャードのテーマで定義された特定の領域にスタイルやスクリプトを書き込むことができます。例えば、ページの下部にスクリプトを書く方法は以下の通りです:
@using (scrip{filter}t.Foot())
{
  <scrip{filter}t type="text/javascrip{filter}t">
関数 JsSub() {
   ここでスクリプトを書くことができます
}
  </scrip{filter}t>
}
Orchardでは、Style属性にHeadメソッドがなく、おそらくOrchardは内部スタイルの使用を避けたいのかもしれません。それでは、そのスタイルを外部のスタイルファイルに入れて参照しましょう。
ビューで外部スタイルやスクリプトを使いましょう

モジュール内でスタイルやスクリプトを呼び出す場合、その後、scrip{filter}tとStyle属性のIncludeメソッドを使えます。例えば:
@{
  スタイル・包含("xxx.css");
  scrip{filter}t.Include("xxx.js");
}
このようにして、ページをレンダリングする際、OrchardはこのモジュールのStylesディレクトリ内の対応するスタイルファイルを自動的に検索し、ページの先頭に書き込むスタイル参照タグを生成します。また、scrip{filter}tsディレクトリ内の対応するスクリプトファイルを探し、ページ下部に書かれたスクリプト参照タグを生成します。
リソースファイルの使用

上記の2つの方法に加え、Orchardはリソースファイルマニフェスト機能も提供しています。モジュールのルートディレクトリにResourceManifest.csファイルを作成し、IResourceManifestProviderインターフェースを実装するだけです。このリソースマニフェストファイルでは、スタイルやスクリプトファイルの参照機能がより充実しています。
例えば、スクリプトファイルへの参照定義は以下のように使えます:
public void BuildManifests(ResourceManifestBuilder builder) {
      ビルダー。 Add()。 Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
このようにして、ビューを参照する際には以下を利用できます:
@{
scrip{filter}t.Require("jQuery");
}
さらに、定義後は他のモジュールもこのリソースを使用可能になり、ページ上で複数のビューファイルがこのリソースを参照している場合、重複リファレンスはなくなり、Orchardはこのスクリプトを参照するタグのみを生成します。
スタイルの定義も同様です:
ビルダー。 Add()。 DefineStyle("jQueryUI_Orchard")。 SetUrl("jquery-ui-1.8.11.custom.css");
使用時:
@{
スタイル。必要条件("jQueryUI_Orchard");
}
リソースファイルリストには依存関係設定機能もあります。スクリプトリソースが他のスクリプトリソースに依存しなければならない場合、以下の定義を使用できます。
ビルダー。 Add()。 Definescrip{filter}t("jQueryUI_Core")。 SetUrl("jquery.ui.core.min.js")。 SetDependencies("jQuery");
こうすることで、ビュー jQueryUI_Coreスクリプトだけを使い、依存するjqueryスクリプトも自動的にインポートされます。
複数のスクリプトを同時にスクリプトとして使う場合、複数の依存リソースをコンマで区切ることができます。例えば:
ビルダー。 Add()。 Definescrip{filter}t("jQueryUI_Draggable")。 SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
しかし、Orchardはまだスタイルリソースに依存するスクリプトリソースの機能をサポートしていません。これは少し残念です。実際、jQueryUIプラグインのように一部のjsはスタイルファイルと同時に使う必要があります。
さらに、リソースインベントリファイルはデバッグモードやリリースモード用のスクリプトファイルを設定でき、対応するリソースバージョンも定義できます。例えば:
ビルダー。 Add()。 Definescrip{filter}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{filter}t.Require("jQuery")で参照されます。 AtHead();

[ASP.NET] asp.net オーチャードでのスタイルとスクリプトの使用

関連記事

閲覧したセクション