How to paginate the bootstrap cards in asp.net mvc

Good morning, I tell you, I am working on a shopping site with Bootstrap 4 as much as possible, which I want to show the products in this way, I leave an example: https://mdbootstrap.com/snippets/jquery/ascensus/135508

In order to replicate the above example I have done the following: I have this main view in which I have created a container and within it I render a partial view

@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>

In this partial view I have what would become the carousel as such and calling the attributes of my model to show them, nothing could go wrong, however, when the iteration is performed, it renders them vertically and not horizontally. I would like to add some kind of pagination if possible.
@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>

    }
}

}

My controller is:

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);
    }

If someone can give me a light in advance I appreciate it, waiting for your comments, greetings.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You do not implement the html code corect. It should look like the example below
(In the comments before the for loops you will find a suggestion on how to do pagination):

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x