RealPath:
WebPath:
2016/11/08 17:47 (JST) 更新
掲示板作成 >>

レイアウト調整

Contents

コメント一覧の見た目があまり掲示板っぽくないのでレイアウトを少しいじります。
img--500--size

一覧ページの変更

一覧画面をそれっぽく編集します。

Views/Comments/Index.cshtml を以下のようにまるっと書き直し。
(テーブルレイアウトから Bootstrap の panel レイアウトに書き直しました)

@model IEnumerable<BbsSample.Models.Comment>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
@foreach (var item in Model) {
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                @Html.DisplayFor(modelItem => item.UserName) @Html.DisplayFor(modelItem => item.Created)
                @Html.ActionLink("×", "Delete", new { id = item.Id }, new { @class = "pull-right" })
            </h3>
        </div>
        <div class="panel-body">
            <div style="white-space: pre;">@Html.DisplayFor(modelItem => item.Body)</div>
        </div>
    </div>
}

一覧ページの見た目結果

img--500--size