エディター/表示テンプレートでセクションを使用する


104

すべてのJavaScriptコードを1つのセクションにまとめたいと思います。body私のマスターレイアウトページの終了タグの直前で、MVCスタイルについて検討するのが最善だと思います。

たとえば、DisplayTemplate\DateTime.cshtmljQuery UIのDateTime Pickerを使用するファイルを作成する場合、JavaScriptをそのテンプレートに直接埋め込みますが、ページの途中でレンダリングされます。

私の通常のビューでは、私はちょうど使用することができ@section JavaScript { //js here }、その後、@RenderSection("JavaScript", false)私のマスターレイアウトではなく、これは、ディスプレイ/エディタテンプレートで作業していないようです-任意のアイデア?


4
後でこれに来る人のために-これを処理するためのnugetパッケージがあります:nuget.org/packages/Forloop.HtmlHelpers
Russ Cam

回答:


189

2つのヘルパーを組み合わせて続行できます。

public static class HtmlExtensions
{
    public static MvcHtmlString Script(this HtmlHelper htmlHelper, Func<object, HelperResult> template)
    {
        htmlHelper.ViewContext.HttpContext.Items["_script_" + Guid.NewGuid()] = template;
        return MvcHtmlString.Empty;
    }

    public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
    {
        foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
        {
            if (key.ToString().StartsWith("_script_"))
            {
                var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, HelperResult>;
                if (template != null)
                {
                    htmlHelper.ViewContext.Writer.Write(template(null));
                }
            }
        }
        return MvcHtmlString.Empty;
    }
}

そしてあなたの中で_Layout.cshtml

<body>
...
@Html.RenderScripts()
</body>

そして、いくつかのテンプレートのどこかに:

@Html.Script(
    @<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
)

3
辞書は順不同なので、先入れ先出しをするにはどうすればよいですか?順序が出力する(おそらくのGUIDの)ランダムである..
eth0の

おそらく、静的整数フィールドを設定し、GUIDの代わりにInterlocked.Increment()を使用して順序を取得することもできますが、それでも辞書では順序が保証されていないと思います。考え直しますが、静的フィールドは、ページ表示全体で保持される可能性があるため、危険かもしれません。代わりに、整数を項目ディクショナリに追加できますが、その周りにロックをかける必要があります。
Mark Adamson、

私は最近このソリューションを使い始めましたが、HelperResultがどのように機能するのかわからないため、@ Html.Script()の1行に2つのスクリプトを詰め込むことはできません。1つのHtml.Script呼び出しで2つのスクリプトブロックを実行することはできませんか?
ラングドン

2
@TimMeers、どういう意味ですか?私にとって、これは常に時代遅れでした。私はそれらのヘルパーをまったく使用しません。部分ビューにスクリプトを含める必要がありませんでした。私は単に標準のRazorに固執しsectionsます。MVC4では、バンドルは実際に使用でき、スクリプトのサイズを削減するのに役立ちます。
Darin Dimitrov

4
あなたがあなたのスクリプトやスタイルを配置したい場合は、このアプローチは動作しませんheadタグの代わりの最後にbodyタグので、@Html.RenderScripts()あなたの部分図の前に、したがって、前に実行されます@Html.Script()
Maksim Vi。

41

注文を確実にするためにDarinの回答の修正版。CSSでも動作します:

public static IHtmlString Resource(this HtmlHelper HtmlHelper, Func<object, HelperResult> Template, string Type)
{
    if (HtmlHelper.ViewContext.HttpContext.Items[Type] != null) ((List<Func<object, HelperResult>>)HtmlHelper.ViewContext.HttpContext.Items[Type]).Add(Template);
    else HtmlHelper.ViewContext.HttpContext.Items[Type] = new List<Func<object, HelperResult>>() { Template };

    return new HtmlString(String.Empty);
}

public static IHtmlString RenderResources(this HtmlHelper HtmlHelper, string Type)
{
    if (HtmlHelper.ViewContext.HttpContext.Items[Type] != null)
    {
        List<Func<object, HelperResult>> Resources = (List<Func<object, HelperResult>>)HtmlHelper.ViewContext.HttpContext.Items[Type];

        foreach (var Resource in Resources)
        {
            if (Resource != null) HtmlHelper.ViewContext.Writer.Write(Resource(null));
        }
    }

    return new HtmlString(String.Empty);
}

次のように、JSおよびCSSリソースを追加できます。

@Html.Resource(@<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>, "js")
@Html.Resource(@<link rel="stylesheet" href="@Url.Content("~/CSS/style.css")" />, "css")

そして、JSおよびCSSリソースを次のようにレンダリングします。

@Html.RenderResources("js")
@Html.RenderResources("css")

文字列チェックを実行してスクリプト/リンクで始まるかどうかを確認できるため、各リソースを明示的に定義する必要はありません。


eth0に感謝します。私はこの問題で妥協しましたが、これをチェックする必要があります。
one.beat.consumer 2011

私はこれをほぼ2年前に知っていますが、css / jsファイルがすでに存在していて、それをレンダリングしないかどうかを確認する方法はありますか?ありがとう
CodingSlayer 2014年

1
OK。それがどれほど効率的かはわかりませんが、現在私はこれを行っています:var httpTemplates = HtmlHelper.ViewContext.HttpContext.Items [Type] as List <Func <object、HelperResult >>; var prevItem = httpテンプレートのqからqここでq(null).ToString()== Template(null).ToString()select q; if(!prevItem.Any()){// Add Template}
CodingSlayer

@imAbhiおかげで、私が必要なのは、item.ToStringを含む1つのfor-loopバンドルのように見えるので、十分高速であると思います
Kunukn

35

私も同じ問題に直面しましたが、ここで提案された解決策は、リソースへの参照を追加する場合にのみ機能し、インラインJSコードにはあまり適していません。私は非常に役立つ記事を見つけ、すべてのインラインJS(およびスクリプトタグ)を

@using (Html.BeginScripts())
{
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
    <script>
    // my inline scripts here
    <\script>
}

そして、@Html.PageScripts()「body」タグを閉じる直前に配置された_Layoutビュー。私にとっては魅力のように機能します。


ヘルパー自身:

public static class HtmlHelpers
{
    private class ScriptBlock : IDisposable
    {
        private const string scriptsKey = "scripts";
        public static List<string> pageScripts
        {
            get
            {
                if (HttpContext.Current.Items[scriptsKey] == null)
                    HttpContext.Current.Items[scriptsKey] = new List<string>();
                return (List<string>)HttpContext.Current.Items[scriptsKey];
            }
        }

        WebViewPage webPageBase;

        public ScriptBlock(WebViewPage webPageBase)
        {
            this.webPageBase = webPageBase;
            this.webPageBase.OutputStack.Push(new StringWriter());
        }

        public void Dispose()
        {
            pageScripts.Add(((StringWriter)this.webPageBase.OutputStack.Pop()).ToString());
        }
    }

    public static IDisposable BeginScripts(this HtmlHelper helper)
    {
        return new ScriptBlock((WebViewPage)helper.ViewDataContainer);
    }

    public static MvcHtmlString PageScripts(this HtmlHelper helper)
    {
        return MvcHtmlString.Create(string.Join(Environment.NewLine, ScriptBlock.pageScripts.Select(s => s.ToString())));
    }
}

3
これが最良の答えです。また、ほとんど何でも注入して最後まで遅延させることができます
drzaus

1
コードがダウンした場合に備えて、記事からコードをコピーして貼り付けてください。これは素晴らしい答えです!
Shaamaan 2015年

これをasp.netコアで行うには
ramanmittal

13

@ john-w- hardingによって投稿されたソリューションが好きだったので、@ darin-dimitrovによる回答と組み合わせて、usingブロック内の任意のhtml(スクリプトも)のレンダリングを遅延させる可能性のある複雑すぎるソリューションを作成しました。

使用法

繰り返し部分ビューでは、ブロックを1回だけ含めます。

@using (Html.Delayed(isOnlyOne: "MYPARTIAL_scripts")) {
    <script>
        someInlineScript();
    </script>
}

(繰り返し?)パーシャルビューで、パーシャルが使用されるたびにブロックを含めます。

@using (Html.Delayed()) {
    <b>show me multiple times, @Model.Whatever</b>
}

(繰り返しですか?)部分的なビューで、ブロックを1回含め、後で名前で具体的にレンダリングしますone-time

@using (Html.Delayed("one-time", isOnlyOne: "one-time")) {
    <b>show me once by name</b>
    <span>@Model.First().Value</span>
}

レンダリングするには:

@Html.RenderDelayed(); // the "default" unidentified blocks
@Html.RenderDelayed("one-time", false); // render the specified block by name, and allow us to render it again in a second call
@Html.RenderDelayed("one-time"); // render the specified block by name
@Html.RenderDelayed("one-time"); // since it was "popped" in the last call, won't render anything

コード

public static class HtmlRenderExtensions {

    /// <summary>
    /// Delegate script/resource/etc injection until the end of the page
    /// <para>@via https://stackoverflow.com/a/14127332/1037948 and http://jadnb.wordpress.com/2011/02/16/rendering-scripts-from-partial-views-at-the-end-in-mvc/ </para>
    /// </summary>
    private class DelayedInjectionBlock : IDisposable {
        /// <summary>
        /// Unique internal storage key
        /// </summary>
        private const string CACHE_KEY = "DCCF8C78-2E36-4567-B0CF-FE052ACCE309"; // "DelayedInjectionBlocks";

        /// <summary>
        /// Internal storage identifier for remembering unique/isOnlyOne items
        /// </summary>
        private const string UNIQUE_IDENTIFIER_KEY = CACHE_KEY;

        /// <summary>
        /// What to use as internal storage identifier if no identifier provided (since we can't use null as key)
        /// </summary>
        private const string EMPTY_IDENTIFIER = "";

        /// <summary>
        /// Retrieve a context-aware list of cached output delegates from the given helper; uses the helper's context rather than singleton HttpContext.Current.Items
        /// </summary>
        /// <param name="helper">the helper from which we use the context</param>
        /// <param name="identifier">optional unique sub-identifier for a given injection block</param>
        /// <returns>list of delayed-execution callbacks to render internal content</returns>
        public static Queue<string> GetQueue(HtmlHelper helper, string identifier = null) {
            return _GetOrSet(helper, new Queue<string>(), identifier ?? EMPTY_IDENTIFIER);
        }

        /// <summary>
        /// Retrieve a context-aware list of cached output delegates from the given helper; uses the helper's context rather than singleton HttpContext.Current.Items
        /// </summary>
        /// <param name="helper">the helper from which we use the context</param>
        /// <param name="defaultValue">the default value to return if the cached item isn't found or isn't the expected type; can also be used to set with an arbitrary value</param>
        /// <param name="identifier">optional unique sub-identifier for a given injection block</param>
        /// <returns>list of delayed-execution callbacks to render internal content</returns>
        private static T _GetOrSet<T>(HtmlHelper helper, T defaultValue, string identifier = EMPTY_IDENTIFIER) where T : class {
            var storage = GetStorage(helper);

            // return the stored item, or set it if it does not exist
            return (T) (storage.ContainsKey(identifier) ? storage[identifier] : (storage[identifier] = defaultValue));
        }

        /// <summary>
        /// Get the storage, but if it doesn't exist or isn't the expected type, then create a new "bucket"
        /// </summary>
        /// <param name="helper"></param>
        /// <returns></returns>
        public static Dictionary<string, object> GetStorage(HtmlHelper helper) {
            var storage = helper.ViewContext.HttpContext.Items[CACHE_KEY] as Dictionary<string, object>;
            if (storage == null) helper.ViewContext.HttpContext.Items[CACHE_KEY] = (storage = new Dictionary<string, object>());
            return storage;
        }


        private readonly HtmlHelper helper;
        private readonly string identifier;
        private readonly string isOnlyOne;

        /// <summary>
        /// Create a new using block from the given helper (used for trapping appropriate context)
        /// </summary>
        /// <param name="helper">the helper from which we use the context</param>
        /// <param name="identifier">optional unique identifier to specify one or many injection blocks</param>
        /// <param name="isOnlyOne">extra identifier used to ensure that this item is only added once; if provided, content should only appear once in the page (i.e. only the first block called for this identifier is used)</param>
        public DelayedInjectionBlock(HtmlHelper helper, string identifier = null, string isOnlyOne = null) {
            this.helper = helper;

            // start a new writing context
            ((WebViewPage)this.helper.ViewDataContainer).OutputStack.Push(new StringWriter());

            this.identifier = identifier ?? EMPTY_IDENTIFIER;
            this.isOnlyOne = isOnlyOne;
        }

        /// <summary>
        /// Append the internal content to the context's cached list of output delegates
        /// </summary>
        public void Dispose() {
            // render the internal content of the injection block helper
            // make sure to pop from the stack rather than just render from the Writer
            // so it will remove it from regular rendering
            var content = ((WebViewPage)this.helper.ViewDataContainer).OutputStack;
            var renderedContent = content.Count == 0 ? string.Empty : content.Pop().ToString();

            // if we only want one, remove the existing
            var queue = GetQueue(this.helper, this.identifier);

            // get the index of the existing item from the alternate storage
            var existingIdentifiers = _GetOrSet(this.helper, new Dictionary<string, int>(), UNIQUE_IDENTIFIER_KEY);

            // only save the result if this isn't meant to be unique, or
            // if it's supposed to be unique and we haven't encountered this identifier before
            if( null == this.isOnlyOne || !existingIdentifiers.ContainsKey(this.isOnlyOne) ) {
                // remove the new writing context we created for this block
                // and save the output to the queue for later
                queue.Enqueue(renderedContent);

                // only remember this if supposed to
                if(null != this.isOnlyOne) existingIdentifiers[this.isOnlyOne] = queue.Count; // save the index, so we could remove it directly (if we want to use the last instance of the block rather than the first)
            }
        }
    }


    /// <summary>
    /// <para>Start a delayed-execution block of output -- this will be rendered/printed on the next call to <see cref="RenderDelayed"/>.</para>
    /// <para>
    /// <example>
    /// Print once in "default block" (usually rendered at end via <code>@Html.RenderDelayed()</code>).  Code:
    /// <code>
    /// @using (Html.Delayed()) {
    ///     <b>show at later</b>
    ///     <span>@Model.Name</span>
    ///     etc
    /// }
    /// </code>
    /// </example>
    /// </para>
    /// <para>
    /// <example>
    /// Print once (i.e. if within a looped partial), using identified block via <code>@Html.RenderDelayed("one-time")</code>.  Code:
    /// <code>
    /// @using (Html.Delayed("one-time", isOnlyOne: "one-time")) {
    ///     <b>show me once</b>
    ///     <span>@Model.First().Value</span>
    /// }
    /// </code>
    /// </example>
    /// </para>
    /// </summary>
    /// <param name="helper">the helper from which we use the context</param>
    /// <param name="injectionBlockId">optional unique identifier to specify one or many injection blocks</param>
    /// <param name="isOnlyOne">extra identifier used to ensure that this item is only added once; if provided, content should only appear once in the page (i.e. only the first block called for this identifier is used)</param>
    /// <returns>using block to wrap delayed output</returns>
    public static IDisposable Delayed(this HtmlHelper helper, string injectionBlockId = null, string isOnlyOne = null) {
        return new DelayedInjectionBlock(helper, injectionBlockId, isOnlyOne);
    }

    /// <summary>
    /// Render all queued output blocks injected via <see cref="Delayed"/>.
    /// <para>
    /// <example>
    /// Print all delayed blocks using default identifier (i.e. not provided)
    /// <code>
    /// @using (Html.Delayed()) {
    ///     <b>show me later</b>
    ///     <span>@Model.Name</span>
    ///     etc
    /// }
    /// </code>
    /// -- then later --
    /// <code>
    /// @using (Html.Delayed()) {
    ///     <b>more for later</b>
    ///     etc
    /// }
    /// </code>
    /// -- then later --
    /// <code>
    /// @Html.RenderDelayed() // will print both delayed blocks
    /// </code>
    /// </example>
    /// </para>
    /// <para>
    /// <example>
    /// Allow multiple repetitions of rendered blocks, using same <code>@Html.Delayed()...</code> as before.  Code:
    /// <code>
    /// @Html.RenderDelayed(removeAfterRendering: false); /* will print */
    /// @Html.RenderDelayed() /* will print again because not removed before */
    /// </code>
    /// </example>
    /// </para>

    /// </summary>
    /// <param name="helper">the helper from which we use the context</param>
    /// <param name="injectionBlockId">optional unique identifier to specify one or many injection blocks</param>
    /// <param name="removeAfterRendering">only render this once</param>
    /// <returns>rendered output content</returns>
    public static MvcHtmlString RenderDelayed(this HtmlHelper helper, string injectionBlockId = null, bool removeAfterRendering = true) {
        var stack = DelayedInjectionBlock.GetQueue(helper, injectionBlockId);

        if( removeAfterRendering ) {
            var sb = new StringBuilder(
#if DEBUG
                string.Format("<!-- delayed-block: {0} -->", injectionBlockId)
#endif
                );
            // .count faster than .any
            while (stack.Count > 0) {
                sb.AppendLine(stack.Dequeue());
            }
            return MvcHtmlString.Create(sb.ToString());
        } 

        return MvcHtmlString.Create(
#if DEBUG
                string.Format("<!-- delayed-block: {0} -->", injectionBlockId) + 
#endif
            string.Join(Environment.NewLine, stack));
    }


}

変だ。私はこの他のスレッドへの回答をコピーしたことを覚えていませんが、私はそこで少し良い記事を書きました...
drzaus

12

Forloop.HtmlHelpers nugetパッケージをインストールします-部分的なビューとエディターテンプレートでスクリプトを管理するためのヘルパーを追加します。

レイアウトのどこかに、あなたは呼び出す必要があります

@Html.RenderScripts()

これは、スクリプトファイルとスクリプトブロックがページに出力される場所になるので、レイアウトのメインスクリプトの後とスクリプトセクション(ある場合)の後に配置することをお勧めします。

バンドルでWeb最適化フレームワークを使用している場合は、オーバーロードを使用できます

@Html.RenderScripts(Scripts.Render)

このメソッドを使用して、スクリプトファイルを書き出します。

これで、ビュー、部分ビュー、またはテンプレートにスクリプトファイルまたはブロックを追加したいときはいつでも、

@using (Html.BeginScriptContext())
{
  Html.AddScriptFile("~/Scripts/jquery.validate.js");
  Html.AddScriptBlock(
    @<script type="text/javascript">
       $(function() { $('#someField').datepicker(); });
     </script>
  );
}

ヘルパーは、複数回追加された場合に1つのスクリプトファイル参照のみがレンダリングされるようにし、スクリプトファイルが期待される順序でレンダリングされるようにします。

  1. レイアウト
  2. パーシャルとテンプレート(ビューに表示される順序で上から下)

5

この投稿は本当に役に立ったので、基本的なアイデアの実装を投稿したいと思いました。@ Html.Resource関数で使用するスクリプトタグを返すことができるヘルパー関数を紹介しました。

また、型付き変数を使用してJSまたはCSSリソースを識別できるように、単純な静的クラスを追加しました。

public static class ResourceType
{
    public const string Css = "css";
    public const string Js = "js";
}

public static class HtmlExtensions
{
    public static IHtmlString Resource(this HtmlHelper htmlHelper, Func<object, dynamic> template, string Type)
    {
        if (htmlHelper.ViewContext.HttpContext.Items[Type] != null) ((List<Func<object, dynamic>>)htmlHelper.ViewContext.HttpContext.Items[Type]).Add(template);
        else htmlHelper.ViewContext.HttpContext.Items[Type] = new List<Func<object, dynamic>>() { template };

        return new HtmlString(String.Empty);
    }

    public static IHtmlString RenderResources(this HtmlHelper htmlHelper, string Type)
    {
        if (htmlHelper.ViewContext.HttpContext.Items[Type] != null)
        {
            List<Func<object, dynamic>> resources = (List<Func<object, dynamic>>)htmlHelper.ViewContext.HttpContext.Items[Type];

            foreach (var resource in resources)
            {
                if (resource != null) htmlHelper.ViewContext.Writer.Write(resource(null));
            }
        }

        return new HtmlString(String.Empty);
    }

    public static Func<object, dynamic> ScriptTag(this HtmlHelper htmlHelper, string url)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var script = new TagBuilder("script");
        script.Attributes["type"] = "text/javascript";
        script.Attributes["src"] = urlHelper.Content("~/" + url);
        return x => new HtmlString(script.ToString(TagRenderMode.Normal));
    }
}

そして使用中

@Html.Resource(Html.ScriptTag("Areas/Admin/js/plugins/wysiwyg/jquery.wysiwyg.js"), ResourceType.Js)

ここ私の質問に回答を提供してくれた@Darin Dimitrovに感謝します


2

HtmlHelper を使用して部分からかみそりセクション生成するで与えられた答えRequireScriptは、同じパターンに従います。また、同じJavascript URLへの重複参照をチェックして抑制するという利点があり、priority順序付けの制御に使用できる明示的なパラメーターがあります。

私は次のメソッドを追加してこのソリューションを拡張しました。

// use this for scripts to be placed just before the </body> tag
public static string RequireFooterScript(this HtmlHelper html, string path, int priority = 1) { ... }
public static HtmlString EmitRequiredFooterScripts(this HtmlHelper html) { ... }

// use this for CSS links
public static string RequireCSS(this HtmlHelper html, string path, int priority = 1) { ... }
public static HtmlString EmitRequiredCSS(this HtmlHelper html) { ... }

私はDarinとeth0のソリューションが好きですが、HelperResultJavaScriptとCSSファイルへのリンクだけでなく、スクリプトとCSSブロックを可能にするテンプレートを使用しているためです。


1

@Darin Dimitrovおよび@ eth0の回答は、バンドル拡張の使用法で使用します。

@Html.Resources(a => new HelperResult(b => b.Write( System.Web.Optimization.Scripts.Render("~/Content/js/formBundle").ToString())), "jsTop")
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.