Как я могу использовать Bootstrap Carousel в качестве списка для записей БД?

Question

Я немного искал, и мне действительно нужно знать, как использовать класс начальной загрузки 4 Carousel В качестве списка некоторых данных модели?

Я пытался управлять самостоятельно и сделал что-то вродеэто в представлении:

@model IEnumerable<ElMatrodySite.Models.NewsData>
<link href="~/Content/Home.css" rel="stylesheet" />
@{
    ViewBag.Title = "Home Page";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
</style>
<div class="container">
    <div style="width:100%;height:150px;padding-top:0px; direction:rtl;">
        <div class="row">
            <div class="col-xl-4">
                <img src="~/photos/Logo.png" class="mx-auto d-block" style="height:250px;"/>
            </div>
            <div class="col-xl-8" style="text-shadow:0px 4px 10px #808080; color:#352c5e;">
                <br />
                @if (Request.IsAuthenticated)
                {
                    ElMatrodySite.Models.ApplicationUser Apps = new ElMatrodySite.Models.ApplicationUser();
                    <h2 class="mx-auto d-block text-center" id="ccword">مرحبًا بك @Apps.Firstname في موقع أسرة المطرودي !</h2>
                }
                else
                {
                    <h2 class="mx-auto d-block text-center" id="ccword">مرحبًا بكم في الموقع الرسمي الجديد لأسرة المطرودي !</h2>
                }
            </div>
        </div>
    </div>
</div>
<div class="row" style="direction:rtl;">
    <div class="container">
        <div class="col-xl-6" style="padding-top:150px;" id="xcard">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">

                <ol class="carousel-indicators">
                    @{
                        int i = 0;
                    }
                    @foreach (var item in Model)
                    {
                        <li data-target="#myCarousel" data-slide-to="@i" class="@(i == 0 ? "active" : "")"></li>
                        i++;
                    }
                </ol>

                <div class="carousel-inner">
                    @{
                        i = 0;
                    }
                    @foreach (var item in Model)
                    {
                        <div class="item @(i == 0 ? "active" : "")">
                            <img src="~/NewsPhotos/@item.file" class="image img-responsive">
                            <div class="carousel-caption">
                                <h3>@item.ArticleTitle</h3>
                            </div>
                        </div>
                        i++;
                    }
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

это неправильно, потому что каждому элементу в списке нужен идентификатор в data-slide-to, а также один из них должен быть active, но это возможно при работе с foreachчтобы получить список данных.

это код в контроллере:

[HttpGet]
        public ActionResult Index()
        {
            List<NewsData> slideList = new List<NewsData>();
            using (MatrodyEntities db = new MatrodyEntities())
            {
                var type = new NewsData();
                slideList = db.NewsData.Where(xx => xx.ArticleID == type.ArticleID).Take(5).ToList();
                return View(from NewsData in db.NewsData.ToList() select NewsData);
            }
        }

Поскольку я беру последние 5 элементов, добавленных в базу данных.

поэтому мне нужно небольшое руководство, чтобы составить список Carousel с помощью asp.net mvc, не разрушая весь дизайн.

Answer 1

Как я понимаю, вы хотите получить список данных из базы данных и хотите использовать bootstrap Carousel. Как я заметил в вашем методе действия, вы получаете последние 5 записей и не передаете их для просмотра, вместо этого вы используете

return View(from NewsData in db.NewsData.ToList() select NewsData);

Вы можете использовать напрямую

return View(slideList);

А на ваш взгляд вы можете использовать модель list как показано ниже

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        @{
            int i = 1;
        }
        @foreach (var item in Model)
        {
            <li data-target="#myCarousel" data-slide-to="@i" class="@(i == 1 ? "active" : "")"></li>
            i++;
        }
    </ol>

    <div class="carousel-inner">
        @{
            i = 1;
        }
        @foreach (var item in Model)
        {
            <div class="item @(i == 1 ? "active" : "")">
                <img src="@item.ImagePath" class="image img-responsive">
                <div class="carousel-caption">
                    <h3>@item.Title</h3>
                </div>
            </div>
            i++;
        }
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>