HTMLで表を作り、データを入れて表示する方法

###前提・実現したいこと
ASP.NET MVCのViewについての質問です。
Viewで表を作り、Controllerから持ってきたデータを入れたいと考えています。

| A表 | | B表 |
―――――――――――――――――――― ――――――――――――――――――――
| Aコード番号 | Aコード名 | | BID番号 | BID名 |
―――――――――――――――――――― ――――――――――――――――――――
| 番号 | 名 | | 番号 | 名 |
―――――――――――――――――――― ――――――――――――――――――――
| 番号 | 名 | | 番号 | 名 |
―――――――――――――――――――― ――――――――――――――――――――
| 番号 | 名 | | 番号 | 名 |

上記の表のようにA表とB表を並べて作って、番号と名の所にそれぞれ
（Aコード）@sample.ACode （Aコード名） @Sample.ACodeName
（BID） @sample.BId -（BID名）@sample.BIdName
を入れたいんですが、どうしたらいいんでしょうか？
データはControllerから参考書みながら持ってきたんですが、
この先がわからないです。
勉強し始めでわからないので、やさしく教えてもらえるとうれしいです。
（図々しいですが....どうかお願いします）

###View

html
1@{
2    ViewBag.Title = "サンプル";
3}
4<h2>@ViewBag.Title.</h2>
5<h3>@ViewBag.Message</h3>
6
7<h4>＜A結果＞ </h4>
8<table border="1" cellpadding="20" cellspacing="0">
9    <tr>
10        <td colspan="2">A表</td>
11    </tr>
12    <tr>
13        <td>Aコード番号</td>
14        <th>Aコード名</th>
15    </tr>
16</table>
17
18 
19@foreach (var result in ViewBag.Result)
20{
21    <p>@sample.ACode - @Sample.ACodeName - @sample.BId - @sample.BIdName</p>
22}
23
24

###補足情報(言語/FW/ツール等のバージョンなど)
ASP.NET MVC
Html
C#

行動規範の内容に同意します

回答2件

いきなり最初から 2 つの表を作るというような特別なことをしないで、例えば以下のようなチュートリアルに従って DB の一つのテーブルから一つの表を作るということをまず学んではいかがですか？

10 行でズバリ!! ASP.NET MVC におけるデータの取得から画面表示までの流れ (C#)
https://code.msdn.microsoft.com/10-ASPNET-MVC-C-2098a196

Visual Studio のウィザードで Entity Framework の EDM を作れば、それをベースにスキャフォールディング機能を利用して、自分で一行もコードを書かなくても CRUD 機能を持つ Controller, View を一式自動生成してくれます。

次のステップとして、2 つの表を View に表示するのはどうすればいいかを考えてみると良いと思います。

その次のステップとして WebGrid の利用も考えてみてはいかがでしょう。

WebGrid クラス
https://msdn.microsoft.com/ja-jp/library/system.web.helpers.webgrid(v=vs.111).aspx

投稿2017/03/02 09:26

退会済みユーザー

総合スコア0

退会済みユーザー

2017/03/02 12:37

回答していただきありがとうございます。参考書とかみているとSurferOnWwwさんのいうように出すのはあったんですが、二つ表に出したいと考えてみたものの出来ずに質問しました。まだ勉強不足でしょうか？

退会済みユーザー

2017/03/02 13:12

> まだ勉強不足でしょうか？勉強不足かどうかは分かりませんが、少なくとも今回の課題（2 つの表を View に表示する）を解決する知識が不足しているのではないですか？ View が html にレンダリングされるとどうなるか、それがブラウザでどう表示されるか、どのように CSS を適用すると望む表示になるかの知識が必要ですが、そのあたりは十分ですか？　そうでなければもっともっと基本的なところから始めないとダメだと思うのですが。

退会済みユーザー

2017/03/03 01:05

SurferOnWwwさんのおっしゃる通り、基本からですよね。やさしく教えていただいたのに、わがままいってしまってすみません。

退会済みユーザー

2017/03/03 01:27 編集

最初の回答で「スキャフォールディング機能を利用して、自分で一行もコードを書かなくて」と書きましたが、その結果できるコードは基本のキとして結構大事なことで、まずそれをベースに考えることをお勧めしたのです。それで事足りれば（もしくは少々の手直しで事足りれば）、エラーに悩むことはなくなるし、開発工数も保守工数もミニマムになりますから。事足りなければ（今回の質問者さんのやりたいことのように 2 つのテーブルを表示する必要があれば）、スキャフォールディング機能を利用して自動生成されたコードを眺めてみて、それをどう応用すれば目的が叶うかを考えてみるのが良いと思います。基本が理解できていれば、スキャフォールディング機能を利用して自動生成されたコードの応用でできるはずです。それでダメなら WebGrid の利用を考えるという手がありますが、Web Forms アプリの GridView のようなもので、簡単にできるものの中で何が起こっているかわからないので、何かトラブルがあると解決に手間取るかもしれません。

行動規範の内容に同意します

ベストアンサー

僕はRuby on Railsを使っているので若干書き方が違うと思うのですが、
こんな感じでかけるのではないでしょうか？？

テーブルは用意しておいて、tbodyの中のtr(行)だけデータベースからとってきた数だけプラスするといった感じです。データの中身はtdの中に入れています。

html
1<h1>表A</h1>
2
3<table>
4
5  <thead>
6    <tr>
7      <th>Aコード番号</th>
8      <th>Aコード名</th>
9    </tr>
10  </thead>
11
12  <tbody>
13    <%= @hogehoge.each do |h| %>
14      <tr>
15        <td>@sample.ACode</td>
16        <td>@sample.ACodeName</td>
17      </tr>
18    <% end %>
19  </tbody>
20
21</table>

html
1<h1>表B</h1>
2
3<table>
4
5  <thead>
6    <tr>
7      <th>B</th>
8      <th>B</th>
9    </tr>
10  </thead>
11
12  <tbody>
13    <%= @hogehoge.each do |h| %>
14      <tr>
15        <td>@sample.Bid</td>
16        <td>@sample.BidName</td>
17      </tr>
18    <% end %>
19  </tbody>
20
21</table>