MVC3プロジェクトには、このコードを含む「_Layout.vbhtml」ファイルがあります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
@RenderSection("Scripts", false)
</body>
</html>
次に、共有フォルダに部分ビュー「ValidationScripts.vbhtml」を作成します。
@Section Scripts
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.fix.js")"></script>
<script src="@Url.Content("~/Scripts/localization/messages_de.js")"></script>
End Section
このようにビューから部分ビューを呼び出すと...
@ModelType MvcExample.MyModel
@Code
ViewData("Title") = "Test"
End Code
@Html.Partial("ValidationScripts")
<h2>Just a Test</h2>
...
セクション「スクリプト」はページ上にレンダリングされず、出力HTMLは
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
</body>
</html>
部分ビューでセクションをレンダリングするにはどうすればよいですか?
ベストアンサー1
重複したスクリプトで同じ問題が発生したため、いくつかの拡張メソッドを作成しました。
public static class HtmlHelperExtensions
{
private const string _jSViewDataName = "RenderJavaScript";
private const string _styleViewDataName = "RenderStyle";
public static void AddJavaScript(this HtmlHelper htmlHelper,
string scriptURL)
{
List<string> scriptList = htmlHelper.ViewContext.HttpContext
.Items[HtmlHelperExtensions._jSViewDataName] as List<string>;
if (scriptList != null)
{
if (!scriptList.Contains(scriptURL))
{
scriptList.Add(scriptURL);
}
}
else
{
scriptList = new List<string>();
scriptList.Add(scriptURL);
htmlHelper.ViewContext.HttpContext
.Items.Add(HtmlHelperExtensions._jSViewDataName, scriptList);
}
}
public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper)
{
StringBuilder result = new StringBuilder();
List<string> scriptList = HtmlHelper.ViewContext.HttpContext
.Items[HtmlHelperExtensions._jSViewDataName] as List<string>;
if (scriptList != null)
{
foreach (string script in scriptList)
{
result.AppendLine(string.Format(
"<script type=\"text/javascript\" src=\"{0}\"></script>",
script));
}
}
return MvcHtmlString.Create(result.ToString());
}
public static void AddStyle(this HtmlHelper htmlHelper, string styleURL)
{
List<string> styleList = htmlHelper.ViewContext.HttpContext
.Items[HtmlHelperExtensions._styleViewDataName] as List<string>;
if (styleList != null)
{
if (!styleList.Contains(styleURL))
{
styleList.Add(styleURL);
}
}
else
{
styleList = new List<string>();
styleList.Add(styleURL);
htmlHelper.ViewContext.HttpContext
.Items.Add(HtmlHelperExtensions._styleViewDataName, styleList);
}
}
public static MvcHtmlString RenderStyles(this HtmlHelper htmlHelper)
{
StringBuilder result = new StringBuilder();
List<string> styleList = htmlHelper.ViewContext.HttpContext
.Items[HtmlHelperExtensions._styleViewDataName] as List<string>;
if (styleList != null)
{
foreach (string script in styleList)
{
result.AppendLine(string.Format(
"<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />",
script));
}
}
return MvcHtmlString.Create(result.ToString());
}
}
任意のビュー、部分ビュー、または表示/編集テンプレートに、必要なものを追加するだけです。
@{
Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js");
}
レイアウトでは、必要な場所にレンダリングします。
<!DOCTYPE html>
<html lang="en">
<head>
@Html.RenderStyles()
@Html.RenderJavascripts()
複雑になった場合に発生する可能性がある唯一の問題は、スクリプトがレンダリングされる順序です。これが問題になる場合は、スクリプトをビュー/テンプレートの下部に追加し、レンダリングする前に拡張メソッドで順序を逆にするだけです。