Asp.net-core-views

提供:Dev Guides
移動先:案内検索

ASP.NET Core-ビュー

ASP.NET Core MVCアプリケーションでは、ページのようなものは何もありません。また、URLでパスを指定するときにページに直接対応するものは含まれません。 ASP.NET Core MVCアプリケーションのページに最も近いものは、ビューと呼ばれます。

  • ご存知のように、ASP.NET MVCアプリケーションでは、すべての着信ブラウザー要求はコントローラーによって処理され、これらの要求はコントローラーアクションにマップされます。
  • コントローラーアクションはビューを返すか、別のコントローラーアクションへのリダイレクトなど、他のタイプのアクションを実行する場合があります。
  • MVCフレームワークでは、HTMLを作成する最も一般的な方法は、ASP.NET MVCのRazorビューエンジンを使用することです。
  • このビューエンジンを使用するために、コントローラーアクションは ViewResult オブジェクトを生成し、ViewResultは使用するRazorビューの名前を保持できます。

結果の表示

  • ビューはファイルシステム上のファイルになり、ViewResultはモデルオブジェクトをビューに運ぶことができ、ビューはHTMLを作成するときにこのモデルオブジェクトを使用できます。
  • コントローラーアクションがViewResultを生成することをMVCフレームワークが認識すると、フレームワークはファイルシステムでビューを見つけ、ビューを実行してHTMLを生成します。フレームワークがクラ​​イアントに送り返すのはこのHTMLです。

次のプログラムに示すように、HomeController Indexメソッドの実装を変更して、アプリケーションでこれがどのように機能するかを理解するために簡単な例を見てみましょう。

using FirstAppDemo.Models;
using Microsoft.AspNet.Mvc;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace FirstAppdemo.Controllers {
   public class HomeController : Controller {
      public ViewResult Index() {
         var employee = new Employee { ID = 1, Name = "Mark Upston"};
         return View();
      }
   }
}
*ObjectController* 内で、 *ObjectResult* を生成する代わりに、* View()*メソッドが返すものを返すだけにします。 ViewメソッドはObjectResultを返しません。 新しいViewResultが作成されるため、Indexメソッドの戻り値の型もViewResultに変更します。 ここで、Viewメソッドはいくつかのパラメーターを受け入れます。 他のパラメーターなしでこのメソッドを呼び出します。 ファイルを保存してブラウザを更新しましょう。

オブジェクト結果

これは、MVCフレームワークが外に出てそのビューを見つける必要があるが、現時点ではビューがないためです。

  • C#ASP.NETプロジェクトのデフォルトのビューは、*。cshtml拡張子を持つファイルであり、ビューは特定の規則に従います。 デフォルトでは、すべてのビューはプロジェクトのViewsフォルダーにあります。
  • 追加の情報を提供しない場合、ビューの場所とビューファイル名はASP.NET MVCによって取得されます。
  • HomeControllerのIndexアクションからビューをレンダリングする必要がある場合、MVCフレームワークがそのビューを探す最初の場所はViewsフォルダー内です。
  • ホームフォルダーに移動し、Index.cshtmlというファイルを探します。インデックスアクションを実行しているため、ファイル名はIndexで始まります。
  • MVCフレームワークは、SharedフォルダーとSharedフォルダー内に配置したビューも参照します。これらはアプリケーション内のどこでも使用できます。

ビューの結果が適切に機能するように、このIndex.cshtmlファイルを正しい場所に作成してみましょう。 そのため、プロジェクトでは、最初にすべてのビューを含むフォルダーを追加し、Viewsと呼ぶ必要があります。 Viewsフォルダー内に、HomeControllerに関連付けられたビュー用の別のフォルダーを追加し、そのフォルダーをHomeと呼びます。 [ホーム]フォルダーを右クリックして、[追加]→[新しいアイテム]を選択します。

新しいアイテムの追加を選択

左ペインで、MVCビューページを選択し、名前フィールドに index.cshtml と入力して、[追加]ボタンをクリックします。

index.cshtmlファイルに次のコードを追加しましょう。

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Home</title>
   </head>

   <body>
      <h1>Welcome!</h1>

      <div>
         This message is from the View...
      </div>
   </body>

</html>
    • 。cshtmlファイル*が表示されます。 HTMLマークアップを含めることができ、このファイルにあるマークアップはすべてクライアントに直接送信されます。 このファイルを保存し、ブラウザを更新します。

CSHTMLファイル

これで、ViewResultを介したHomeコントローラーは、このビューをクライアントと、そのindex.cshtmlファイルにあるすべてのマークアップ、つまりクライアントに送信されたすべてのマークアップをレンダリングしました。

HomeControllerとViewメソッドに戻りましょう。 このViewメソッドには、いくつかの異なるオーバーロードがあり、従業員モデルをパラメーターとして渡します。

using FirstAppDemo.Models;
using Microsoft.AspNet.Mvc;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace FirstAppdemo.Controllers {
   public class HomeController : Controller {
      public ViewResult Index() {
         var employee = new Employee { ID = 1, Name = "Mark Upston"};
         return View(employee);
      }
   }
}

モデルオブジェクトを取得し、既定のビューであるIndexを使用するViewメソッド。 ここでは、次のプログラムに示すように、そのモデル情報を渡し、Index.cshtml内でそのモデルを使用するだけです。

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Home</title>
   </head>

   <body>
      <h1>Welcome!</h1>

      <div>
         @Model.Name
      </div>
   </body>
</html>
  • Razorビューで@記号を使用すると、Razorビューエンジンは、入力したものをすべてC#式として処理します。 Razorビューには、C#式内でアクセスできる組み込みメンバーがいくつか含まれています。 最も重要なメンバーの1つはモデルです。 @Modelと言うと、コントローラーからビューに渡したモデルオブジェクトを取得します。 したがって、ここでは@ Model.Nameがビュー内に従業員名を表示します。

すべてのファイルを保存しましょう。 この後、ブラウザを更新して次の出力を確認します。

ウェルカムマークアップストン

上のスクリーンショットのように従業員名を見ることができます。