部分からかみそりのセクションを作成する


102

これを実行しようとする私の主な動機は、ページの下部にあるパーシャルでのみ必要なJavascriptを残りのJavaScriptとともに取得し、パーシャルがレンダリングされるページの中央では取得しないことです。

これが私がやろうとしていることの簡単な例です:

本文の直前にスクリプトセクションがあるレイアウトです。

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />    
</head>

<body>
    @RenderBody()
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    @RenderSection("Scripts", false)
</body>
</html>

このレイアウトを使用したビューの例を次に示します。

<h2>This is the view</h2>

@{Html.RenderPartial("_Partial");}

@section Scripts {
<script type="text/javascript">
        alert("I'm a view.");
</script>
}

そして、これがビューからレンダリングされている部分です。

<p>This is the partial.</p>

@* this never makes it into the rendered page *@
@section Scripts {
<script type="text/javascript">
    alert("I'm a partial."); 
</script>
}

この例では、ビューで指定されたマークアップはセクションに配置されていますが、パーシャルからのマークアップは配置されていません。Razorを使用して、部分的なビューからセクションを作成することはできますか?そうでない場合、JavaScriptをグローバルに含めずに、ページの下部にあるパーシャルでのみ必要なJavaScriptを取得する他の方法は何ですか?


おそらく、パーシャルに別のスクリプトセクションがあるため、問題があります
。IDK

そうではありません。セクションがビューの外にある場合でも、パーシャルのコードはそれを最終的なレンダリングページにしません。パーシャルは親ビューのセクションに参加できないので、SLaksは正しいと思います。
Craig M

回答:


78

これに対処する方法は、HtmlHelperクラスにいくつかの拡張メソッドを記述することです。これにより、パーシャルビューでスクリプトが必要であると言うことができ、レイアウトビューで、ヘルパーメソッドを呼び出して必要なスクリプトを発行するタグを書き込みます

ヘルパーメソッドは次のとおりです。

public static string RequireScript(this HtmlHelper html, string path, int priority = 1)
{
    var requiredScripts = HttpContext.Current.Items["RequiredScripts"] as List<ResourceInclude>;
    if (requiredScripts == null) HttpContext.Current.Items["RequiredScripts"] = requiredScripts = new List<ResourceInclude>();
    if (!requiredScripts.Any(i => i.Path == path)) requiredScripts.Add(new ResourceInclude() { Path = path, Priority = priority });
    return null;
}

public static HtmlString EmitRequiredScripts(this HtmlHelper html)
{
    var requiredScripts = HttpContext.Current.Items["RequiredScripts"] as List<ResourceInclude>;
    if (requiredScripts == null) return null;
    StringBuilder sb = new StringBuilder();
    foreach (var item in requiredScripts.OrderByDescending(i => i.Priority))
    {
        sb.AppendFormat("<script src=\"{0}\" type=\"text/javascript\"></script>\n", item.Path);
    }
    return new HtmlString(sb.ToString());
}
public class ResourceInclude
{
    public string Path { get; set; }
    public int Priority { get; set; }
}

これを配置したら、部分ビューはを呼び出すだけ@Html.RequireScript("/Path/To/Script")です。

そして、レイアウトビューのヘッドセクションでを呼び出します@Html.EmitRequiredScripts()

これの追加のボーナスはそれがあなたが重複したスクリプト要求を取り除くことができることです。特定のスクリプトを必要とする複数のビュー/部分ビューがある場合、出力は1回だけであると安全に想定できます。


エレガントでクリーンなソリューション。+1
ベヴァクア

私の髪のほとんどを引き出した後、この解決策に出くわしました-優れた解決策....
higgsy

このソリューションを機能させることができません。部分的なビューがRequireScript()を呼び出す前に、EmitRequiredScripts()が呼び出されるようです。私は何か間違ったことをしていますか?
ブライアンロス

何かが正しく聞こえません、ブライアン。私はこのソリューションを過去1年ほどにわたって広範囲に使用してきましたが、うまく機能しています。多分あなたの問題の詳細と新しい質問を投稿し、ここにURLをリンクしてください
ベル

1
アプリの新しいバージョンをデプロイするときに、キャッシュ無効化のサポートはありますか?すぐに使える@ scripts.Render()メソッドは、ビルド時に生成されるURLパラメータを最後に貼り付け、新しいバージョンがデプロイされたときにブラウザが最新バージョンをフェッチするように強制します。
Simon Green

28

部分ビューは、親ビューのセクションに参加できません。


1
これは私が疑ったものです。ありがとう。
Craig M

@JohnBubriski Razor 2にあります。バージョン。
Shimmy Weitzhandler、

@SLaks、なぜこれは仕様によるのですか?私のシナリオでは、バナーローテーターであるパー​​シャルを使用していますが、スクリプト/スタイルをオンにしたときにのみロードしたいのですが、インラインでロードするのはなぜ悪いのですか?
Shimmy Weitzhandler

2
@Shimmy:Cassetteなどのリソース管理システムを使用する必要があります。
SLaks、

ありがとうございました。調べてみます。
Shimmy Weitzhandler

13

必要なjavascriptの挿入のみを担当する2番目のパーシャルを持つことができます。@if必要に応じて、ブロックの周りにいくつかのスクリプトを配置します。

@model string
@if(Model == "bla") {
    <script type="text/javascript">...</script>
}

@else if(Model == "bli") {
    <script type="text/javascript">...</script>
}

これは明らかに少しクリーンアップできますが、次にScriptsビューのセクションで:

@section Scripts
{
    @Html.Partial("_Scripts", "ScriptName_For_Partial1")
}

繰り返しますが、それは美容賞を受賞しないかもしれませんが、それはうまくいきます。


1
これは私がやったこととかなり近いです。それは間違いなくきれいではありませんが、動作します。これの唯一の欠点は、ajax呼び出しでパーシャルを取得できず、JSを含めることができないことです。長期的には、サーバー側でhtmlを構築する代わりに、jQueryテンプレートを使用してリファクタリングし、コントローラーからJSONを送信するだけだと思います。
Craig M

@CraigMも私が向かっているところです。MVCは合法ですが、クライアント側でテンプレートを使用して(Backbone.jsを調べています)、APIからプッシュ/プルするほうが(私には)非常に理にかなっています。
one.beat.consumer

@ one.beat.customer-バックボーンも使用して以来、アンダースコアのテンプレートを使用してきましたが、Twitterからホーガンライブラリに切り替えるか、Nodejitsuからプレートに切り替えることを考えています。どちらもかなり優れた機能を備えています。
Craig M

10

これを行うためのよりエレガントな方法は、部分ビュースクリプトを別のファイルに移動して、それをビューの[スクリプト]セクションでレンダリングすることです。

<h2>This is the view</h2>

@Html.RenderPartial("_Partial")

@section Scripts
{
    @Html.RenderPartial("_PartialScripts")

    <script type="text/javascript">
        alert("I'm a view script.");
    </script>
}

部分ビュー_ Partial.cshtml

<p>This is the partial.</p>

スクリプトのみを含む部分ビュー_ PartialScripts.cshtml

<script type="text/javascript">
    alert("I'm a partial script!");
</script>

これは、他の回答で提案されている一部の拡張メソッドやプラグインほど自動ではありませんが、単純さと明快さという利点があります。それが好きです。
Mark Meuer、2014

7

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

[更新バージョン] @Necrocubusの質問に続くバージョンを更新し、インラインスクリプトを含めました。

public static class ScriptsExtensions
{
    const string REQ_SCRIPT = "RequiredScript";
    const string REQ_INLINESCRIPT = "RequiredInlineScript";
    const string REQ_STYLE = "RequiredStyle";

    #region Scripts
    /// <summary>
    /// Adds a script 
    /// </summary>
    /// <param name="html"></param>
    /// <param name="path"></param>
    /// <param name="priority">Ordered by decreasing priority </param>
    /// <param name="bottom"></param>
    /// <param name="options"></param>
    /// <returns></returns>
    public static string RequireScript(this IHtmlHelper html, string path, int priority = 1, bool bottom=false, params string[] options)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_SCRIPT] as List<ResourceToInclude>;
        if (requiredScripts == null) ctxt.Items[REQ_SCRIPT] = requiredScripts = new List<ResourceToInclude>();
        if (!requiredScripts.Any(i => i.Path == path)) requiredScripts.Add(new ResourceToInclude() { Path = path, Priority = priority, Options = options, Type=ResourceType.Script, Bottom=bottom});
        return null;
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="html"></param>
    /// <param name="script"></param>
    /// <param name="priority">Ordered by decreasing priority </param>
    /// <param name="bottom"></param>
    /// <returns></returns>
    public static string RequireInlineScript(this IHtmlHelper html, string script, int priority = 1, bool bottom = false)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_INLINESCRIPT] as List<InlineResource>;
        if (requiredScripts == null) ctxt.Items[REQ_INLINESCRIPT] = requiredScripts = new List<InlineResource>();
        requiredScripts.Add(new InlineResource() { Content=script, Priority = priority, Bottom=bottom, Type=ResourceType.Script});
        return null;
    }

    /// <summary>
    /// Just call @Html.EmitRequiredScripts(false)
    /// at the end of your head tag and 
    /// @Html.EmitRequiredScripts(true) at the end of the body if some scripts are set to be at the bottom.
    /// </summary>
    public static HtmlString EmitRequiredScripts(this IHtmlHelper html, bool bottom)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_SCRIPT] as List<ResourceToInclude>;
        var requiredInlineScripts = ctxt.Items[REQ_INLINESCRIPT] as List<InlineResource>;
        var scripts = new List<Resource>();
        scripts.AddRange(requiredScripts ?? new List<ResourceToInclude>());
        scripts.AddRange(requiredInlineScripts ?? new List<InlineResource>());
        if (scripts.Count==0) return null;
        StringBuilder sb = new StringBuilder();
        foreach (var item in scripts.Where(s=>s.Bottom==bottom).OrderByDescending(i => i.Priority))
        {
            sb.Append(item.ToString());
        }
        return new HtmlString(sb.ToString());
    }
    #endregion Scripts

    #region Styles
    /// <summary>
    /// 
    /// </summary>
    /// <param name="html"></param>
    /// <param name="path"></param>
    /// <param name="priority">Ordered by decreasing priority </param>
    /// <param name="options"></param>
    /// <returns></returns>
    public static string RequireStyle(this IHtmlHelper html, string path, int priority = 1, params string[] options)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_STYLE] as List<ResourceToInclude>;
        if (requiredScripts == null) ctxt.Items[REQ_STYLE] = requiredScripts = new List<ResourceToInclude>();
        if (!requiredScripts.Any(i => i.Path == path)) requiredScripts.Add(new ResourceToInclude() { Path = path, Priority = priority, Options = options });
        return null;
    }

    /// <summary>
    /// Just call @Html.EmitRequiredStyles()
    /// at the end of your head tag
    /// </summary>
    public static HtmlString EmitRequiredStyles(this IHtmlHelper html)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_STYLE] as List<ResourceToInclude>;
        if (requiredScripts == null) return null;
        StringBuilder sb = new StringBuilder();
        foreach (var item in requiredScripts.OrderByDescending(i => i.Priority))
        {
            sb.Append(item.ToString());
        }
        return new HtmlString(sb.ToString());
    }
    #endregion Styles

    #region Models
    public class InlineResource : Resource
    {
        public string Content { get; set; }
        public override string ToString()
        {
            return "<script>"+Content+"</script>";
        }
    }

    public class ResourceToInclude : Resource
    {
        public string Path { get; set; }
        public string[] Options { get; set; }
        public override string ToString()
        {
            switch(Type)
            {
                case ResourceType.CSS:
                    if (Options == null || Options.Length == 0)
                        return String.Format("<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" />\n", Path);
                    else
                        return String.Format("<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" {1} />\n", Path, String.Join(" ", Options));
                default:
                case ResourceType.Script:
                    if (Options == null || Options.Length == 0)
                        return String.Format("<script src=\"{0}\" type=\"text/javascript\"></script>\n", Path);
                    else
                        return String.Format("<script src=\"{0}\" type=\"text/javascript\" {1}></script>\n", Path, String.Join(" ", Options));
            }
        }
    }
    public class Resource
    {
        public ResourceType Type { get; set; }
        public int Priority { get; set; }
        public bool Bottom { get; set; }
    }
    public enum ResourceType
    {
        Script,
        CSS
    }
    #endregion Models
}

私の2セント、それは古い投稿ですが、まだ関連性があるので、ASP.Net Coreで動作するBell氏のソリューションのアップグレードされた更新があります。

インポートされた部分ビューとサブビューからメインレイアウトにスクリプトとスタイルを追加し、オプションをスクリプト/スタイルインポートに追加できます(非同期遅延など)。

public static class ScriptsExtensions
{
    const string REQ_SCRIPT = "RequiredScript";
    const string REQ_STYLE = "RequiredStyle";

    public static string RequireScript(this IHtmlHelper html, string path, int priority = 1, params string[] options)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_SCRIPT] as List<ResourceInclude>;
        if (requiredScripts == null) ctxt.Items[REQ_SCRIPT] = requiredScripts = new List<ResourceInclude>();
        if (!requiredScripts.Any(i => i.Path == path)) requiredScripts.Add(new ResourceInclude() { Path = path, Priority = priority, Options = options });
        return null;
    }


    public static HtmlString EmitRequiredScripts(this IHtmlHelper html)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_SCRIPT] as List<ResourceInclude>;
        if (requiredScripts == null) return null;
        StringBuilder sb = new StringBuilder();
        foreach (var item in requiredScripts.OrderByDescending(i => i.Priority))
        {
            if (item.Options == null || item.Options.Length == 0)
                sb.AppendFormat("<script src=\"{0}\" type=\"text/javascript\"></script>\n", item.Path);
            else
                sb.AppendFormat("<script src=\"{0}\" type=\"text/javascript\" {1}></script>\n", item.Path, String.Join(" ", item.Options));

        }
        return new HtmlString(sb.ToString());
    }


    public static string RequireStyle(this IHtmlHelper html, string path, int priority = 1, params string[] options)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_STYLE] as List<ResourceInclude>;
        if (requiredScripts == null) ctxt.Items[REQ_STYLE] = requiredScripts = new List<ResourceInclude>();
        if (!requiredScripts.Any(i => i.Path == path)) requiredScripts.Add(new ResourceInclude() { Path = path, Priority = priority, Options = options });
        return null;
    }


    public static HtmlString EmitRequiredStyles(this IHtmlHelper html)
    {
        var ctxt = html.ViewContext.HttpContext;

        var requiredScripts = ctxt.Items[REQ_STYLE] as List<ResourceInclude>;
        if (requiredScripts == null) return null;
        StringBuilder sb = new StringBuilder();
        foreach (var item in requiredScripts.OrderByDescending(i => i.Priority))
        {
            if (item.Options == null || item.Options.Length == 0)
                sb.AppendFormat("<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" />\n", item.Path);
            else
                sb.AppendFormat("<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" {1} />\n", item.Path, String.Join(" ", item.Options));
        }
        return new HtmlString(sb.ToString());
    }


    public class ResourceInclude
    {
        public string Path { get; set; }
        public int Priority { get; set; }
        public string[] Options { get; set; }
    }
}

男ありがとう!これは、6歳の回答よりも関連性が高いため、もっと賛成すべきです。
Necroqubus

また、これらの拡張機能を変更して、スクリプトのセクションを入力できるようにすることはできますか?@ <text> </ text>またはセクションのようなものですか?そうでなければ私はまだサーバー側モデル変数と他のスクリプトを初期化するために、小さなJSスクリプトを必要とする:/
Necroqubus

@Necroqubusで更新バージョンを確認できますが、まだテストしていません:)
Jean

よし、試してみよう。ASP.NET Core 1.0 MVCで動作することを願っています。コンテキストについては、ネストされたパーシャルの複数のレベルがあり、それらのスクリプトをフッターでレンダリングする必要があります。
Necroqubus

を必要とせず<text>、文字列として追加するだけです(複数行の場合は、@ ""をプレフィックスとして付けることもできます)。<script>タグは必要ありません
Jean

1

新しいLayoutページを作成し、コンテンツとライブラリセクションのレンダリングを担当するフルビュー内にPartialViewをラップできます。

たとえば、次のコードがあるとします。

HomeController.cs

[HttpGet]
public ActionResult About()
{
    var vm = new AboutViewModel();
    return View("About", vm);
}

フルページビューがレンダリングされるとき、通常は2つのファイルをマージしてレンダリングされます。

About.cshtml

@model AboutViewModel

@{
    ViewBag.Title = "About CSHN";
}

<h3>@ViewBag.Title</h3>

@section Styles {
    <style> /* style info here */ </style>
}

@section Scripts {
    <script> /* script info here */ </script>
}

_Layout.cshtml (または_ViewStartで指定されているもの、またはページでオーバーライドされているもの)

<!DOCTYPE html>

<html>
<head>
    @RenderSection("Styles", false)
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", false)
</body>
</html>

ここで、おそらくAJAX呼び出しに応じてモーダルウィンドウとしてパーシャルビューAbout.cshtmlとしてレンダリングしたいとします。ここでの目標は、マスターページのレイアウトに膨らみをすべて含めずに(完全なドキュメントのように)、約ページ、スクリプトなどで指定されたコンテンツのみを返すことです。_Layout.cshtml<html>

あなたはこのようにそれを試すかもしれませんが、それはセクションブロックのどれも付属しません:

return PartialView("About", vm);

代わりに、次のような単純なレイアウトページを追加します。

_PartialLayout.cshtml

<div>
    @RenderBody()
    @RenderSection("Styles", false)
    @RenderSection("scripts", false)
</div>

または、次のようなモーダルウィンドウをサポートするには:

_ModalLayout.cshtml

<div class="modal modal-page fade" tabindex="-1" role="dialog" >
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">@ViewBag.Title</h4>
            </div>

            <div class="modal-body">

                @RenderBody()
                @RenderSection("Styles", false)
                @RenderSection("scripts", false)

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-inverse" data-dismiss="modal">Dismiss</button>
            </div>
        </div>
    </div>
</div>

次に、このコントローラーまたはビューのコンテンツとスクリプトを同時にレンダリングする他のハンドラーでカスタムマスタービューを指定できます。

[HttpGet]
public ActionResult About()
{
    var vm = new AboutViewModel();
    return !Request.IsAjaxRequest()
              ? View("About", vm)
              : View("About", "~/Views/Shared/_ModalLayout.cshtml", vm);
}

1

aspnetコア2.0バージョンをお探しの方:

    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Microsoft.AspNetCore.Html;
    using Microsoft.AspNetCore.Http;

    public static class HttpContextAccessorExtensions
    {
        public static string RequireScript(this IHttpContextAccessor htmlContextAccessor, string path, int priority = 1)
        {
            var requiredScripts = htmlContextAccessor.HttpContext.Items["RequiredScripts"] as List<ResourceInclude>;
            if (requiredScripts == null) htmlContextAccessor.HttpContext.Items["RequiredScripts"] = requiredScripts = new List<ResourceInclude>();
            if (requiredScripts.All(i => i.Path != path)) requiredScripts.Add(new ResourceInclude() { Path = path, Priority = priority });
            return null;
        }

        public static HtmlString EmitRequiredScripts(this IHttpContextAccessor htmlContextAccessor)
        {
            var requiredScripts = htmlContextAccessor.HttpContext.Items["RequiredScripts"] as List<ResourceInclude>;
            if (requiredScripts == null) return null;
            StringBuilder sb = new StringBuilder();
            foreach (var item in requiredScripts.OrderByDescending(i => i.Priority))
            {
                sb.AppendFormat("<script src=\"{0}\" type=\"text/javascript\"></script>\n", item.Path);
            }
            return new HtmlString(sb.ToString());
        }
        public class ResourceInclude
        {
            public string Path { get; set; }
            public int Priority { get; set; }
        }
    }

スクリプトがセクションを呼び出した後にレイアウトに追加します。

@HttpContextAccessor.EmitRequiredScripts()

そしてあなたの部分的なビューでは:

@inject IHttpContextAccessor HttpContextAccessor

...

@HttpContextAccessor.RequireScript("/scripts/moment.min.js")

0

上記のBell氏とShimmy氏の回答に基づいて、Bundleスクリプトに追加の関数を追加します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Web.Mvc;
namespace ABC.Utility
{
public static  class PartialViewHelper
{
    public static string RequireScript(this HtmlHelper html, string path, int priority = 1)
    {
        var requiredScripts = HttpContext.Current.Items["RequiredScripts"] as List<ResourceInclude>;
        if (requiredScripts == null) HttpContext.Current.Items["RequiredScripts"] = requiredScripts = new List<ResourceInclude>();
        if (!requiredScripts.Any(i => i.Path == path)) requiredScripts.Add(new ResourceInclude() { Path = path, Priority = priority });
        return null;
    }

    public static string RequireBundleStyles(this HtmlHelper html, string bundleName)
    {
        var a = System.Web.Optimization.Styles.Render(bundleName);
        var requiredStyles = HttpContext.Current.Items["RequiredStyles"] as IHtmlString;
        if (requiredStyles == null) HttpContext.Current.Items["RequiredStyles"] = requiredStyles = a;
        return null;
    }

    public static string RequireBundleScripts(this HtmlHelper html, string bundleName)
    {
        var a=System.Web.Optimization.Scripts.Render(bundleName);
        var requiredScripts = HttpContext.Current.Items["RequiredScripts"] as IHtmlString;
        if (requiredScripts == null) HttpContext.Current.Items["RequiredScripts"] = requiredScripts = a;
        return null;
    }

    public static HtmlString EmitRequiredBundleStyles(this HtmlHelper html)
    {
        var requiredStyles = HttpContext.Current.Items["RequiredStyles"] as IHtmlString;
        if (requiredStyles == null) return null;
        return MvcHtmlString.Create(requiredStyles.ToHtmlString()) ;
    }

    public static HtmlString EmitRequiredBundleScripts(this HtmlHelper html)
    {
        var requiredScripts = HttpContext.Current.Items["RequiredScripts"] as IHtmlString;
        if (requiredScripts == null) return null;
        return MvcHtmlString.Create(requiredScripts.ToHtmlString());
    }

    public static HtmlString EmitRequiredScripts(this HtmlHelper html)
    {
        var requiredScripts = HttpContext.Current.Items["RequiredScripts"] as List<ResourceInclude>;
        if (requiredScripts == null) return null;
        StringBuilder sb = new StringBuilder();
        foreach (var item in requiredScripts.OrderByDescending(i => i.Priority))
        {
            sb.AppendFormat("<script src=\"{0}\" type=\"text/javascript\"></script>\n", item.Path);
        }
        return new HtmlString(sb.ToString());
    }
    public class ResourceInclude
    {
        public string Path { get; set; }
        public int Priority { get; set; }
    }
}//end class
}// end namespace  

PartialViewのサンプル:-@ Html.RequireBundleStyles( "〜/ bundles / fileupload / bootstrap / BasicPlusUI / css"); @ Html.RequireBundleScripts( "〜/ bundles / fileupload / bootstrap / BasicPlusUI / js");

MasterPageのサンプル:-@ Html.EmitRequiredBundleStyles()


0

@using(Html.Delayed()){ ...your content... }回答https://stackoverflow.com/a/18790222/1037948の拡張機能を使用して、ページ内の任意のコンテンツ(スクリプトまたはHTMLのみ)をレンダリングします。内部Queueは正しい順序を保証する必要があります。


0

この機能は、ClientDependency.Core.Mvc.dllにも実装されています。HTMLヘルパーを提供します:@ Html.RequiresJsおよび@ Html.RenderJsHere()。Nugetパッケージ:ClientDependency-Mvc


0

よくある質問「asp.net mvcの部分ビューからメインビューまたはメインレイアウトビューにセクションを挿入する方法」に対する私の解決策がここにあります。キーワード「セクション+部分」でstackoverflowを検索すると、関連する質問のかなり大きなリストが表示され、回答が得られますが、かみそりエンジンの文法では、どれもエレガントではありません。したがって、私はRazorエンジンを見て、この質問に対するいくつかのより良い解決策があるかどうかを確認します。

幸いにも、Razorエンジンがビューテンプレートファイル(* .cshtml、*。vbhtml)のコンパイルをどのように実行するかについて、私にとって興味深いことがわかりました。(私は後で説明します)、以下は私のソリューションのコードですが、使用方法は非常にシンプルでエレガントです。

namespace System.Web.Mvc.Html
{
    public static class HtmlHelperExtensions
    {
        /// <summary>
        /// 确保所有视图,包括分部视图(PartialView)中的节(Section)定义被按照先后顺序追加到最终文档输出流中
        /// </summary>
        public static MvcHtmlString EnsureSection(this HtmlHelper helper)
        {
            var wp = (WebViewPage)helper.ViewDataContainer;
            Dictionary<string, WebPages.SectionWriter> sw = (Dictionary<string, WebPages.SectionWriter>)typeof(WebPages.WebPageBase).GetProperty("SectionWriters", Reflection.BindingFlags.NonPublic | Reflection.BindingFlags.Instance).GetValue(wp);
            if (!helper.ViewContext.HttpContext.Items.Contains("SectionWriter"))
            {
                Dictionary<string, Stack<WebPages.SectionWriter>> qss = new Dictionary<string, Stack<WebPages.SectionWriter>>();
                helper.ViewContext.HttpContext.Items["SectionWriter"] = qss;
            }
            var eqs = (Dictionary<string, Stack<WebPages.SectionWriter>>)helper.ViewContext.HttpContext.Items["SectionWriter"];
            foreach (var kp in sw)
            {
                if (!eqs.ContainsKey(kp.Key)) eqs[kp.Key] = new Stack<WebPages.SectionWriter>();
                eqs[kp.Key].Push(kp.Value);
            }
            return MvcHtmlString.Create("");
        }

        /// <summary>
        /// 在文档流中渲染指定的节(Section)
        /// </summary>
        public static MvcHtmlString RenderSectionEx(this HtmlHelper helper, string section, bool required = false)
        {
            if (helper.ViewContext.HttpContext.Items.Contains("SectionWriter"))
            {
                Dictionary<string, Stack<WebPages.SectionWriter>> qss = (Dictionary<string, Stack<WebPages.SectionWriter>>)helper.ViewContext.HttpContext.Items["SectionWriter"];
                if (qss.ContainsKey(section))
                {
                    var wp = (WebViewPage)helper.ViewDataContainer;
                    var qs = qss[section];
                    while (qs.Count > 0)
                    {
                        var sw = qs.Pop();
                        var os = ((WebViewPage)sw.Target).OutputStack;
                        if (os.Count == 0) os.Push(wp.Output);
                        sw.Invoke();
                    }
                }
                else if (!qss.ContainsKey(section) && required)
                {
                    throw new Exception(string.Format("'{0}' section is not defined.", section));
                }
            }
            return MvcHtmlString.Create("");
        }
    }
}

使用法:コードを使用することも非常に簡単で、通常とほとんど同じスタイルに見えます。また、ネストされた部分ビューのすべてのレベルをサポートします。すなわち。ビューテンプレートチェーンがあります:_ViewStart.cshtml-> layout.cshtml-> index.cshtml-> [head.cshtml、foot.cshtml]-> ad.cshtml。

layout.cshtmlには、次のものが含まれます。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>@ViewBag.Title - @ViewBag.WebSetting.Site.WebName</title>
    <base href="@ViewBag.Template/" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta name="author" content="Taro Technology Co.,LTD" />
    <meta name="robots" content="index,follow" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="alternate icon" type="@ViewBag.WebSetting.Site.WebFavIcon" href="@ViewBag.WebSetting.Site.WebFavIcon">
    @Html.RenderSectionEx("Head")
</head>
<body>
    @RenderBody()
    @Html.RenderSectionEx("Foot")
</body>
</html>

そして、index.cshtmlには、

@{
    ViewBag.Title = "首页";
}

@Html.Partial("head")
<div class="am-container-1">
    .......
</div>
@Html.Partial("foot")

そして、head.cshtmlには、コードがあります:

@section Head{
    <link rel="stylesheet" href="assets/css/amazeui.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
}

<header class="header">
   ......
</header>
@Html.EnsureSection()

これは、foot.cshtmlやad.cshtmlでも同じですが、HeadセクションまたはFootセクションを定義できます。部分ビューファイルの最後で@ Html.EnsureSection()を1回呼び出すようにしてください。これで、asp mvcの問題を取り除くことができます。

他の人が利用できるように、コードスニペットを共有するだけです。あなたがそれが便利だと感じたら、私の投稿を評価することを躊躇しないでください。:)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.