【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！

こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。

前回の記事、【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを表示させる方法では、ASP.NET Core MVCでプロジェクトを作成し、サンプルのページを表示させる方法をご紹介しました。今回の記事では、私たちインターンシップ生の制作物を利用してをController、Viewの簡単な使い方、外部APIから情報を取得する方法をご紹介します。

私たちが制作したもの

私たちは、「Schedule Supporter」というシステム名で、時間を選択or利用者のGoogleアカウント(OAuth2.0で認証)から自動でGoogle Calenderの予定を取得し、晴れ、曇りなら現在地周辺のスポットをGoogle Map Places APIから取得し表示させ、雨ならNHK番組表APIから番組表を取得し、予定のない時間帯に放送するテレビ番組の一覧を表示させるWebアプリケーションを制作しました。

この中で私は全てのページのビューと、天気情報の取得、それによるリダイレクトを行うControllerアクションメソッドの実装を行いましたので、その部分も利用して説明していきます。

コントローラ

まず、ASP.NET Core MVCには、Program.csの23-25行目に以下のようなコードがあります。

これはURLにアクセスした時、最初に行われるコントローラのアクションを定義するもので、このコードではHomeコントローラのIndexアクションメソッドを実行します。

{id?}というのは○○.○○/1というように、プラスでパラメータを指定できます。末尾に?があるのは必須ではない、という意味です。パラメータの扱いは次の記事で利用しますので、取り敢えず今は無視して頂いて構いません。

基本的にコントローラで何かを実行させる時は、ビューでコントローラ、アクションを指定し、指定されたコントローラ、アクションのメソッドを実行して動的にWebアプリケーションを動作させる形になります。

まず、前回の記事で作成したサンプルページの、Views/Shared/_Layout.cshtmlの23，26行目を見てみましょう。

このaタグのasp-controller属性でコントローラを、asp-action属性でアクションをそれぞれ指定して、ユーザがクリックすることで、それを呼び出す事ができます。aタグだけでなく、InputタグやButtonタグでも利用可能です。

次に、Controllers/HomeController.csの、こちらのブロックを見てみましょう。

IActionResult 〇〇(){} というのは、○○アクションが呼び出されたら、このメソッドを走らせますよ、という意味で、この場合は、IndexアクションでIndex.cshtmlを、PrivacyアクションでPrivacy.cshtmlをレンダリングする、という内容が記述されています。View()に引数が指定されていない場合は、アクションと同じ.cshtmlが出力されます。

コントローラのファイル名には接尾辞として○○Contorollerと命名しますが、Viewでアクションを起こす際のコントローラの指定は〇〇のみで行います。

アクションメソッド内でメソッドを実行する場合は、View以外にも以下のようなメソッドが存在します。

Content()　・・・　指定された内容をテキストとしてブラウザに返す

File()　・・・　指定されたファイルをブラウザに返す

Json()　・・・　指定されたJSONレスポンスをクライアントに返す

Redirect()　・・・　指定されたURLにリダイレクトさせる

RedirectToAction()　・・・　指定されたアクションをコントローラから実行する

詳しくはこの辺のドキュメントを読み込むと良いかと思います。

ASP.NET Core MVC でコントローラーで要求を処理する | Microsoft Docs

Controller クラス (Microsoft.AspNetCore.Mvc) | Microsoft Docs

ASP.NET Core のアンカー タグ ヘルパー | Microsoft Docs

また、アクションメソッド内でコントローラ単体で完結する処理を記述することも可能です。この後説明しますが、取得する情報に基づいてリダイレクトするビューを動的に変更する、などといった処理も可能です。

ビュー

第一回の記事でお伝えしたように、ビューでは.cshtmlという形式を用いて、HTML/C#を共存できる形式で記述しますが、動きの少ないものであれば、こちらは基本的にHTMLのみで記述しても構いません。

ビューの使い方、とは言ったものの、ビューは見た目(表示)を構成するものなので、HTMLが書ければ、実はビューを作ることは可能なのです。

中に<script>タグを書いてスクリプトを走らせるも良し、~/js、~/cssでそれぞれを参照させるも良し、使い方は自由です。

ただし、この内容がレンダリングされる前にViews/Shared/Index.cshtmlの内容が事前に適用される点に注意してください。

そして、第一回記事でお伝えしたように、ASP.NET Core MVCにはRazor Pagesで動的なWebページを作成する事ができます。

ビューにおけるASP.NET Core MVC特有の要素は基本的にこちらだけです。

SPA(シングルページアプリケーション)のような形式をとる事も可能です。(最も、SPAであればMVCモデルを利用する必要はありません)

こちらに記法がかなり深いところまで解説されています。

私たちはJavaScriptとコントローラで動的な部分を構成したため、Razor構文は殆ど利用しませんでしたが、@{}といったコードブロックでC#の記述ができたり、@〇〇といった形式でディレクティブを利用できたり、極めるとかなり自由度の高い開発ができると感じました。

モデルを利用した開発で真価を発揮すると思いますので、是非データベース/モデルを利用したWebアプリケーション開発を行う方は利用してみてください。

外部APIから情報を取得する

詳細は割愛しますが、インターネット上で情報を伝達する際はHTTPというプロトコルで通信を行い、中でも情報の取得を行うためのGET、情報を送信するためのPOSTなどのリクエストメソッドが代表的なものとして利用されています。

そして、一応説明しておきますが、APIとは、外部のサービスやシステムから簡単に情報を受け取れる仕組みの事です。APIがあれば、自分でその機能を実装するためのコードを記述する必要は無く、Webアプリケーションにおいては基本的にAPIごとの正しい規則でHTTP通信をするだけで欲しい情報の取得、機能の実装ができるのです。

今回はAPIキーやアクセストークンが不要で、URLに指定したパラメータだけで取得する情報を選択でき、非営利で利用可能な、無料かつオープンソースの天気情報取得API、”Open-Meteo Weather Forecast API”を利用し、現在の天気情報を取得します。

Open-Meteo Weather Forecast APIは、7日先までの予報情報や、風速、雲量、気圧など、様々な情報を取得できます。

今回は取得した情報を.NET CLIに表示する方法をご紹介します。

まず、C#でHTTP通信を行うためには、HttpClientというクラスを利用する必要があります。また、非同期処理を行うため、コントローラのアクションメソッドは public async Task<IActionResult> Action()という形で記述します。

ただし、このままの状態で情報を取得すると文字列型で出力されてしまいますので、このデータをデシリアライズ（解析、分割）してくれるJObjectというC#のクラスを利用して取り出したいデータを抽出します。利用するのはいたって簡単で、.NET CLIでパッケージを追加して、コードを2行追加するだけです。(↓の画像における3行目、17行目)

.NET CLIでパッケージを追加するには、追加するASP.NET Core MVCのディレクトリで以下を入力します。

以上を踏まえて、HttpClientでGETして、JSON形式で出力するコードがこちらになります。

APIのURLパラメータは緯度経度を東京のものにし、現在の天気のみを取得、タイムゾーンを東京のものに設定したものになります。

これをViewの要素のasp-action属性にProcessingを入れ、アクションメソッドを走らせると、.NET CLIで以下のような結果が得られます。

このウェザーコードというのはWMO気象コードというもので、この3は曇りに相当します。

コントローラでリダイレクト

ここまで説明した内容を用いて、if文で晴れ、曇りなら周辺スポット表示ページへ、それ以外(雨、雪、雷雨など)で番組一覧表示ページへリダイレクトするコードがこちらになります。

周辺スポット表示ページは/ResultSpot/Index.cshtmlに、番組表ページは/ResultSpot/Index.cshtmlにそれぞれビューを作成しています。

先ほどのコードに数行追加しただけです。ASP.NET Core MVCでは動的なビューの制御がこんなにも簡単に行えます。

もちろん、View(“ビュー名”)で遷移させることでもページの自動遷移は可能ですが、Redirect()にしたのには理由があります。こちらは次回の記事で説明するので、是非ご覧ください。

今回は、コントローラの簡単な制御方法とビューの感覚、HTTP(GET)の方法とページのリダイレクトについてご紹介しました。

次回は、Modelを使わずに、ページ間で情報を受け渡す、Redirect()の効果的な利用方法についてご紹介します。

【ASP.NET Core MVC入門】①ASP.NET Core MVCとは？初心者向けに特徴とできることを解説！

【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを表示させる方法

【ASP.NET Core MVC入門】④Modelを使わずにサイト間でデータを受け渡す方法を解説！

アイキャッチ画像ロゴのCC-BY-SAに基づく表記

dotnetCore Logo Pack by campusMVP.es

About サイオステクノロジーの中の人 5 Articles

サイオステクノロジーで働く中の人です。

Twitter YouTube