ビューコンポーネントの作成.ネットコア3.1

ASP .NETコアは、クロスプラットフォーム、高性能、オープンソースのフレームワークの近代的なWeb、クラウド、インターネットベースのアプリケーションを構築するためです.また、Windows API、MacOSやLinux上でお気に入りの開発ツールを使用してWeb API、モバイルアプリケーション、クライアントサイトのシングルページアプリケーションを開発することができます.マイクロソフトはASPで多くの新機能を導入した.この記事では、ASP . NETの新しく紹介された機能の1つについてお教えします.ビューコンポーネントと呼ばれるネットコア.ビューコンポーネントと部分ビューの違いを説明します.また、Webアプリケーションの異なる部分で異なる応答を生成するためにカスタマイズされたパラメータ化されたビューコンポーネントを実装する方法を説明します.我々は、ビューのコンポーネントにパラメータとして渡す都市の現在の気象情報を表示する天気ウィジェットビューのコンポーネントを作成する予定です.

ビューコンポーネントとは

ビューコンポーネントは、一貫してかみそりビューから再利用可能なHTMLを生成することができます強力な、自己完結型、再利用可能なUIコンポーネントです.パラメータを使用してさらにカスタマイズできる静的および動的コンテンツを生成できます.ビューコンポーネントを使用して、バックエンドのデータベースまたはサービスを接続してデータを取得できます.ここで、ビューコンポーネントを実装するときに覚えておくべき重要なポイントがあります

ビューコンポーネントは、レスポンス全体ではなくチャンクをレンダリングするのに適しています.これは、UI要素、ウィジェット、ダイナミックなメニュー、ショッピングカート、ログインページ、サイドバーなどを貸すのに理想的になります

ビューコンポーネントは、ビューデータまたはデータバインディングのような機能をサポートしておらず、パラメータ

としてランタイムで提供されるデータに依存するだけです

ビューのコンポーネントは、彼らが常に使用されているにもかかわらず、彼らは常に一貫した出力を生成する意味での懸念とテストの利点の分離をサポートしています.

ビューのコンポーネントは、出力をカスタマイズするためにパラテリゼーションを行うことができ、また、独自のビジネスロジックを持つことができます.

ビューコンポーネントと部分ビュー

以前のバージョンのASPで部分的なビューが行われていたことをすべて行うように設計されています.ネットなど.部分ビューを使用する場合は、コントローラに依存関係があります.ビューコンポーネント内でビューのデータとコントローラの内容にアクセスすることができます.ビューコンポーネントでは、コントローラを必要としません.ビューコンポーネントには、いくつかのビジネスロジックを実行したり、Razorビューを使用して応答を生成する独自のクラスがあります.完全なMVCコントローラよりもオーバーヘッドが少ないミニコントローラとしてビューコンポーネントを考えることができます.

ビューコンポーネントの作成

ビューコンポーネントは次の2つの部分から成ります

は典型的にマイクロソフトから派生したクラスです.アスピネット.MVCViewComponentオブジェクト

ビューコンポーネント

によって生成された応答をレンダリングするビュー
独自のViewコンポーネントクラスを作成する方法がたくさんあります.上記のように、ViewComponentからクラスを派生できます

public class Navbar : ViewComponent 
{

}

ViewComponent属性でクラスを飾ることができます

[ViewComponent]
public class Navbar
{

}

また、命名規則に従って、単に接尾辞ViewComponentでクラスをつくることもできます

public class NavbarViewComponent 
{

}

簡単なASPを通してあなたを歩かせてください.NETコア3.1デモアプリケーションを作成し、独自のビューコンポーネントを使用する方法を学ぶことができます.このチュートリアルでは、マイクロソフトVisual Studio 2019を使用しますが、ASPを作成することもできます.NETコア3.1 Webアプリケーションでは、コマンド行ツールを使用してdotnetなどの場合.
まず、新しいASPを作成しましょう.Visual Studio 2019のNETコアWebアプリケーションプロジェクト.このチュートリアルでは、ViewComponentsDemoAppをプロジェクト名として選択しました.プロジェクトがVisual Studioで開くと、F 5キーを押してプロジェクトがエラーなしで構築され、実行されていることを確認します.すべてがうまくいけば、ブラウザで次の出力を見ることができます.

カスタムビューコンポーネントまたは関連付けられたビューファイルを作成する前に、ランタイムが次のパスのビューを検索することに注意してください.

/view/{コントローラ名}/コンポーネント/{ view component name }/{ view name }

/ビュー/共有/コンポーネント/表示コンポーネント名

/ページ/共有/コンポーネント/{ view component name }/{ view name }

もちろん、ASPの他のすべてのように.NETコアは、ビューの検索パスをカスタマイズすることができますし、ランタイムを表示するビューをどこか他のビューを簡単にするためのデフォルトのビューのパスを使用することを決めた.
共有フォルダ内のコンポーネントフォルダーを作成し、フォルダの内側にあるフォルダを作成します.このフォルダには、カスタムビューコンポーネントのクラスとビューファイルが含まれます.

WeatherWidgetフォルダーの内部で、WeatherWidgetViewComponentという名前のクラスと既定のビューを作成します.京大理デフォルトの名前でビューを作成した理由です.CSHTMLはASP . NETのためです.「ビュー」コンポーネントの「既定」「コア」「デフォルト」ビューの名前が表示されます.ビューを別の名前にすることができますが、新しい名前を指定する必要があります.私はあなたのビューのデフォルトの名前をお勧めします.CSTMLは、ランタイムがビュー/共有/コンポーネント/表示コンポーネント名}/{ View Name }パスを自動的に見つけることができます.
物事を簡単に開始するには、以下の単純なビューコンポーネントを実装しています.

public class WeatherWidgetViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(string cityName)
    {
        return View("Default", cityName);
    }
}

ビューコンポーネントの実装方法を念頭に置いてください

あなたは、上の例に示すように、IViewComponentResultを返す同期Invokeメソッドでロジックを定義するか、またはタスクを返すInvokeAsyncメソッドでロジックを定義できます.このチュートリアルでは、このメソッドの動作例を後で示します.

ほとんどの場合、InvokeまたはInvokeAsyncメソッドでモデルを初期化し、ViewComponent Viewメソッドを呼び出してモデルをビューに渡します.

InvokeまたはInvokeAsyncメソッドの中の

内部モデル結合はなく、HTTP要求を処理しません.HTTPコンテキストで使用可能な任意のデータの代わりに、メソッドに渡されたパラメーターを使用する必要があります.

デフォルトの内部.私はちょうど2行を追加しました.最初の行は、渡されたモデル型が文字列で、2行目がH 2にラップされた文字列をレンダリングすることを示します.

@model string

<h2>@Model</h2>

ビューコンポーネントの起動

現在、カラビューまたはレイアウトページから簡単なビューコンポーネントを呼び出すときです.ビューコンポーネントを使用するには、コンポーネントクラスのInvokeAsyncメソッドをビュー内で呼び出す必要があります.

@await Component.InvokeAsync("WeatherWidget", new { cityName = "London" })

F 5キーを押してプロジェクトを実行し、h 1の見出しとしてページに表示されるパラメーター値が表示されます.

を使用している場合.NETコア1.1以降では、タグコンポーネントをタグヘルパーとして呼び出すこともできます.タグヘルパーとしてビューコンポーネントを呼び出す構文は次のとおりです

<vc:[view-component-name]
  parameter1="parameter1 value"
  parameter2="parameter2 value">
</vc:[view-component-name]>

したがって、WeatherWidgetコンポーネントを起動したいなら、以下のコードを使用できます

<vc:weather-widget city-name="London"></vc:weather-widget>

ビューヘルパーをタグヘルパーとして使用するには、@ ApatTelelperディレクティブを使用してビューコンポーネントを含むアセンブリをCount ViewImportsに登録する必要があります.cshtmlファイル.このチュートリアルの目的のため、私は以下の行を追加しました.cshtmlファイル

@addTagHelper *, ViewComponentsDemoApp

これまでのところ、ビューコンポーネントはビューコンポーネントを使用せずに簡単にレンダリングできるH 1要素をレンダリングするだけで、特別な値を提供していません.いくつかのロジックとデータをビューコンポーネントに追加し、再利用可能で便利なコンポーネントを作りましょう.
変更の場合は、Invoke Asyncメソッドを使用してInvokeメソッドを置換し、CityNameパラメーターに基づいて、ロンドン、ニューヨーク、パリのハードコード情報を返すメソッドGetWeatherinfoを呼び出します.現実世界のアプリケーションでは、お客様のアプリケーションの本当のデータを取得するには、ここで天気Webサービスを呼び出すことができます.

public class WeatherWidgetViewComponent: ViewComponent {

  public async Task < IViewComponentResult > InvokeAsync(string cityName) {
    var response = await GetWeatherInfo(cityName);
    return View("Default", response);
  }

  private async Task < WeatherInfo > GetWeatherInfo(string cityName) {

    var obj = new WeatherInfo();
    obj.City = cityName;
    obj.Date = DateTime.Now.ToString("dddd h:mm tt");

    if (cityName == "London") {
      obj.Icon = "cloudy.png";
      obj.Condition = "Cloudy";
      obj.Precipitation = "7%";
      obj.Humidity = "70%";
      obj.Wind = "6 km/h";
    }
    else if (cityName == "New York") {
      obj.Icon = "partly_cloudy.png";
      obj.Condition = "Partly Cloudy";
      obj.Precipitation = "17%";
      obj.Humidity = "80%";
      obj.Wind = "16 km/h";
    }
    else if (cityName == "Paris") {
      obj.Icon = "rain.png";
      obj.Condition = "Rain";
      obj.Precipitation = "67%";
      obj.Humidity = "20%";
      obj.Wind = "9 km/h";
    }

    return obj;
  }
}

上記の例ではWeatherInfo Modelクラスのあとに使いましたので、プロジェクトのルートレベルで作成されたモデルフォルダの中にこのクラスを作成することもできます

namespace ViewComponentsDemoApp.Models
{
    public class WeatherInfo
    {
        public string City { get; set; }
        public string Date { get; set; }
        public string Icon { get; set; }
        public string Condition { get; set; }
        public string Precipitation { get; set; }
        public string Humidity { get; set; }
        public string Wind { get; set; }
    }
}

単純なh 1要素の代わりに、よりプロフェッショナルなUI要素をレンダリングします.以下のように表示します.WeatherInfoオブジェクトは現在モデルとして使用されます.

<div class="card">
    <div class="card-body" style="width:200px;">
        <h5 class="card-title">@Model.City</h5>
        <p class="card-text">
            <span class="text-muted">@Model.Date</span>
        </p>
        <img src="@("/images/" + Model.Icon)" class="card-img-top" style="margin:auto; width: 65px;">
        <h6 class="text-muted">@Model.Condition</h6>
        <br />
        <div>Precipitation: <span>@Model.Precipitation</span></div>
        <div>Humidity: <span>@Model.Humidity</span></div>
        <div>Wind: <span>@Model.Wind</span></div>
    </div>
</div>

最後に、WeatherWidgetビューコンポーネントを3回呼び出し、異なる都市名をパラメータとして渡しました.

<div class="text-center">
    <h2>World Weather</h2>
    <br />
    <center>
        <div class="container">
            <div class="row">
                <div class="card-group" style="margin:auto;">

                    <vc:weather-widget city-name="London"></vc:weather-widget>

                    <vc:weather-widget city-name="New York"></vc:weather-widget>

                    <vc:weather-widget city-name="Paris"></vc:weather-widget>

                </div>
            </div>
        </div>
    </center>
</div>

F 5キーを押してこの例を実行し、WeatherWidget Viewコンポーネントがパラメーターとして渡されたすべての3つの都市の気象情報を生成したことがわかります.

概要

このチュートリアルでは、ASPのクールな機能について話しました.NETコアビューコンポーネントとどのようにビューを拡張し、ユーザーのためのより再利用可能な機能を提供することができます.私のウェブサイトを訪問して、ASPの他の地域の上でより多くの記事を読んでください.NETコアと関連技術