Geekly Articles each Day

クッキングASP.NET5、第2号-ほとんどの初心者のために基本を繰り返しましょう

友人たち、これはASP、NET5コラムの2番目の号であり、新しいバージョンのオープンASP.NET5プラットフォームでのWeb開発の世界からさまざまな興味深いことを知っています。


前回、プラットフォームで静的コンテンツを操作するための新しいアプローチについて説明しました。 コメントでは、ASP.NETを使用し始めてトピックに飛び込み始めたばかりのWeb開発者向けの基本事項について、次の問題で話す提案がありました。 私たちはあなたに耳を傾け、この問題の資料で、 Andrey Veselov （ StealthDogg ）から提供します。これはWeb開発の専門家であり、ASP.NETおよびMicrosoft MVPに関する多くの記事の著者です。

ASP.NET5の基本（コントローラー、ビュー、モデル）の紹介をご覧ください。
ご注意 この記事は、ASP.NET5 Beta5を搭載したVisual Studio 2015の最終バージョンに関連しています。 リリースノートを使用して、ASP.NETの新しいバージョンにアップグレードします。

コントローラーを操作する


小さなWebアプリケーションの例を使用して、コントローラーの操作とMVCテンプレートのアクションを見てみましょう。
aspnetcolumngithub アドバイス！ 試してみるか、GitHub https://github.com/vyunev/AspColumnControllerDemoからソースコードをダウンロードしてください 。

プロジェクトを作成する


これを行うには、ControllerDemoプロジェクトを作成します（図1）。


図1-ASP、NET5 Webアプリケーションプロジェクトの作成

プロジェクト設定で、ASP.NET 5 Templatesセクションから空のテンプレートを選択します（図2）。


図2-Webアプリケーションテンプレートの選択

プロジェクトを作成すると、次の要素がソリューションエクスプローラーに反映されます（図3）。


図3 -テンプレート構造

次に、ASP.NET MVC 6をプロジェクトに接続する必要があります。

1. project.jsonファイルで、Microsoft.AspNet.Mvcライブラリへの依存関係を指定します。

"dependencies": { "Microsoft.AspNet.Server.IIS": "1.0.0-beta5", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5", "Microsoft.AspNet.Mvc": "6.0.0-beta5" },

2.次に、要求を処理してルーティングを構成するには、OwinパイプラインにASP.NET MVC 6を含める必要があります。 これを行うには、Startup.csファイルに次の行を追加します。

 public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app) { app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller}/{action}/{id?}", defaults: new { controller = "Home", action = "Index" }); }); } }

プロジェクトが準備され、コントローラーとアクションの作成を開始できます。

コントローラーとアクション


原則として、コントローラーはコントローラーと呼ばれる特別なフォルダーに配置されます。 ASP.NET MVC 6では、他のフォルダーも使用できます。 基本クラスでそれらを探しています。 ただし、この例では、ファイルの場所のクラシックバージョンに焦点を当てます。 コンテキストメニューを使用して、Controllersフォルダー（「追加>新しいフォルダー」）を作成し、その中に新しいHomeControllerクラスを作成します（「追加>新しいアイテム...」および「クラス」を選択します）。

ご注意 コントローラークラスの名前は、常にコントローラーの名前（この場合は「Home」）と「Controller」の末尾で構成されます。
ヒント。 将来、コントローラーを作成するために、既製のMVCコントローラークラステンプレートを使用できます。 しかし、今、勉強するために、通常の空のクラスを作成します。

すべてのWebアプリケーションコントローラーの基本クラスはControllerです。 したがって、作成されたクラスを継承します。

 public class HomeController : Controller { }

Controllerクラスはコントローラーのマーカーであるだけでなく、受信した要求を処理して応答を生成するための基本的な機能を提供します。 現時点では、次のようなプロパティをキャンセルする価値があります。


さらに、いくつかの便利なメソッドを提供しますが、これについては後で説明します。

このアクションは、コントローラーでの要求の直接処理を担当し、次の部分を区別できます。

  1. 属性[HttpGet]、[HttpPut]、[HttpPost]、[HttpPatch]、[HttpDelete]を使用して特定の要求タイプを指定します。 [HttpMethod]を使用して複数のタイプを指定することもできます。 この場合、他のタイプのリクエストは無視されます。 属性が欠落している場合、すべての要求に対してアクションが呼び出されます。
  2. アクションの結果 -そのタイプはIActionResultの実装です。 すべてのアクションは、指定されたインターフェイスを実装するクラスのインスタンスを返す必要があります。 実際、彼はクライアントに送信される応答を生成する責任があります。 HTMLページ、ファイル、リダイレクト、エラーコードなどが考えられます。
    基本クラスControllerには、ほとんどの標準的な場合に適したメソッドが含まれています。

    1. ビュー（）-ビューを使用して応答（htmlページ）を作成します。
    2. コンテンツ（）-クライアントに任意のテキスト文字列を送信することを目的としています。たとえば、CSSまたはJavaScriptを生成できます。
    3. ファイル（）-ファイルをクライアントに返すことができます。
    4. Json（）-オブジェクトをJSON形式に変換し、クライアントに返します。
    5. Redirect（）、RedirectPermanent（）、RedirectToAction（）、RedirectToRoute（）-クライアントを新しいアドレスにリダイレクトします。

  3. 呼び出されるアクションの名前 。 デフォルトでは、クエリ文字列は次の形式であると見なされます： www.site.com/<Controller>/ <Action>
  4. アクションメソッドにはパラメータがあります。 ASP.NET MVCは、クエリ文字列からそれらの値を取得しようとします。 アクションとリクエストのパラメータの比較は名前で実行されます。
  5. そして最後に、必要なデータが準備され、結果が返されるメソッドの本体。

最初のアクションを追加します-インデックス：

 public class HomeController : Controller { // GET: /Home/ public IActionResult Index() { return this.Content("Hello ASP.NET MVC 6."); } }

ここでWebアプリケーションを実行すると、指定された文字列は「Hello ASP.NET MVC 6」です。 ブラウザに表示されます。

正確に何が起こったのか見てみましょう：


要求されたコントローラーまたはアクションが見つからない場合、応答「404. Page not found」が送信されます。

少し複雑にして、クラスコンストラクターともう1つのアクションを作成しましょう。

  public class HomeController : Controller { private readonly string _time; public HomeController() { this._time = DateTime.Now.ToString("G"); } // GET: /Home/ public IActionResult Index() { return this.Content("Hello ASP.NET MVC 6"); } // GET: /Home/Echo/ public IActionResult Echo(string message) { return this.Content($"{this._time} > {message}"); } }

これで、コントローラーの作成時間とリクエストで渡された文字列が回答として返されます。 これにより、リクエストごとにHomeControllerの新しいインスタンスが作成されます。

作成されたアクションを呼び出すには、コントローラーの名前とアクション自体を含むパスをたどる必要があります。 Webアプリケーションを起動し、ブラウザーに次のアドレスを入力します。

http：// localhost：[port] / Home / Echo？message = Hello

非同期性はただ


ASP.NET MVC 6を使用して非同期メソッドを簡単に作成できることを見てみましょう。 エコーのアクションをやり直します。 非同期メソッドの呼び出しをシミュレートするには、Task.Delay（）を使用します。

 public async Task<IActionResult> Echo(string message) { await Task.Delay(100); return this.Content($"{this._time} > {message}"); }

必要なのは、IActionResultの結果の型をTask <IActionResult>に置き換え、非同期修飾子を追加することだけでした。 このようなアクションでは、たとえば、さまざまなデータソースまたはサービスにアクセスするために非同期メソッド呼び出しを使用できます。

ちょっとした練習


最後に、2つの小さな実用的なタスク：

  1. パラメーターの値も表示するが、POSTタイプの要求のみに送信されるアクションを作成します。
    ヒント。 リクエストを作成するには、フォームで通常のHTMLページを使用できます。 そのファイルを既存のwwwrootフォルダーに配置します。これは、サイト上の静的コンテンツ（htmlページ、ファイルなど）を対象としています。
  2. Getリクエストにのみ応答するアクションを作成し、以下を実行します。
    • ファイルを返します。
    • Json形式のオブジェクトを返します（簡単にするために、匿名クラスを使用できます）。
    • 別のページにリダイレクトします。

そして、すべてのソリューションが存在する添付のソースコードを急いで調べないでください。 自分でやってみてください。

ビューを操作する


MVCパターンの次のコンポーネントである表現に移りましょう。
aspnetcolumngithub アドバイス！ すべてを試すか、GitHub https://github.com/vyunev/AspColumnViewDemoからソースコードをダウンロードしてください 。

ビューを使用してWebアプリケーションを作成する


これを行うには、前のパートで行った方法と同様に、空のASP.NET MVC WebアプリケーションViewDemoを作成します。 今回だけ、HomeControllerは次のようになります。

  public class HomeController : Controller { // GET: /Home/ public IActionResult Index() { return this.View(); } }

View（）メソッドは、ビューを使用してアクションの結果を作成します。 プロジェクトを開始して、すぐにエラーメッセージを取得してみましょう。 プロジェクトにはまだインデックスアクションのビューがありません（図4）。


図4-表示されていない場合のエラーメッセージ

メッセージのテキストを注意深く読むと、プレゼンテーションのプロジェクトの構造に明確に定義された場所があることに気付くでしょう。 これがビューフォルダです。 コントローラーの名前に対応する名前のサブフォルダーが含まれています。 この例では、ホームになります。 また、ビューファイルは既に保存されており、そのファイル名は、一般的な場合、目的のアクションの名前と一致しています。

さらに、特別なフォルダーViews / Sharedがあります。 プロジェクト内のすべてのアクションに使用できるビューが含まれています。

上記のビューおよびホームフォルダーを作成します。 その後、最後に、コンテキストメニューの[追加]> [新しいアイテム...]を使用して、Index.cshtmlという名前のビュー（MVCビューページ）を追加します。 cshtml拡張は、Razorマークアップ言語が使用されることを示します。 その結果、プロジェクトは次のようになります（図5）。


図5-新しいビューのプロジェクト構造

Index.cshtmlに次のコードを追加します。

 <h1>View Demo</h1>

Webアプリケーションを起動します。 次のことが起こります。

  1. HomeコントローラーのIndexアクションが呼び出されます（前の記事で説明したとおり）。
  2. Indexアクションでは、View（）メソッドはView / Home / Index.cshtmlビューを使用して結果（IActionResultを実装するクラスのインスタンス）を作成します。
  3. アクションの結果は、クライアントへの応答としてHTMLコードを生成します（IActionResultインターフェイスのExecuteResultAsyncメソッドで）。
  4. 作成されたページはクライアントに送信され、彼のブラウザで表示されます。

View（）メソッドは、次のパスを使用してビューを検索します。

  1. まず、View / <Controller Name> / <action name> .cshtml
  2. 次に、表示/共有/ <アクション名> .cshtml

両方の検索で何も返されなかった場合は、エラーメッセージが表示されます。

ビューの名前を明示的に指定できるメソッドオーバーロードがあります。 たとえば、呼び出し

this.View（ "MyView"）は、ファイルView / <Controller name> /MyView.cshtmlまたはView / Shared / MyView.cshtmlを探します。 これは、たとえば、アクションが何らかの条件に応じて異なる結果を与える場合に役立ちます。

さらに、データをビューに渡すことができるビュー（）オプションがあります。 これについては、以下で詳しく説明します。 それでは、Razorの機能を見てみましょう。

Razor Markup Language


基本設計

Razorは次のデザインを受け入れます。


それらでは、C＃コードをHTMLコードと組み合わせることができます。次に例を示します。

 @for(int i=0; i<10;i++) { <p>@i</p> }

ビューは本質的に、独自のプロパティとメソッドを持つIRazorPageを実装するクラスであることに注意してください。 たとえば、ViewBagとViewDataを使用できます。これらには、アクションで追加された値が含まれます。

多数のヘルパーメソッドを提供するHtmlプロパティもあります。 それらのいくつかを次に示します。


別のヘルパープロパティはUrlです。 Webアプリケーションでパスを操作するためのメソッドが含まれています。 おそらく最も人気のある@ Url.Action（...）は、指定されたコントローラーの指定されたアクションへのパスを表示します。例：<a href="@ Url.Action("Index", "Home") ">ホームページ</ a>。

また、特殊ファイルViews / _ViewStart.cshtmlに注意する必要があります。 その存在は必ずしも必要ではありませんが、プロジェクトに存在する場合、その内容は各プレゼンテーションの前に実行されます。 これを使用して、すべてのビューに共通のページテンプレートを設定できます。

ページテンプレート


通常、Webアプリケーションには多数のページが含まれます。 それらのほとんどは独自の表現を持っているため、HTMLコードを含む独自のファイルを持っています。 さらに、多くのページには同じテンプレートがあり、メインコンテンツ（コンテンツ）の一部のみが異なります。

各ビューファイルにページのHTMLコードのコピーを埋め込まないようにするには、レイアウトを使用できます。 これを行うには、以下を行う必要があります。

  1. ビュー/共有で共有マークアップファイルを作成する
  2. _ViewStart.cshtmlまたはアクション自体では、レイアウトプロパティを使用してマークアップファイルを指定します。
    ヒント：ファイルとビューの両方でテンプレートが指定されている場合、ビューで指定されたものが使用されます。 したがって、_ViewStart.cshtmlでデフォルトのテンプレートを設定し、必要に応じてビューでそれをオーバーライドできます。
  3. ビューコードがテンプレートに挿入される場所は、@ RenderBody（）を呼び出すことによってマークされます。

そのため、View / Sharedフォルダーで、_Layout.cshtml HTMLマークアップテンプレートを使用してファイルを作成します（名前は任意です）。

 <html> <head> <meta charset="utf-8" /> <title>@this.ViewBag.Title</title> </head> <body> <nav>Menu</nav> <section id="mainContent"> @RenderBody() </section> <footer>Footer</footer> </body> </html>

ビューコードも変更します。

 @{ this.ViewBag.Title = "Home page"; this.Layout = "~/Views/Shared/_Layout.cshtml"; } <h1>View Demo</h1>

ご覧のとおり、このコードは次のとおりです。

これで、Webアプリケーションを起動すると、指定されたテンプレートを使用してページが表示されます。 「Home page」という行が見出しに挿入されます。

セクション


ビューのコードを、@ RenderBody（）によって生成されたブロックのコード外のページテンプレートに挿入することができます。 これらは、次のように機能するセクションです。

  1. テンプレートコードは、@ RenderSection（名前、必須）または@RenderSectionAsync（名前、isRequired）を使用してセクションを挿入する場所を示します。 nameはセクションの一意の名前を定義し、必須です-必須かどうか。
  2. ビューは、@ section name {...}コンストラクトを使用してセクションのコンテンツを定義します
  3. 必要なセクションのコードがない場合、エラーメッセージが表示されます。

セクションはページの本文だけでなく、タイトルにも配置できることに注意してください。 たとえば、これを使用して、個別のページでのみ必要な外部JavaScriptライブラリを接続できます。

例に移りましょう。 ページテンプレートでオプションセクションを定義する

 <html> <head> <meta charset="utf-8" /> <title>@this.ViewBag.Title</title> </head> <body> <nav>Menu</nav> <section id="mainContent"> @RenderBody() </section> <footer>Footer</footer> @RenderSection("scripts", required: false) </body> </html>

次に、ビューのこのセクションのコードを設定します。 明確にするため、アラート（）を呼び出します。

 @{ this.ViewBag.Title = "Home page"; } <h1>View Demo</h1> @section scripts { <script> alert("Demo"); </script> }

プロジェクトを実行し、JavaScriptがページに追加されて実行されたことを確認します。

部分ビュー


Razorのもう1つの便利な機能は、部分ビューの作成です。 これは、繰り返しページ要素（ポップアップダイアログ、フォームなど）を保存するためと、論理的に大きなページを部分に分割するための両方に使用できます。

部分ビューの使用は非常に簡単です。

  1. 通常どおり部分ビューを作成する
  2. ページテンプレートの使用をキャンセルするには、レイアウト= nullを指定します。
  3. 部分ビューを挿入するには、 Html .Partial（）またはHtml .PartialAsync（）を使用します。

いつものように、例に移りましょう。 新しいフォルダーViews / Shared / Formsで、次の内容を含む部分的なview_ContactForm.cshtmlのファイルを作成します。

 <form> Message: <input type="text" /><button type="submit">Send</button> </form>

インデックスビューで取得します。

 @{ this.ViewBag.Title = "Home page"; } <h1>View Demo</h1> @Html.Partial("Forms/_ContactForm") @section scripts { <script> alert("Demo"); </script> }

部分ビューへのパスがどのように指定されているかに注目してください。 彼の検索は一般的な規則に従い、この場合、パスはSharedを基準にして示されます。 ファイルは、ビュー内の任意のフォルダーに配置できます;この場合、メソッドパラメーターでサイトのルートに対する相対パスを指定する必要があります。 たとえば、 Html .Partial（ "〜/ Views / Shared / Forms / _ContactForm"）

プロジェクトを開始して結果を確認するだけです。

コンポーネントを表示


表現といえば、コンポーネントとしてのASP.NET MVC 6のそのような革新をキャンセルする必要があります。 本質的に、これは独自のコントローラーを追加することによる部分表現のアイデアの開発です。 ただし、最初にモデルの使用を理解する必要があります。 そして、次の部分のコンポーネントに戻ることが可能になります。

モデルを使用します


前のパートで作成したアプリケーションには、既にコントローラーとビューが含まれています。 MVCテンプレートの別のコンポーネントであるモデルの使用方法を検討する必要があります。
aspnetcolumngithub アドバイス！ すべて自分で試すことも、GitHub https://github.com/vyunev/AspColumnModelViewからソースコードをダウンロードすることもできます 。

モデルを作成する


最後のパートで作成したViewDemoアプリケーションを使用して、モデルの作業を追加します。

プロジェクトにモデルを配置するには、Modelsフォルダーを作成します。 この名前は推奨されますが、必須ではありません。 それらのコードは、異なる名前のフォルダーに配置できます。 さらに、サブフォルダーを使用して、クラスを論理的にグループ化できます。

モデルは単純なオブジェクト（POCO）です。 クラスから継承したり、インターフェイスを実装したりする必要はありません。 たとえば、ユーザー名と現在の時刻を含むモデルを作成します。 これを行うには、次のコードを使用して、IndexPageModel.csファイルをModelsフォルダーに追加します。

 using System; namespace ViewDemo.Models { public class IndexPageModel { public string FirstName { get; set; } public string LastName { get; set; } public string FullName => $"{this.FirstName} {this.LastName}"; public DateTime CurrentTime { get; set; } } }

モデルの準備ができました。 モデルクラスには制限がないことに注意してください。 たとえば、この場合、計算されたFullNameプロパティが存在します。 ただし、夢中になって、アプリケーションロジックをモデルに転送しないでください。 アプリケーションをさらにメンテナンスしやすくするために、できるだけ単純なままにしておくことをお勧めします。

コントローラーの変更


そのため、モデルはすでに存在しています。 インスタンスを作成して、いくつかの値を書き込む必要があります。 簡単にするために、定数を使用します。 Homeコントローラーに進み、次のようにIndexアクションを変更しましょう。

 public IActionResult Index() { var model = new IndexPageModel() { FirstName = "John", LastName = "Doe", CurrentTime = DateTime.Now }; return View(model); }

モデルをビューに転送するには、そのインスタンスをView（）メソッドのパラメーターとして置き換えるだけで十分です。 この例では、定数を使用してモデルにデータを取り込みます。 もちろん、実際のプロジェクトでは、アプリケーションのビジネスロジックにアピールし、結果をモデルに代入します。

ビューを変更する


index.cshtmlビューを開きます。 まず、モデルの特定のクラスを使用することを示す必要があります。 これを行うには、ファイルの最初の行に次のように記述します。

@model ViewDemo.Models.IndexPageModel

クラス名はその名前空間とともに指定されることに注意してください。

これで、指定されたタイプの渡されたモデルを含むthis.Modelプロパティを使用できます。 ページにデータを表示します（完全なビューコードIndex.cshtml）：

 @model ViewDemo.Models.IndexPageModel @{ this.ViewBag.Title = "Home page"; } <h1>Model Demo</h1> <p><strong>  :</strong> @this.Model.FullName</p> <p><strong>   :</strong> @this.Model.CurrentTime.ToString()</p>

アプリケーションを起動します。 ページが更新されるたびに、コントローラーに示されている名前と姓、および現在の日付と時刻が表示されます。

そのため、モデルの作成と使用は、通常のクラスほど難しくありません。 インスタンスをビューに渡す作業はすべてASP.NET MVCによって行われます。 , this.Model , . IntelliSense .


Visual Studio 2015 ASP.NET5 Beta5. , Visual Studio .

ASP.NET5 Beta6 , . . .

ASP.NET5. Beta7 Beta8, , (RC1), 2016 . .

DevCon 2015, - ASP.NET .

便利なリンク


ASP.NET5 http://docs.asp.net/en/latest/ .

ASP.NET 5 Community Standup , Microsoft . .

ASP.NET- Visual Studio Code , - VS Code.

ASP.NET5 Microsoft.


, , vyunev@microsoft.com . , ASP.NET .

著者について


ヴェセロフ・アンドレイ
シニア開発者、CodeFirst、アイルランド

15年の経験を持つ認定開発者、Microsoft MVP（ASP.Net/IIS）。 過去9年間、彼はMicrosoftテクノロジーを使用したWeb開発に携わってきました。 主な専門分野：ASP.NETおよびAzure。 彼は現在、CodeFirstでシニア開発者として働いています。 彼には専門的なブログがあります。

ツイッター ： twitter.com/AndreyVeselov
Facebook： www.facebook.com/veselov.andrey
ブログ： andrey.moveax.ru

Source: https://habr.com/ru/post/J264271/

More articles:


All Articles