ASP.NET Core MVC のビューViews in ASP.NET Core MVC

作成者: Steve SmithBy Steve Smith

このドキュメントでは、ASP.NET Core MVC アプリケーションで使用されるビューについて説明します。This document explains views used in ASP.NET Core MVC applications. Razor ページについては、「ASP.NET Core での Razor ページの概要」を参照してください。For information on Razor Pages, see Introduction to Razor Pages.

Model-View-Controller (MVC) パターンでは、ビューがアプリのデータ表示とユーザー操作を処理します。In the Model-View-Controller (MVC) pattern, the view handles the app's data presentation and user interaction. ビューは、Razor マークアップが埋め込まれた HTML テンプレートてです。A view is an HTML template with embedded Razor markup. Razor マークアップは、クライアントに送信する Web ページを生成するために HTML マークアップと対話するコードです。Razor markup is code that interacts with HTML markup to produce a webpage that's sent to the client.

ASP.NET Core MVC では、ビューは、Razor マークアップで C# プログラミング言語を使用する .cshtml ファイルです。In ASP.NET Core MVC, views are .cshtml files that use the C# programming language in Razor markup. 通常、ビュー ファイルは、各アプリのコントローラーの名前が付いたフォルダーにグループ化されます。Usually, view files are grouped into folders named for each of the app's controllers. これらのフォルダーは、アプリのルートにある Views フォルダーに格納されます。The folders are stored in a Views folder at the root of the app:

Visual Studio のソリューション エクスプローラーで Views フォルダー、Home フォルダーが開かれ、About.cshtml、Contact.cshtml、および Index.cshtml ファイルが示されています。

ホーム コントローラーは、Views フォルダー内の Home フォルダーによって表されます。The Home controller is represented by a Home folder inside the Views folder. Home フォルダーには、AboutContactIndex (ホームページ) の Web ページのビューが含まれています。The Home folder contains the views for the About, Contact, and Index (homepage) webpages. ユーザーがこれら 3 つの Web ページのうちの 1 つを要求すると、ホーム コントローラー内のコントローラー アクションが 3 つのビューからビルドに使用するものを決定して、ユーザーに Web ページを返します。When a user requests one of these three webpages, controller actions in the Home controller determine which of the three views is used to build and return a webpage to the user.

レイアウトを使用して、一貫性のある Web ページ セクションを提供し、コードの繰り返しを削減します。Use layouts to provide consistent webpage sections and reduce code repetition. 多くの場合、レイアウトには、ヘッダー、ナビゲーションとメニュー要素、フッターが含まれています。Layouts often contain the header, navigation and menu elements, and the footer. ヘッダーとフッターには通常、多くのメタデータ要素とスクリプトおよびスタイル アセットへのリンクの定型マークアップが含まれます。The header and footer usually contain boilerplate markup for many metadata elements and links to script and style assets. レイアウトは、ビューでこの定型マークアップを回避するのに役立ちます。Layouts help you avoid this boilerplate markup in your views.

部分ビューは、再利用可能なビューの部分を管理することで、コードの重複を削減します。Partial views reduce code duplication by managing reusable parts of views. たとえば、ブログ Web サイトで複数のビューに表示される作成者の略歴に、部分ビューが役立ちます。For example, a partial view is useful for an author biography on a blog website that appears in several views. 作成者の略歴は、通常のビュー コンテンツで、Web ページのコンテンツを生成するためにコードを実行する必要はありません。An author biography is ordinary view content and doesn't require code to execute in order to produce the content for the webpage. 作成者の略歴コンテンツは、モデル バインディングだけでビューで使用することができるため、この種類のコンテンツには部分ビューを使用するのが最適です。Author biography content is available to the view by model binding alone, so using a partial view for this type of content is ideal.

ビュー コンポーネントは、コードの繰り返しを削減できる点は部分ビューと似ていますが、Web ページをレンダリングするために、コードをサーバーで実行する必要があるビュー コンテンツに適しています。View components are similar to partial views in that they allow you to reduce repetitive code, but they're appropriate for view content that requires code to run on the server in order to render the webpage. ビュー コンポーネントは、レンダリングされたコンテンツで、Web サイトのショッピング カートのように、データベースとの対話を必要とする場合に便利です。View components are useful when the rendered content requires database interaction, such as for a website shopping cart. ビュー コンポーネントは、Web ページの出力を生成するためのモデル バインディングに限定されるものではありません。View components aren't limited to model binding in order to produce webpage output.

ビューを使用するメリットBenefits of using views

ビューは、ユーザー インターフェイス マークアップをアプリの他の部分から分離して、MVC アプリ内で懸念事項の分離を確立するのに役立ちます。Views help to establish separation of concerns within an MVC app by separating the user interface markup from other parts of the app. SoC 設計に従うことで、アプリをモジュール化することができます。これにより次のような複数のメリットがもたらされます。Following SoC design makes your app modular, which provides several benefits:

  • より効率的に整理されるため、アプリの維持が容易になります。The app is easier to maintain because it's better organized. ビューは通常、アプリの機能によってグループ化されます。Views are generally grouped by app feature. これにより、機能を使用する際に、関連するビューが見つけやすくなります。This makes it easier to find related views when working on a feature.
  • アプリの部分は弱く結合されています。The parts of the app are loosely coupled. ビジネス ロジックとデータ アクセス コンポーネントと切り離して、アプリのビューをビルドおよび更新できます。You can build and update the app's views separately from the business logic and data access components. アプリの他の部分を更新しなくても、アプリのビューを変更できます。You can modify the views of the app without necessarily having to update other parts of the app.
  • ビューは個別の単位であるため、アプリのユーザー インターフェイス部分をより簡単にテストできます。It's easier to test the user interface parts of the app because the views are separate units.
  • より効率的に整理されるため、ユーザー インターフェイスのセクションを誤って繰り返す可能性が低くなります。Due to better organization, it's less likely that you'll accidentally repeat sections of the user interface.

ビューの作成Creating a view

コントローラーに固有のビューは、Views/[ControllerName] フォルダー内に作成されます。Views that are specific to a controller are created in the Views/[ControllerName] folder. コントローラー間で共有されるビューは、Views/Shared フォルダーに配置されます。Views that are shared among controllers are placed in the Views/Shared folder. ビューを作成するには、新しいファイルを追加し、このファイルに、関連付けられたコントローラー アクションと同じ名前にファイル拡張子 .cshtml を付けた名前を付けます。To create a view, add a new file and give it the same name as its associated controller action with the .cshtml file extension. ホーム コントローラーで、About アクションに対応するビューを作成するには、Views/Home フォルダー内に About.cshtml ファイルを作成します。To create a view that corresponds with the About action in the Home controller, create an About.cshtml file in the Views/Home folder:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

Razor マークアップは、@ 記号で始まります。Razor markup starts with the @ symbol. 中かっこ () で始まる Razor コード ブロック{ ... }内に C# コードを配置して、C# ステートメントを実行します。Run C# statements by placing C# code within Razor code blocks set off by curly braces ({ ... }). 例として、上に示されている ViewData["Title"] への "About" の割り当てを参照してください。For example, see the assignment of "About" to ViewData["Title"] shown above. @ 記号を使用して値を参照するだけで、HTML 内に値を表示することができます。You can display values within HTML by simply referencing the value with the @ symbol. 上記の <h2> 要素と <h3> 要素のコンテンツを参照してください。See the contents of the <h2> and <h3> elements above.

上記のビュー コンテンツは、ユーザーにレンダリングされる Web ページ全体の一部のみを示しています。The view content shown above is only part of the entire webpage that's rendered to the user. 残りのページのレイアウトとビューのその他の共通する側面は、他のビュー ファイルで指定されます。The rest of the page's layout and other common aspects of the view are specified in other view files. 詳細については、「Layout」 (レイアウト) のトピックを参照してください。To learn more, see the Layout topic.

コントローラーがビューを指定する方法How controllers specify views

ビューは通常、ActionResult の型である ViewResult としてアクションから返されます。Views are typically returned from actions as a ViewResult, which is a type of ActionResult. アクション メソッドで ViewResult を作成して直接返すことはできますが、一般的には行われていません。Your action method can create and return a ViewResult directly, but that isn't commonly done. ほとんどのコントローラーは Controller から継承されるため、View ヘルパー メソッドを使って ViewResult を返します。Since most controllers inherit from Controller, you simply use the View helper method to return the ViewResult:

HomeController.csHomeController.cs

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

このアクションが返されると、最後のセクションに表示されている About.cshtml ビューが、次の Web ページとしてレンダリングされます。When this action returns, the About.cshtml view shown in the last section is rendered as the following webpage:

Microsoft Edge ブラウザーでレンダリングされた About ページ

View ヘルパー メソッドには複数のオーバーロードがあります。The View helper method has several overloads. 必要に応じて以下を指定できます。You can optionally specify:

  • 返す明示的なビュー:An explicit view to return:

    return View("Orders");
    
  • ビューに渡すモデル:A model to pass to the view:

    return View(Orders);
    
  • ビューとモデルの両方:Both a view and a model:

    return View("Orders", Orders);
    

ビューの検出View discovery

アクションがビューを返すときに、ビューの検出と呼ばれるプロセスが行われます。When an action returns a view, a process called view discovery takes place. このプロセスでは、ビュー名に基づいて、使用するビュー ファイルを決定します。This process determines which view file is used based on the view name.

View メソッド (return View();) の既定の動作は、呼び出し元のアクション メソッドと同じ名前を持つビューを返すことです。The default behavior of the View method (return View();) is to return a view with the same name as the action method from which it's called. たとえば、コントローラーのabout ActionResult メソッド名を使用して、 about. cshtmlという名前のビューファイルを検索します。For example, the About ActionResult method name of the controller is used to search for a view file named About.cshtml. ランタイムは最初に、ビューの Views/[ControllerName] フォルダーを調べます。First, the runtime looks in the Views/[ControllerName] folder for the view. そこで一致するビューが見つからない場合は、ビューの Shared フォルダーを検索します。If it doesn't find a matching view there, it searches the Shared folder for the view.

ViewResult を使用して return View(); を暗黙的に返すか、View を使用してビュー名を return View("<ViewName>"); メソッドに明示的に渡すかは関係ありません。It doesn't matter if you implicitly return the ViewResult with return View(); or explicitly pass the view name to the View method with return View("<ViewName>");. どちらの場合も、ビューの検出は、次の順序で一致するビュー ファイルを検索します。In both cases, view discovery searches for a matching view file in this order:

  1. Views/[ControllerName]/[ViewName].cshtmlViews/[ControllerName]/[ViewName].cshtml
  2. Views/Shared/[ViewName].cshtmlViews/Shared/[ViewName].cshtml

ビュー名の代わりに、ビュー ファイル パスを指定できます。A view file path can be provided instead of a view name. アプリのルートから始まる (必要に応じて"/" または "~/" で始まる) 絶対パスを使用する場合は、 .cshtml 拡張子を指定する必要があります。If using an absolute path starting at the app root (optionally starting with "/" or "~/"), the .cshtml extension must be specified:

return View("Views/Home/About.cshtml");

.cshtml 拡張子なしで、相対パスを使用して異なるディレクトリ内にあるビューを指定することもできます。You can also use a relative path to specify views in different directories without the .cshtml extension. HomeController の内部で、相対パスを使用して、Manage ビューの Index ビューを返すことができます。Inside the HomeController, you can return the Index view of your Manage views with a relative path:

return View("../Manage/Index");

同様に、プレフィックス "./" を使用して、現在のコントローラーに固有のディレクトリを指定することができます。Similarly, you can indicate the current controller-specific directory with the "./" prefix:

return View("./About");

部分ビュービュー コンポーネントは、まったく同じではありませんが、同様の検出メカニズムを使用します。Partial views and view components use similar (but not identical) discovery mechanisms.

カスタムの IViewLocationExpander を使用して、ビューをアプリ内に配置する方法の既定の規則をカスタマイズすることができます。You can customize the default convention for how views are located within the app by using a custom IViewLocationExpander.

ビューの検出は、ファイル名によるビュー ファイルの検出に依存しています。View discovery relies on finding view files by file name. 基になるファイル システムが大文字と小文字を区別する場合は、ビューの名前も大文字と小文字を区別する可能性があります。If the underlying file system is case sensitive, view names are probably case sensitive. オペレーティング システム間の互換性のため、コントローラー、アクション名、関連するビュー フォルダー、ファイル名の間で、大文字と小文字の区別を一致させます。For compatibility across operating systems, match case between controller and action names and associated view folders and file names. 大文字と小文字を区別するファイル システムを使用していて、ビュー ファイルが見つからないというエラーが発生する場合は、要求されたビュー ファイルと実際のビュー ファイルの名前の大文字と小文字が一致していることを確認します。If you encounter an error that a view file can't be found while working with a case-sensitive file system, confirm that the casing matches between the requested view file and the actual view file name.

保守性を高め、わかりやすくするため、ビューのファイル構造を整理するためのベスト プラクティスに従って、コントローラー、アクション、およびビューのリレーションシップを反映します。Follow the best practice of organizing the file structure for your views to reflect the relationships among controllers, actions, and views for maintainability and clarity.

ビューにデータを渡すPassing data to views

ビューにデータを渡すには、いくつかの方法があります。Pass data to views using several approaches:

  • 厳密に型指定されたデータ: viewmodelStrongly typed data: viewmodel
  • 弱く型指定されたデータWeakly typed data
    • ViewData (ViewDataAttribute)ViewData (ViewDataAttribute)
    • ViewBag

厳密に型指定されたデータ (viewmodel)Strongly typed data (viewmodel)

最も確実な方法は、ビューでモデルの型を指定することです。The most robust approach is to specify a model type in the view. このモデルは、一般的に viewmodel と呼ばれます。This model is commonly referred to as a viewmodel. viewmodel 型のインスタンスをアクションからビューに渡します。You pass an instance of the viewmodel type to the view from the action.

viewmodel を使用してデータをビューに渡すことで、ビューで厳密な型チェックを利用できるようになります。Using a viewmodel to pass data to a view allows the view to take advantage of strong type checking. 厳密な型指定 (または厳密に型指定された) は、すべての変数および定数に明示的に定義された型 (stringintDateTime など) があることを意味します。Strong typing (or strongly typed) means that every variable and constant has an explicitly defined type (for example, string, int, or DateTime). ビューで使用される型の妥当性は、コンパイル時にチェックされます。The validity of types used in a view is checked at compile time.

Visual StudioVisual Studio Code では、IntelliSense と呼ばれる機能を使用して、厳密に型指定されたクラス メンバーを一覧表示します。Visual Studio and Visual Studio Code list strongly typed class members using a feature called IntelliSense. viewmodel のプロパティを表示する場合は、viewmodel の変数名に続けてピリオド (.) を入力します。When you want to see the properties of a viewmodel, type the variable name for the viewmodel followed by a period (.). これにより、エラーの少ないコードをより早く記述できます。This helps you write code faster with fewer errors.

@model ディレクティブを使用してモデルを指定します。Specify a model using the @model directive. @Model を使用してモデルを使用します。Use the model with @Model:

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

モデルをビューに提供するため、コントローラーはモデルをパラメーターとして渡します。To provide the model to the view, the controller passes it as a parameter:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

ビューに提供できるモデルの型に制限はありません。There are no restrictions on the model types that you can provide to a view. Plain Old CLR Object (POCO) viewmodel を、動作 (メソッド) をほとんど定義せずに使用することをお勧めします。We recommend using Plain Old CLR Object (POCO) viewmodels with little or no behavior (methods) defined. 通常、viewmodel クラスは、Models フォルダーまたはアプリのルートにある個別の ViewModels フォルダーのいずれかに格納されます。Usually, viewmodel classes are either stored in the Models folder or a separate ViewModels folder at the root of the app. 上記の例で使用されている Address viewmodel は、Address.cs という名前のファイルに格納されている POCO viewmodel です。The Address viewmodel used in the example above is a POCO viewmodel stored in a file named Address.cs:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

viewmodel 型とビジネス モデル型の両方に同じクラスを使用することを妨げるものはありません。Nothing prevents you from using the same classes for both your viewmodel types and your business model types. しかし、別のモデルを使用することで、ビジネス ロジックとアプリのデータ アクセス部分からは独立して、ビューを変えることができます。However, using separate models allows your views to vary independently from the business logic and data access parts of your app. モデルと viewmodel を分離することで、モデルがモデル バインディング検証を使用する際に、ユーザーによってアプリに送信されるデータに対してセキュリティ上の利点ももたらされます。Separation of models and viewmodels also offers security benefits when models use model binding and validation for data sent to the app by the user.

弱く型指定されたデータ (ViewData、ViewData 属性、ViewBag)Weakly typed data (ViewData, ViewData attribute, and ViewBag)

ViewBagは Razor Pages では使用できません。ViewBag isn't available in Razor Pages.

厳密に型指定されたビューに加え、ビューはデータの弱く型指定された (緩く型指定されたともいう) コレクションにもアクセスできます。In addition to strongly typed views, views have access to a weakly typed (also called loosely typed) collection of data. 厳密な型とは異なり、弱い型 (または緩い型) は、使用するデータの型を明示的に宣言しないことを意味します。Unlike strong types, weak types (or loose types) means that you don't explicitly declare the type of data you're using. 弱く型指定されたデータのコレクションを使用して、少量のデータをコントローラーとビュー間でやり取りすることができます。You can use the collection of weakly typed data for passing small amounts of data in and out of controllers and views.

データをやり取りする相手Passing data between a ... Example
コントローラーとビューController and a view ドロップダウン リストにデータを読み込む。Populating a dropdown list with data.
ビューとレイアウト ビューView and a layout view ビュー ファイルからレイアウト ビューの <title> 要素の内容を設定する。Setting the <title> element content in the layout view from a view file.
部分ビューとビューPartial view and a view ユーザーが要求した Web ページに基づいてデータを表示するウィジェット。A widget that displays data based on the webpage that the user requested.

このコレクションは、コントローラーおよびビューで ViewData または ViewBag のいずれかのプロパティを通じて参照できます。This collection can be referenced through either the ViewData or ViewBag properties on controllers and views. ViewData プロパティは、弱く型指定されたオブジェクトのディクショナリです。The ViewData property is a dictionary of weakly typed objects. ViewBag プロパティは、基になる ViewData コレクションに動的プロパティを提供する ViewData をラップするラッパーです。The ViewBag property is a wrapper around ViewData that provides dynamic properties for the underlying ViewData collection. 注: キーの参照では、ViewDataViewBagの両方で大文字と小文字が区別されません。Note: Key lookups are case-insensitive for both ViewData and ViewBag.

ViewData および ViewBag は実行時に動的に解決されます。ViewData and ViewBag are dynamically resolved at runtime. これらはコンパイル時の型チェックを提供していないため、どちらも viewmodel を使用する場合よりも一般的にエラーが発生しやすくなります。Since they don't offer compile-time type checking, both are generally more error-prone than using a viewmodel. そのため、開発者の中には、ViewData および ViewBag の使用を最小限に抑えるか、まったく使用しない人もいます。For that reason, some developers prefer to minimally or never use ViewData and ViewBag.

ViewDataViewData

ViewData キーを介してアクセスされる ViewDataDictionarystring オブジェクトです。ViewData is a ViewDataDictionary object accessed through string keys. 文字列データは、格納してキャストなしで直接使用できますが、特定の型を抽出するときには、他の ViewData オブジェクトの値をこれらの型にキャストする必要があります。String data can be stored and used directly without the need for a cast, but you must cast other ViewData object values to specific types when you extract them. ViewData を使用して、データをコントローラーからビューとビュー内部 (部分ビューおよびレイアウトを含む) に渡すことができます。You can use ViewData to pass data from controllers to views and within views, including partial views and layouts.

次の例では、1 つのアクションで ViewData を使用して、あいさつ文とアドレスに値を設定します。The following is an example that sets values for a greeting and an address using ViewData in an action:

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

ビューでデータを使用します。Work with the data in a view:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

ViewData 属性ViewData attribute

ViewDataDictionary を使用するもう 1 つの方法は ViewDataAttribute です。Another approach that uses the ViewDataDictionary is ViewDataAttribute. コントローラーや Razor ページのモデルのプロパティが [ViewData] 属性でマークされている場合、その値をディクショナリに格納してそこから読み込むことができます。Properties on controllers or Razor Page models marked with the [ViewData] attribute have their values stored and loaded from the dictionary.

次の例では、Home コントローラーには Title でマークされた [ViewData] プロパティが含まれています。In the following example, the Home controller contains a Title property marked with [ViewData]. About メソッドは、About ビューのタイトルを設定します。The About method sets the title for the About view:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

About ビューでは、モデル プロパティとして Title プロパティにアクセスします。In the About view, access the Title property as a model property:

<h1>@Model.Title</h1>

レイアウトでは、タイトルは ViewData ディクショナリから読み込まれます。In the layout, the title is read from the ViewData dictionary:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBagViewBag

ViewBagは Razor Pages では使用できません。ViewBag isn't available in Razor Pages.

ViewBag は、 に格納されているオブジェクトへの動的アクセスを提供する DynamicViewDataViewData オブジェクトです。ViewBag is a DynamicViewData object that provides dynamic access to the objects stored in ViewData. ViewBag はキャストを必要としないため、より簡単に使用できます。ViewBag can be more convenient to work with, since it doesn't require casting. 次の例は、上記の ViewBag を使用した時と同じ結果になるように、ViewData を使用する方法を示しています。The following example shows how to use ViewBag with the same result as using ViewData above:

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}
@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

ViewBag、ViewData を同時に使用するUsing ViewData and ViewBag simultaneously

ViewBagは Razor Pages では使用できません。ViewBag isn't available in Razor Pages.

ViewDataViewBag は基になる同じ ViewData コレクションを参照しているため、値を読み書きするときに、ViewDataViewBag の両方を使用して、それらを組み合わせることができます。Since ViewData and ViewBag refer to the same underlying ViewData collection, you can use both ViewData and ViewBag and mix and match between them when reading and writing values.

ViewBagAbout.cshtmlViewData ビューの一番上で、 を使用してタイトルを設定し、 を使用して説明を設定します。Set the title using ViewBag and the description using ViewData at the top of an About.cshtml view:

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

プロパティを読み取りますが、ViewDataViewBag の使用を反転します。Read the properties but reverse the use of ViewData and ViewBag. _Layout.cshtmlファイルで、ViewData を使用してタイトルを取得し、ViewBag を使用して説明を取得します。In the _Layout.cshtml file, obtain the title using ViewData and obtain the description using ViewBag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

文字列には ViewData のキャストを必要としないことに注意してください。Remember that strings don't require a cast for ViewData. キャストせずに @ViewData["Title"] を使用できます。You can use @ViewData["Title"] without casting.

ViewDataViewBag の両方を同時に使用することは、プロパティの読み取りと書き込みを組み合わせることと同様に可能です。Using both ViewData and ViewBag at the same time works, as does mixing and matching reading and writing the properties. 次のマークアップがレンダリングされます。The following markup is rendered:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

ViewData と ViewBag の相違点の概要Summary of the differences between ViewData and ViewBag

ViewBag は Razor ページでは使用できません。ViewBag isn't available in the Razor Pages.

  • ViewData
    • ViewDataDictionary から派生するため、ContainsKeyAddRemoveClear などの役に立つディクショナリ プロパティがあります。Derives from ViewDataDictionary, so it has dictionary properties that can be useful, such as ContainsKey, Add, Remove, and Clear.
    • ディクショナリ内のキーは文字列なので、空白が許可されます。Keys in the dictionary are strings, so whitespace is allowed. 例: ViewData["Some Key With Whitespace"]Example: ViewData["Some Key With Whitespace"]
    • string を使用するには、ビューで ViewData 以外のすべての型をキャストする必要があります。Any type other than a string must be cast in the view to use ViewData.
  • ViewBag
    • DynamicViewData から派生するため、ドット表記 (@ViewBag.SomeKey = <value or object>) を使用して動的プロパティを作成できます。キャストは必要ありません。Derives from DynamicViewData, so it allows the creation of dynamic properties using dot notation (@ViewBag.SomeKey = <value or object>), and no casting is required. ViewBag の構文は、コントローラーとビューへの追加を高速化します。The syntax of ViewBag makes it quicker to add to controllers and views.
    • null 値のチェックを簡素化します。Simpler to check for null values. 例: @ViewBag.Person?.NameExample: @ViewBag.Person?.Name

ViewData または ViewBag を使用する場合When to use ViewData or ViewBag

コントローラーとビュー間で少量のデータを渡すには、ViewDataViewBag はどちらも等しく有効な方法です。Both ViewData and ViewBag are equally valid approaches for passing small amounts of data among controllers and views. どちらを使用するかは、任意で選択できます。The choice of which one to use is based on preference. ViewData オブジェクトと ViewBag オブジェクトを組み合わせることはできますが、1 つの方法を一貫して使用した方が、コードが読みやすくなり、維持も容易になります。You can mix and match ViewData and ViewBag objects, however, the code is easier to read and maintain with one approach used consistently. どちらの方法も実行時に動的に解決されるため、実行時エラーが発生しやすくなります。Both approaches are dynamically resolved at runtime and thus prone to causing runtime errors. 開発チームの中には、これらを避けているところもあります。Some development teams avoid them.

動的ビューDynamic views

@model を使用してモデル型は宣言しないが、渡されるモデル インスタンス (return View(Address); など) があるビューは、インスタンスのプロパティを動的に参照できます。Views that don't declare a model type using @model but that have a model instance passed to them (for example, return View(Address);) can reference the instance's properties dynamically:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

この機能は柔軟性を提供しますが、コンパイルの保護や IntelliSense は提供していません。This feature offers flexibility but doesn't offer compilation protection or IntelliSense. プロパティが存在しない場合は、実行時に Web ページの生成が失敗します。If the property doesn't exist, webpage generation fails at runtime.

ビューのその他の機能More view features

タグ ヘルパーは、既存の HTML タグへのサーバー側の動作の追加を容易にします。Tag Helpers make it easy to add server-side behavior to existing HTML tags. タグ ヘルパーを使用すると、ビュー内でカスタム コードやヘルパーを記述する必要がなくなります。Using Tag Helpers avoids the need to write custom code or helpers within your views. タグ ヘルパーは、HTML 要素に属性として適用され、タグ ヘルパーを処理できないエディターでは無視されます。Tag helpers are applied as attributes to HTML elements and are ignored by editors that can't process them. これにより、さまざまなツールでビューのマークアップの編集およびレンダリングが可能になります。This allows you to edit and render view markup in a variety of tools.

カスタムの HTML マークアップの生成は、さまざまな組み込み HTML ヘルパーを使って行えます。Generating custom HTML markup can be achieved with many built-in HTML Helpers. より複雑なユーザー インターフェイス ロジックは、ビュー コンポーネントで処理できます。More complex user interface logic can be handled by View Components. ビュー コンポーネントは、コントローラーとビューが提供しているのと同じ SoC を提供します。View components provide the same SoC that controllers and views offer. これにより、共通のユーザー インターフェイス要素で使用されるデータを扱うアクションおよびビューの必要がなくなります。They can eliminate the need for actions and views that deal with data used by common user interface elements.

ASP.NET Core の他の多くの側面と同様に、ビューは、サービスをビューに挿入することを許可する、依存性の注入をサポートしています。Like many other aspects of ASP.NET Core, views support dependency injection, allowing services to be injected into views.