こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。
前回の記事、【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！では、コントローラ、ビューの簡単な利用方法のと、HTTP通信(GET)の方法をを解説しました。今回は、一般的に利用されるModelを利用せずにデータを受け渡す方法についてご紹介します。
サイト間のデータ受け渡し
利用する場合も流れは同じですが、Modelを使わずにサイト間でデータを受け渡すには、ビュー→コントローラ→次のビューという流れで情報を伝播させる必要があります。
そして、ビュー→コントローラと、コントローラ→ビューでは方法が異なります。手法は何点か存在しますが、今回は私たちが利用した方法をご紹介します。
そもそも、プログラミングの概念として、情報を伝達する際は、受け取った側に内容を理解させる記述を行わなければなりません。
そういった点も踏まえて、まずはビュー→コントローラの情報の受け渡し方を解説します。
今回は、前回の記事で紹介した私たちの開発物において、時間を手動入力する際の、開始時間と終了時間を、番組表ページで情報を取得するために/ResultTVに受け渡す手順に沿ってご紹介します。
ビュー→コントローラ
ビュー→コントローラで情報を伝達させたい時は、ビューにおける渡したい要素のHTMLタグに、asp-action属性とname属性を付与し、コントローラの引数に代入する事で実現できます。
ビュー
このように、コントローラのアクションメソッドに受け渡したい要素にasp-action属性とname属性を付与します。この時のname属性を後ほど設定する変数名にします。
コントローラ
コントローラでは、アクションメソッドの引数に変数を定義します。ビューの時間選択に利用するInputタグのtype属性がdatetime-localなので、文字列型で定義します。末尾の?はNullを許容するという意味です。このように記述すると、ビューで入力した情報がまずコントローラに伝播します。
次は、コントローラ→ビューを解説します。
コントローラ→ビュー
コントローラ
コントローラからビューへの情報の受け渡しは、Redirect()の引数に指定し、埋め込まれたURLをJavascriptで読み込む事によって行います。
まず、こちらでマークしたように、Redirect()にはURLを引数として指定できるのですが、そこに、パラメータとして埋め込みたい変数を代入します。
この状態でリダイレクトを行うと、URLの形式が以下のようになり、日時の情報が指定したものに合わせて動的に変更されます。
次は、このパラメータをJavascriptで読み取り、ビューで制御できるようにします。
ビュー
URLから取得したパラメータを以下のように表示させます。
これを実現するために、以下のようなコードをJavaScriptで記述します。
getparam関数でパラメータの詳細を解釈させます。
url変数のwindow.location.hrefでURLを取得してregex変数のRegExpメソッドで正規表現に基づいて値の検索を行い、その後の行で最上行のgetparam関数の引数に対応した戻り値を決定します。
他にも、substringメソッドで一部を切り出すことも可能です。
これで、コントローラを通したビュー→ビューの情報の受け渡しが出来ました。
まとめ
以上で第一回記事のASP.NET Core MVCについて、からModel要らずのデータ受け渡しまで4個の記事に分けてご紹介しました。私自身、アプリケーション開発のスキルは殆ど備わっておらず、手探りで開発を進めて、得られた知見を同じ初心者に向けた記事として、執筆させて頂きました。記事の中でご紹介した内容よりももっと良い方法や綺麗なコードが間違いなく存在するはずです。記事の内容も冗長で、何番煎じかも分からないような物で、かつ駄文で回りくどい説明でしたが、お読み頂き本当にありがとうございました。
最後に、蛇足ですが、私は物事を行うのに道具や見た目から拘りたいタイプで、開発環境も私好みのカスタマイズを施しています。こちらの記事にVSCodeのオススメのツール、テーマ等を私の趣味としてお話ししております。実際の開発には関係ありませんので、無視して頂いても構いませんが、もしよろしければ、使ってみてください。
【ASP.NET Core MVC入門】①ASP.NET Core MVCとは？初心者向けに特徴とできることを解説！
【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを追加する方法
【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！
アイキャッチ画像ロゴのCC-BY-SAに基づく表記
