如何以引導卡類的形式顯示項目列表

Question

我一直在尋找有關如何自定義asp.net mvc中的項目列表的時間

然后我在想是否可以使用“引導程序”中的“卡片類”在其上顯示項目列表。

我想要這樣的東西：

<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類與列表或常規顯示數據一起使用。 您也可以為所有剃須刀項目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>