如何显示bootstrap卡类形状的项目列表

Question

我一直在搜索如何在asp.net mvc中自定义项目列表

然后我在想是否可以使用“Bootstrap”中的“Cards Class”来显示其上的项目列表。

我想要这样的东西：

<div class="card border-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">@Html.DisplayNameFor(model => model.ArticleTitle)</div>
  <div class="card-body">
    <p class="card-text">@Html.DisplayNameFor(model => model.ArticleText)</p>
  </div>
  <div class="card-footer">
    <p class="card-text">@Html.DisplayNameFor(model => model.ArticlePostDate)</p>
</div>

目的是显示具有引导卡样式的列表。

Answer 1

您可以使用带有列表或正常显示数据的bootstrap类我写了一个关于此问题的示例我的c＃代码是这样的。你也可以给所有剃刀项目css更多细节https://www.telerik.com/blogs/stay-sharp-razor-taghelpers

public IActionResult Index()
   {
            List<User> users = new List<User>();
            var u = new User() {
                ID = 1,
                Name ="a",
                Surname="aa",
                Number=111
            };

            var u2 = new User()
            {
                ID = 2,
                Name = "b",
                Surname = "bb",
                Number = 111
            };
            var u3 = new User()
            {
                ID = 1,
                Name = "a",
                Surname = "aa",
                Number = 111
            };
            users.Add(u);
            users.Add(u2);
            users.Add(u3);

            return View(users);
        }

        public IActionResult Privacy()
        {
            var uu = new User()
            {
                ID = 1,
                Name = "a",
                Surname = "aa",
                Number = 111
            };
            ViewBag.User = uu;
            return View();
            }
}
}

用户列表和你卡css这样。

@model IEnumerable<WebApplication1.Models.User>

@{
    ViewData["Title"] = "Home Page";
}

<h1>List Sample</h1>
@foreach (var item in Model)
{
    <div>
        <div class="card border-primary mb-3" style="max-width: 20rem;">
            <div class="card-header">@item.Name</div>
            <div class="card-body">
                <p class="card-text">@item.Surname</p>
            </div>
            <div class="card-footer">
                <p class="card-text">@item.Number</p>
            </div>
        </div>
    </div>
}

并且只显示这样的一天

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>
<div>
    <div class="card border-primary mb-3" style="max-width: 20rem;">
        <div class="card-header">@ViewBag.User.Name</div>
        <div class="card-body">
            <p class="card-text">@ViewBag.User.Surname</p>
        </div>
        <div class="card-footer">
            <p class="card-text">@ViewBag.User.Number</p>
        </div>
    </div>
</div>