如何在ASP.NET MVC中对引导卡进行分页

如何解决如何在ASP.NET MVC中对引导卡进行分页

早上好，我告诉你，我正在尽可能多地使用Bootstrap 4的购物网站，我想以这种方式展示产品，下面举一个例子：https://mdbootstrap.com/snippets/jquery/ascensus/135508

为了复制上面的示例，我执行了以下操作：在主视图中创建了一个容器，并在其中创建了局部视图

@model Entidades.ViewModel.eTiendaOnlineViewModel
    <div class="container-fluid">
    <div class="row">
    <div class="col-sm-12">
        <div id="inam" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                @{
                    Html.RenderPartial("vpprueba",Model.productosmasvendidos);
                }
            </div>
        </div>
    </div>
</div>
<a href="#inam" class="carousel-control-prev" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
</a>
<a href="#inam" class="carousel-control-next" data-slide="next">
    <span class="carousel-control-next-icon"></span>
</a>
</div>

在这种局部视图中，我将变成轮播，并调用模型的属性来显示它们，但不会出错，但是，当执行迭代时，它将垂直而不是水平地渲染它们。如果可能的话，我想添加一些分页。

@model List<Entidades.ViewModel.eProductosViewModel>
@{
if (Model != null)
{
    foreach (var producto in Model)
    {
        <div class="col-sm-12 col-lg-4">
            <div class="card" style="width: 300px;margin: auto;">

                <img src="@Url.Content(@producto.imagen1)" class="card-img-top">
                <div class="card-body">
                    <h4 class="card-title">@producto.descripcion_corta</h4>
                    <p class="card-text">@producto.preciopublico</p>
                    <a href="javascript:;" class="btn" onclick="showaddtocart(@producto.cod_producto)"><i class="fas fa-shopping-cart"></i></a>
                </div>

            </div>
        </div>

    }
}

}

我的控制器是：

using Entidades.ViewModel;
using System.Web.Mvc;
namespace TiendaOnline.Controllers{
public class tiendaController : Controller{
// GET: store
    public ActionResult index()
    {
    //entity general
        eTiendaOnlineViewModel onlinestore = new eTiendaOnlineViewModel();
    
    eClaseProductoViewModel clase1 = new eClaseProductoViewModel()
        {
            cod_clase_producto = "0001",descripcion = "CLASE NO. 1",imagen = "~/Content/images/alacena.jpg"
        };

        onlinestore.clasesproducto.Add(clase1);

        eClaseProductoViewModel clase2 = new eClaseProductoViewModel()
        {
            cod_clase_producto = "0002",descripcion = "CLASE NO. 2",imagen = "~/Content/images/Farmacia.jpg"
        };

        onlinestore.clasesproducto.Add(clase2);

        eClaseProductoViewModel clase3 = new eClaseProductoViewModel()
        {
            cod_clase_producto = "0003",descripcion = "CLASE NO. 3",imagen = "~/Content/images/pescado.jpg"
        };

        onlinestore.clasesproducto.Add(clase3);
        return View(onlinestore);
    }

如果有人可以提前告诉我，我非常感谢，等待您的评论和问候。

解决方法

您未实现html代码corect。它看起来像下面的例子 （在for循环之前的注释中，您将找到有关如何进行分页的建议）：

public class CardItem
{
    public string Image { get; set; }

    public string Title { get; set; }
}

@{ 
var id = "my-own-id";

var random = new Random();
var length = random.Next(10,21);
var items = new List<CardItem>();

for (int i = 0; i < length; i++)
{
    items.Add(new CardItem
    {
        Image = $"https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20({i + 21}).jpg",Title = $"Card Title {i + 1}"
    });
}

var itmIndex = 0;
var pages = items.Count / 3;

if (items.Count % 3 > 0)
{
    pages++;
}

}

<div id="@id" class="carousel slide carousel-multi-item" data-ride="carousel">

    <!--Controls-->
    <div class="controls-top">
        <a class="btn btn-primary rounded-circle" href="#@id" data-slide="prev"><</a>
        <a class="btn btn-primary rounded-circle" href="#@id" data-slide="next">></a>
    </div>
    <!--/.Controls-->
    <!--Indicators-->
    <ol class="carousel-indicators">
        @for (int i = 0; i < pages; i++)
        {
            if (i == 0)
            {
                <li data-target="#@id" data-slide-to="@i" class="active"></li>
            }
            else
            {
                <li data-target="#@id" data-slide-to="@i"></li>
            }
        }
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">

        <!--
            This part should be placed in your partial view:
            With some jQuery you can invoke a specific action that returns partial view and load its content hier.
            See for more info: https://api.jquery.com/load/ how it works.
        -->
        @for (int slide = 0; slide < pages; slide++)
        {
            <div class="carousel-item @(slide == 0 ? "active" : string.Empty)">
                <div class="row">
                    @for (int item = 0; item < 3; item++)
                    {
                        var itm = items[itmIndex++ % pages];
                        var colCls = string.Empty;

                        if (item > 0)
                        {
                            colCls = "clearfix d-none d-md-block";
                        }

                        <div class="col-md-4 @colCls">
                            <div class="card mb-2">
                                <img class="card-img-top" src="@itm.Image" alt="Card image cap @(itmIndex + 1)">
                                <div class="card-body">
                                    <h4 class="card-title">@itm.Title</h4>
                                    <p class="card-text">
                                        Some quick example text to build on the card title and make up the bulk of the
                                        card's content.
                                    </p>
                                    <a class="btn btn-primary">Button</a>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
    </div>
    <!--/.Slides-->

</div>