ASP.NET Core中的动态轮播

Question

I'm building a simple web application, a cake shop in ASP Core for learning purposes and I was wondering if there is any way to build a dynamic carousel, meaning the images come from the server, they are not hardcoded into the HTML/CSS/JavaScript files. I am using Entity Framework for this project.

So far, I've only tried hardcoding them as could not find a way online to randomly choose an ID and display the image associated with that (a simple string, file name and extension).

Below I have my homepage controller, very basic as can be seen.

namespace CakeShop.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class CakeController : ControllerBase
    {
        private readonly ApplicationDbContext _context;
        private readonly IMapper _mapper;

        public CakeController(ApplicationDbContext context, IMapper mapper)
        {
            _context = context;
            _mapper = mapper;
        }

    // GET: api/Cake
    [HttpGet]
    public async Task<ActionResult<IEnumerable<CakeViewModel>>> GetCakes()
    {
        var cakesViewModels =  new List<CakeViewModel>();
        try
        {
            var cakes = await _context.Cakes.Include(cake => cake.Category).ToListAsync();
            cakesViewModels = _mapper.Map<List<CakeViewModel>>(cakes);

            // should move this in a service
            foreach (var cakeViewModel in cakesViewModels)
            {
                if (cakeViewModel.ImageName != null)
                {
                    string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images", cakeViewModel.ImageName);
                    byte[] b = System.IO.File.ReadAllBytes(path);
                    cakeViewModel.Base64Image = "data:image/jpg;base64," + Convert.ToBase64String(b);
                }
            }
        }
        catch(Exception ex) {}
        return cakesViewModels;
    }

    // GET: api/Cake/5
    [HttpGet("{id}")]
    public async Task<ActionResult<CakeViewModel>> GetCake(int id)
    {
        try
        {
            var cake = _context.Cakes.Include(c => c.Category).ToListAsync().Result.FirstOrDefault(c => c.CakeId == id);
            var cakeViewModel = _mapper.Map<CakeViewModel>(cake);

            if (cake == null)
            {
                return NotFound();
            }

            return cakeViewModel;
        }
        catch (Exception ex){}
        return NotFound();
    }
}

}

My JavaScript file associated with my HTML is as follows:

const cakeControllerUri = "/api/cake/";

function displayCakes(cakes) {
    $.each(cakes, function (key, cake) {
    $("#cakes").append('<div class="col-lg-4 col-md-6 mb-4"><div class="card h-100"><a href="#"><img class="card-img-top" height="200" src="' + (cake.base64Image ? cake.base64Image : "http://placehold.it/700x400" ) + '" alt=""></a><div class="card-body"><h4 class="card-title"><a href="/item/index.html?cakeid=' + cake.cakeId + '">' + cake.name + '</a></h4><h5>' + cake.price + ' $</h5><p class="card-text">' + cake.description + '</p></div><h5 style="margin-left:1.25rem">' + cake.category + '</h5><div class="card-footer"><small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small></div></div></div>');
    });
}

function getCakes() {
    $.ajax({
        type: "GET",
        url: cakeControllerUri,
        cache: false,
        success: function (cakes) {
            displayCakes(cakes);
        }
    });
}

$(document).ready(function () {
    getCakes();
});

Answer 1

Create a JavaScript dictionary where the keys are numbers (eg 0-9) and the values are the unique ids for the cakes (or just use an array of cake ids). Use a script to generate a random number within your key/index range (0-9) and call your API controller with the key's value as the id. Keep track of the keys (or the values) you have called and don't call the same cake until you have shown the rest.