Project Description
概要

 [THIS IS EXPERIMENTAL IMPLEMENTATION]
This Library allows you to your ASP.NET MVC3 "Razor Syntax" View to
add references of .js files and .css files into head element dynamicaly at runtime.

[これは実験的な実装です]
このライブラリはASP.NET MVC3 のRazor 構文ビューに実行時に動的に.jsや.cssへの参照をhead要素に追加できるようにします。

Purpose
目的

 This project is one of the answer for follow question.
このプロジェクトは、以下の問題に対する解のひとつです。

"Add css or js files to Layout Head from views or partial views"
http://stackoverflow.com/questions/5110028/add-css-or-js-files-to-layout-head-from-views-or-partial-views

How to use

PM> Install-Package DynamicHeader

  1. Add a reference of DynamicHeader.dll into your ASP.NET MVC3 Razor View Engine Site project. Or, install package from NuGet package manager. For example, enter "Install-Package DynamicHeader" command in package managet console.
  2. Add calling @Html.DynamicHeader() inside head element.
  3. And, call DynamicHeader.AddScript("...js") or DynamicHeader.AddStyleSheet("...css") method at any point, such as code block in partial view.
  4. Then, rendering script tag and link tag to reference .js/.css files which registered by calling DynamicHeader.AddScript/AddStyleSheet inplace at DynamicHeader Helper called.


使い方

  1. ASP.NET MVC3 Razor ビューエンジンによるプロジェクトに、DynamicHeader.dll への参照設定を追加します。NuGet パッケージマネージャから パッケージ をインストールすることをお勧めします。
  2. head 要素内に @Html.DynamicHeader() ヘルパの呼び出しを追加します。
  3. その上で、任意の箇所で DynamicHeader.AddScript("...js") または DynamicHeader.AddStyleSheet("...css") 静的メソッドを呼び出します(例えばパーシャルビューのコードブロック中など)。
  4. すると、AddScript/AddStyleSheet 静的メソッド呼び出しによって登録された .js/.css ファイルへの script タグおよび link タグによる参照が、DynamicHeader ヘルパ呼び出しを書いた箇所に出力されます。


Example

_Layout.cshtml

<head>
    ....
    @Html.DynamicHeader()
</head>

Index.cshtml

...
@Html.Partial("SomePartialView")

SomePartialView.cshtml

@{
    DynamicHeader.AddScript("~/Scripts/foo.js");
}

Then, output of Index.cshtml is:

<head>
  ...
  <script src="/Scripts/foo.js" ...></script>
</head>
...

How does it work?

 My idea is "2-pass process" , using "ASP.NET Response Filter".

  1. @Html.DynamicHeader() output signature, such as "\b..." (bell code) only. @Html.DynamicHeader() does not output any HTML contents.
  2. DynamicHeader.AddScript/AddStyleSheet static methods push the file path into HttpContext.Current.Items.
  3. And, DynamicHeader.dll injected the HttpModule at start up of the application automatically. This HttpModule install custom response filter.
  4. At last, after Razor View rendering process, if the response filter found signature that outputted by @Html.DynamicHeader, then the response filter replaced this signature with <script> and <link> tag which pushed into HttpContext.Current.Items by calling DynamicHeader.AddScript/AddStyleSheet static method.


どうやって動作するか

"ASP.NET Response Filter" を使うことで、"2-パス処理" することで実現します。

  1. @Html.DynamicHeader() は、"\b..." といった シグネチャ を出力するのみです。HTML コンテンツの類は一切出力しません。
  2. DynamicHeader.AddScript/AddStyleSheet 静的メソッドは、インクルードする.js/.cssファイルのパスを HttpContext.Current.Items に記憶します。
  3. いっぽう、DynamicHeader.dll アセンブリは、アプリケーションの開始時に自動的にとある HttpModule をインストールします。この HttpModule が、特製のレスポンスフィルターをインストールします。
  4. Razor View による HTML レンダリング処理が終わった後、このレスポンスフィルターが @Html.DynamicHeader 呼び出しによって出力されたシグネチャを発見すると、先に DynamicHeader.AddScript/AddStyleSheet 静的メソッドによって HttpContext.Current.Items に記憶された内容を取り出して、このシグネチャを <script> や <link> タグに置換します。

Last edited Mar 14, 2012 at 11:54 PM by jsakamoto, version 12