Как отобразить список предметов в форме загрузочных карт класса

Question

Я долго искал, как настроить список элементов в asp.net mvc

и затем я подумал, можно ли использовать «Класс карт» из «Bootstrap» для отображения списка предметов на нем.

Я хочу что-то подобное:

<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

Вы можете использовать класс начальной загрузки со списком или обычными отображаемыми данными. Я написал пример об этой проблеме, мои 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>