时间戳

首页 > 解决方案 > 如何以引导卡类的形式显示项目列表

c# - 如何以引导卡类的形式显示项目列表

问题描述

我一直在寻找有关如何在 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>

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

标签： c#jqueryasp.netasp.net-mvcbootstrap-4

解决方案

您可以将引导类与列表或正常显示数据一起使用我写了一个关于这个问题的示例，我的 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>

推荐阅读