原文:
ASPを解読する.NET 5&MVC 6シリーズ(14):View Component
以前のMVCでは、Web FormsのWebControlのような機能がMVCにはないため、Partial Viewを使用して実装される小さなコンポーネントのような機能が常に必要でした.しかしMVC 6では、この機能が大幅に改善された.新版MVC 6では、View Componentという機能を提供しています.
すべての応答ではなく、一部のコンテンツをレンダリングするminiのControllerと見なすことができます.すべてのPartial Viewで解決できる問題は、ダイナミックナビゲーションメニュー、Tagラベル、ログインウィンドウ、カート、最近の文章の読み取りなど、View Componentを使用して解決することができます.
View Componentには2つの部分があり、一部はクラス(View Componentに継承)で、もう1つはRazorビュー(通常のViewビューと同じ)です.新しいMVCのControllerのように、View ComponentはPOCOの(つまりView Componentクラスを継承しないが、クラス名はView Componentで終わる)を使用することもできます.

View Componentの作成

現在、View Componentクラスの作成方法は次の3つです.

は、View Component

に直接継承されます.

クラスにView Componentプロパティを追加するか、またはView Componentプロパティを持つクラスに継承する

クラスを作成します.クラス名はView Componentで終わります.

Controllerと同様に、View Componentはpublicでなければなりません.ネストできません.抽象クラスではありません.
たとえば、TopListView Componentというクラス名のView Componentを作成します.コードは次のとおりです.

public class TopListViewComponent : ViewComponent

{

    private readonly ApplicationDbContext db;



    public TopListViewComponent(ApplicationDbContext context)

    {

        db = context;

    }



    public IViewComponentResult Invoke(int categoryId, int topN)

    {

        List<string> col = new List<string>();

        var items = db.TodoItems.Where(x => x.IsDone == false &&

                                            x.categoryId == categoryId).Take(topN);



        return View(items);

    }

}

上記のクラスは、以下のように定義することもできる.

[ViewComponent(Name = "TopList")]

public class TopWidget

{

    //     

}

TopWidgetクラスでTopListという名前のViewComponentプロパティを定義することにより、その効果はTopListViewComponentクラスを定義するのと同様に、システムは検索時に認められ、そのコンストラクタで注入機能に依存してコンストラクタ内のパラメータを提示するクラス型インスタンスである.
Invoke法は任意の数のパラメータを伝達できる約束法であり,システムもInvokeAsync法の非同期機能を実現することをサポートする.

View Componentのビューファイル作成

ProductControllerのビューでView Componentを呼び出す場合、Views\Productフォルダの下にComponentsという名前のフォルダを作成する必要があります(このフォルダ名はComponentsでなければなりません).
その後、Views\Product\Componentsフォルダの下にTopListという名前のフォルダを作成します(このフォルダ名はView Component名と一致する必要があります.つまり、TopListでなければなりません).Views\Product\Components\TopListフォルダの下に、Default.cshtmlビューファイルを作成し、次のタグを追加します.

@model IEnumerable<BookStore.Models.ProductItem>



<h3>Top Products</h3>

<ul>

    @foreach (var todo in Model)

    {

        <li>@todo.Title</li>

    }

</ul>

さらにView Componentでビューの名前が指定されていない場合は、デフォルトでDefault.cshtmlビューになります.
これで、このView Componentは作成され、ViewsProductindexで作成できます.cshtmlビューの任意の場所でViewComponentを呼び出します.たとえば、次のようにします.

  <div class="col-md-4">

    @Component.Invoke("TopList", 1, 10)  

  </div>

上記TopListView Componentで非同期メソッドInvokeAsyncが定義されている場合、@await Component.InvokeAsync()メソッドを使用して呼び出すことができます.この2つのメソッドの最初のパラメータはTopListView Componentの名前であり、残りのパラメータはTopListView Componentクラスで定義されたメソッドパラメータです.
注意:一般的には、ViewComponentのビューファイルは、ViewsSharedフォルダに追加されます.一般的には、ViewComponentはコントローラに固有ではありません.

カスタムビューファイルの使用

一般に、カスタムファイルを使用する場合は、Invokeメソッドが戻り値を返すときにビューの名前を指定する必要があります.例は次のとおりです.

return View("TopN", items);

では、Views\Product\Components\TopN.cshtmlファイルを作成する必要がありますが、使用する場合は変更する必要はありません.元のView Component名を指定する必要があります.たとえば、次のようにします.

@await Component.InvokeAsync("TopList",  1, 10)  //       

まとめ

一般的には、すべてのビューファイルをViews\Sharedフォルダに置くことができるように、共通の機能でView Componentの機能を使用することをお勧めします.

同期と推奨

この文書はディレクトリインデックスに同期されました:ASPを解読する.NET 5&MVC 6シリーズ