Oi Marco Antonio, tudo bem?
Baixei e testei seu projeto, e anotei algumas modificações aqui para essa página do seu projeto funcionar:
No arquivo BuscaDeProdutos.cshtml, você deve trocar:
.GroupBy(x => x.Categoria.Nome)
por
.GroupBy(x => x.Categoria)
Dessa forma, você estará agrupando pelo objeto, e não somente pelo nome da categoria. Isso vai permitir o acesso a outras propriedades além do nome, como o Id da categoria, por exemplo.
A seguir, você deve trocar o trecho:
Where(p => p.Categoria.Nome == categoria)
por:
Where(p => p.Categoria.Nome == categoria.Nome)
Além disso, também é necessário calcular o número de produtos dentro da categoria, para fazer o cálculo correto do número de páginas necessárias no carrossel. Declare e inicialize a nova variável produtosNaCategoria conforme abaixo:
foreach (var categoria in categorias) //Para cada categoria vou criar um carrossel
{
var produtosNaCategoria =
produtos
.Where(p => p.Categoria.Id == categoria.Id);
Depois, troque:
<h3>@categoria</h3>
por:
<h3>@categoria.Nome</h3>
No arquivo BuscaDeProdutos.cshtml, você deve trocar:
int paginas = (int)Math.Ceiling((double)Model.Count() / TAMANHO_PAGINA);
por:
int paginas = (int)Math.Ceiling((double)produtosNaCategoria.Count() / TAMANHO_PAGINA);
Isso resolve o maior problema, que é quando as categorias "fecham". Por que isso ocorre? Porque cada carrossel está carregando muito mais paginas do que o necessário. Isso faz com que o carrossel tenha várias páginas sem produtos, então elas ficam vazias, ou seja, elas "colapsam" no HTML por falta de conteúdo.
Agora, ainda falta acessar cada carrossel individualmente. Para isso, você precisa de um id único em cada <div> de carrossel:
Troque:
<div id="my-carousel"
por:
<div id="my-carousel-@categoria.Id"
A mesma coisa vale para os botões de navegação do carrossel. Troque:
<a class="left carousel-control" href="#my-carousel"
por:
<a class="left carousel-control" href="#my-carousel-@categoria.Id"
e:
<a class="right carousel-control" href="#my-carousel"
por:
<a class="right carousel-control" href="#my-carousel-@categoria.Id"
Isso fará com que cada carrossel seja manipulado individualmente, pois agora cada um tem seu próprio id de HTML.
É isso. Se tiver alguma dúvida, é só dar um toque! Um abraço!
