以比表 mvc asp.net 更好的格式显示数据库中的记录列表 [关闭]答案

【问题标题】：Display list of records from database in a nicer format than a table mvc asp.net [closed]以比表 mvc asp.net 更好的格式显示数据库中的记录列表 [关闭]
【发布时间】：2019-07-19 17:46:35
【问题描述】：

我正在寻找一种更好的方法来在视图中显示我的数据库中的记录列表，而不是使用普通表和“for each”循环，如下所示：

<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.date)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.name)
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.date)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.name)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.id }) |
        @Html.ActionLink("Details", "Details", new { id=item.id }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.id })
    </td>
</tr>
}

</table>

最好我想以“个人资料”类型的格式显示每条记录，如下所示：

profile image

【问题讨论】：

当然。我建议使用dl 列表而不是表格。有关该列表的更多信息：developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
这是一个 HTML 问题。如果你用谷歌搜索，你会发现很多教程、控制工具、使用 div、CSS 类、Javascript 的 Javascript 库。表格行不必包含 cells，@foreach 也不必创建 tables。以the W3.CSS Cards 样式为例，它允许您仅使用 div 创建卡片。您的 @foreach 可以创建这样的部分而不是表格行
谢谢你们！

标签： c# html asp.net model-view-controller asp.net-mvc-5

【解决方案1】：

用模型中的属性替换虚拟文本

body{padding-top:30px;}

.glyphicon {  margin-bottom: 10px;margin-right: 10px;}

small {
display: block;
line-height: 1.428571429;
color: #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
@foreach (var item in Model) {
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="well well-sm">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Bhaumik Patel</h4>
                        <small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>email@example.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="">www.jquery2dotnet.com</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
    }
</div>

【讨论】：

不客气，如果您满意，请标记为正确答案。