Question

我正在寻找一些信息，我真的需要知道如何使用bootstrap 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中的ID 并且其中之一必须为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项添加到数据库中。

所以我需要一个小教程来用asp.net mvc制作一个Carousel列表，而不会破坏整个设计。

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>

如何使用Bootstrap Carousel作为数据库记录的列表？

1 个答案: