記事詳細

関連するテーブルのデータをtableで表示

リレーションシップのあるデータをbootstrapのテーブルで表示するHtmlコード

Controller側のIndexアクションの内容。

   public async Task<IActionResult> Index()

   {

             return View(await _context.skyGenre.Include("skyArticles").ToListAsync());

   }

View側のHtml

<table class="table table-success table-striped table-sm">

    <thead>

        <tr class="table-primary">

            <th>

                <h5>ジャンル名</h5>

            </th>

            <th>

                <h5>記事タイトル</h5>

            </th>

            <th>

                Link To Detail

            </th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>

                    <h4>@Html.DisplayFor(modelItem => item.Description)</h4>

                </td>

                <td>

                    <ol class="list-group list-group-numbered">

                        @if (item.skyArticles.Count > 0)

                        {

                            @foreach (var con in item.skyArticles)

                            {

                                <li>

                                    @Html.ActionLink(con.Title + ": >記事を見る", "Details", "skyArticles", new { Id = con.Id }, new { @class = "btn btn-outline-dark" })

                                </li>

                            }

                        }

                        else

                        {

                            <li>no-content</li>

                        }

                    </ol>

                </td>

                <td>

                   @*  @if (item.skyArticles.Count > 0)

                    {

                        @foreach (var aid in item.skyArticles)

                        {

                            <ul>

                                <li> @Html.ActionLink("記事を見る", "Details", "skyArticles", new { Id = aid.Id }, new { @class = "btn btn-success btn-sm" })</li>

                            </ul>

                        }

                    } *@

                </td>

            </tr>

        }

    </tbody>

</table>

結果の表示は、下図です。