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

★★★ イベント情報 ★★★
◇【参加登録受付中】Kong Summit, Japan 2022◇
今年は12月15日に開催決定!最新情報とデモとともにKongと事例/ユースケースのご紹介などAPIエコノミーやマイクロサービスに関心のある開発者の方にとっては必見です。ぜひお申し込みください!イベントの詳細・お申込はこちら

こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 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に基づく表記

dotnetCore Logo Pack by campusMVP.es





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる