Как создать карусель Bootstrap, который использует динамический контент

Question

Я использую карусель для начальной загрузки, и он отлично работает со статическим списком изображений в html, однако я хочу иметь возможность загружать новые изображения и отображать их в карусели - без необходимости развертывания новой версии сайта.

• This answer рассказывает о загрузке изображений на лету. Это звучит здорово, но я не ожидаю, что список изображений будет меняться очень часто, может быть, 1/месяц, так что быстрее или проще будет лучше.
• This answer для PHP
• и this question не имеет ответа, но кажется, что он не хочет использовать на стороне сервера код в любом случае

Вот HTML-код, я использую для статического список изображений:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
     <li data-target="#myCarousel" data-slide-to="2" class=""></li> 
    </ol> 
    <!-- Images--> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="/Images/Slideshow/Picture1.jpg" alt="First slide"> 
     </div> 
     <div class="item"> 
      <img src="/Images/Slideshow/Picture2.jpg" alt="Second slide"> 
     </div> 
     <div class="item"> 
      <img src="/Images/Slideshow/Picture3.jpg" alt="Third slide"> 
     </div> 
    </div> 
    <!-- Left Right Arrows --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

Answer 1

я решил заменить carousel-indicators DIV и содержимое carousel-inner DIV с литералами и заполнить их из кода за чтением содержимого директории и сохранение в кэш.
Другим способом было бы сохранить имена файлов в базе данных или текстовом файле.

HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <asp:Literal ID="ltlCarouselIndicators" runat="server" /> 
    <!-- Images--> 
    <div class="carousel-inner" role="listbox"> 
     <asp:Literal ID="ltlCarouselImages" runat="server" /> 
    </div> 
    <!-- Left Right Arrows --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

Код За:

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) 
    { 
     ObjectCache cache = MemoryCache.Default; 
     try 
     { 
      if (cache["CarouselInnerHtml"] != null && cache["CarouselIndicatorsHtml"] != null) 
      { 
       //use the cached html 
       ltlCarouselImages.Text = cache["CarouselInnerHtml"].ToString(); 
       ltlCarouselIndicators.Text = cache["CarouselIndicatorsHtml"].ToString(); 
      } 
      else 
      { 
       //get a list of images from the folder 
       const string imagesPath = "/Images/Slideshow/"; 
       var dir = new DirectoryInfo(HttpContext.Current.Server.MapPath(imagesPath)); 
       //filtering to jpgs, but ideally not required 
       List<string> fileNames = (from flInfo in dir.GetFiles() where flInfo.Name.EndsWith(".jpg") select flInfo.Name).ToList(); 
       if (fileNames.Count > 0) 
       { 
        var carouselInnerHtml = new StringBuilder(); 
        var indicatorsHtml = new StringBuilder(@"<ol class='carousel-indicators'>"); 
        //loop through and build up the html for indicators + images 
        for (int i = 0; i < fileNames.Count; i++) 
        { 
         var fileName = fileNames[i]; 
         carouselInnerHtml.AppendLine(i == 0 ? "<div class='item active'>" : "<div class='item'>"); 
         carouselInnerHtml.AppendLine("<img src='" + imagesPath + fileName + "' alt='Slide #" + (i + 1) + "'>"); 
         carouselInnerHtml.AppendLine("</div>"); 
         indicatorsHtml.AppendLine(i == 0 ? @"<li data-target='#myCarousel' data-slide-to='" + i + "' class='active'></li>" : @"<li data-target='#myCarousel' data-slide-to='" + i + "' class=''></li>"); 
        } 
        //close tag 
        indicatorsHtml.AppendLine("</ol>"); 
        //stick the html in the literal tags and the cache 
        cache["CarouselInnerHtml"] = ltlCarouselImages.Text = carouselInnerHtml.ToString(); 
        cache["CarouselIndicatorsHtml"] = ltlCarouselIndicators.Text = indicatorsHtml.ToString(); 
       } 
      } 
     } 
     catch (Exception) 
     { 
      //something is dodgy so flush the cache 
      if (cache["CarouselInnerHtml"] != null) 
      { 
       Cache.Remove("CarouselInnerHtml"); 
      } 
      if (cache["CarouselIndicatorsHtml"] != null) 
      { 
       Cache.Remove("CarouselIndicatorsHtml"); 
      } 
     } 
    } 
}