ASP.NET内核中的动态轮播

Question

我正在构建一个简单的web应用程序，一个用于学习目的的ASP核心蛋糕店，我想知道是否有任何方法可以构建动态轮播，这意味着图像来自服务器，它们没有硬编码到HTML/CSS/JavaScript文件中。我正在为这个项目使用实体框架。

到目前为止，我只尝试对它们进行硬编码，因为无法在网上找到一种方法来随机选择一个ID并显示与之相关的图像(一个简单的字符串、文件名和扩展名)。

下面我有我的主页控制器，非常基础，可以看到。

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

}

与我的超文本标记语言相关联的JavaScript文件如下：

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

创建一个JavaScript字典，其中键是数字(例如0-9)，值是蛋糕的唯一ids (或者只使用蛋糕ids的数组)。使用脚本在您的密钥/索引范围(0-9)内生成一个随机数，并使用密钥的值作为id调用API控制器。跟踪您已调用的键(或值)，在显示其余部分之前不要调用相同的蛋糕。