朧の.Netの足跡
問合せ先:support@oborodukiyo.info サイト内検索はこちら 
ASP.NET MVCでビューにおいて複数のデータを渡したい時





ビューに渡すデータやリストは一つだけの場合が多いと思いますが、では複数渡したい時はどうすればいいでしょうか?
表示だけの場合はTupleを利用して複数のデータを持たせればよいです。
foreach文とかを利用したい時はToListメソッドを利用してList型をTupleに持たせるとよいです。

でも、Tupleではダメな時があります。
それは、Razor構文でのHtml.TextBoxFor等を使うときは、そのビューに渡したいデータをプロパティで保持するクラスを作って、それをビューに渡すとよい。

Tupleの場合

Tupleクラスを使う場合は、データを渡すコントローラ側で変数にvarを使わずに、型を明記した方がエラーがあった時にわかりやすいと思います。
また、ビュー側でforeach文を使いたい場合には、データをToList()メソッドでListクラスにした方がいいです。
ビュー側ではModelがnullのことがある場合があるので、if文でModelがnullでないことを調べたほうがよいです。

コントローラー側

            //データの取得
            var data1 = db.Table1.ToList<Models.class1>();
            var data2 = db.Table2.ToList<Models.class2>();
            //タプルにしてデータを渡すための変数
            //型は明記したほうがいいのかなと自分では思います。
            //その方がエラーがあった時に確認がしやすいかと。
            Tuple<list<Models.class1>, List<Models.class2>> myModel = new Tuple<list<Models.class1>, List<Models.class2>>(myData1, myData2);
            return View(myModel);
        

ビュー側

            @model Tuple<List<Models.class1>, List<Models.class2>>
            
            //Tupleがnullの可能性もあるのでの予防処理
            @if(Model != null)
            {
                <table>
                <tr><th>列1</th><th>列2</th><th>列3</th></tr>
                @if (Model.Item2.Count > 0)
                {
                    foreach (var item in Model.Item2)
                    {
                        <tr>
                        <td>@item.列1</td>
                        <td>@item.列2</td>
                        <td>@item.列3</td>
                        </tr>
                    }
                }
                </table>
                
            }
        

まとめるクラスを使う場合

コントローラからビューに渡したいデータが複数あり、またHtml.TextBoxForなどのヘルパーを使いたい時には、ラッパーとなるクラスを自分で作り、そのプロパティにデータを持たせるとやりやすいです。

モデルフォルダの自作のクラス

            public class myDataClass
            {
                public Models.class1 data1
                {
                    get;
                    set;
                }
                public Models.class2 data2
                {
                    get;
                    set;
                }
            }
        

コントロール側

            Models.myDataClass myData = new Models.myDataClass
            {
                data1 = new Models.class1(),
                data2 = new Models.class2()
            };
            return View(myData);
        

ビュー側

            @model Models.myDataClass
        








良いやや良い普通やや悪い悪い

投稿日時評価コメント