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

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

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

前回の記事、【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！では、コントローラ、ビューの簡単な利用方法のと、HTTP通信(GET)の方法をを解説しました。今回は、一般的に利用されるModelを利用せずにデータを受け渡す方法についてご紹介します。

1 サイト間のデータ受け渡し
- 1.1 ビュー→コントローラ
  - 1.1.1 ビュー
  - 1.1.2 コントローラ
- 1.2 コントローラ→ビュー
  - 1.2.1 コントローラ
  - 1.2.2 ビュー
2 まとめ

サイト間のデータ受け渡し

利用する場合も流れは同じですが、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に基づく表記

dotnetCore Logo Pack by campusMVP.es