コンポーネント.0.0 -頭と体内容注射


CshtmlComponent はASP . NET Frameworkのコンポーネントフレームワークです.NETコアかみそりページとMVCプロジェクト.機能セットは広範であり、代替案を大幅に改善されます.炎のためでない.

V 3.0.0
V 3の主な特徴.0.0は、あなたが現在両方とも直接コンテンツを注入することができるということですhead and body コンポーネントごとに1回の要素.これは特に、コンポーネントがCSSまたはJSファイルによって提供される余分な機能を必要とする場合に便利です.
開発者はどちらかのタグにコンテンツを追加または追加するかどうかを選択できます.

前の方法
CSSファイルやJSファイルを参照することも以前は可能でしたCshtmlInitial , これは、1ページに1回コンテンツをレンダリングします.これに依存するコンポーネントの定義は次のようになります.
@* Reference the associated component as model. *@
@using SampleRazorPagesApplication
@model ExampleComponent

<CshtmlInitial>
    <link rel="stylesheet" href="/style.css" />
</CshtmlInitial>

<!-- The content of the component. -->
<div class="example-component">
    <h1>
        ExampleComponent: @Model.Title
    </h1>

    <div class="example-component-child-content">
        <!-- Render the child content. -->
        @Html.Raw(Model.ChildContent)
    </div>
</div>
しかし、一方CshtmlInitial ジョブを実行します(タグの内容は1ページに1度だけレンダリングされます)、このアプローチの問題はCshtmlInitial コンポーネントが最初にインスタンス化された状態でコンテンツをレンダリングします.

新しい方法
v 3で.0.0我々は代わりに利用することができますCshtmlHead or CshtmlBody , 両方とも、それぞれの内容を1ページに1度(他の設定がない限り)1ページずつ表示します.コンポーネントの定義は次のようになります.
@* Reference the associated component as model. *@
@using SampleRazorPagesApplication
@model ExampleComponent

<CshtmlHead>
    <link rel="stylesheet" href="/style.css" />
</CshtmlHead>

<!-- The content of the component. -->
<div class="example-component">
    <h1>
        ExampleComponent: @Model.Title
    </h1>

    <div class="example-component-child-content">
        <!-- Render the child content. -->
        @Html.Raw(Model.ChildContent)
    </div>
</div>
今のコンテンツCshtmlHead に注入されますhead 要素とDOMはクリーンである.

新しい方法のさらなる利点
新しい方法はまた、追加の利点をもたらします.たとえば、注文を構成し、適切ならばコンテンツを複数回レンダリングできます.設定は比較的複雑です.official documentation .

CSHMTlinitialの将来CshtmlInitial は廃止されない.それはこのアップデートでも改善されました!以前は、余分Context 属性を指定しなければなりません.この属性は、動作に影響を与えずに削除されましたし、クリーナーコードに帰着しました.

閉鎖声明
The documentation of CshtmlComponent また、これらの新しい変更を説明するために改訂されました.うまくいけば、ドキュメンテーションは以前よりよく古いと新機能をカバーします.
プロフィールGitHub repository of CshtmlComponent here .
CsHtmlComponentでハッピーハッキング!