Connect Bootstrap carousel with database in VB.NET

Navigation
1

I'm trying to link a database with a Bootstrap carousel. The carousel code I am using is the basic one, which is on the Bootstrap documentation page .

So far I've only been able to run the carousel with images that I have in a folder but I have not known how to do it with image paths that are saved in the database.

This is the code: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<section class="section-white">
  <div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner">
        <div class="item active">
          <img src="http://lorempixel.com/800/300/people" />
          <div class="carousel-caption">
            <h2>Ofertas Fónix</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://lorempixel.com/800/300/abstract" />
          <div class="carousel-caption">
            <h2>Ofertas Fónix</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://lorempixel.com/800/300/nature" />
          <div class="carousel-caption">
            <h2>Ofertas Fónix</h2>
          </div>
        </div>
      </div>

      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </div>
</section>
    
asked by Drago25 29.01.2016 в 23:14
source

2 answers

2

You can define a literal (ASPnet Literal) and build a string with the HTML code 

         <div class="item">
                                   <img src="LaRutaDeMiImagen" />
                                   <div class="carousel-caption">
                                    <h2>El Titulo</h2>
                                  </div>
                              </div>

This object must be inside a for or a foreach, which will be guided by the SQL statement that will return the list of images. By the way, the only thing I recommend you do is that inside the carousel, you define the first image, that is, first manually you put the image as you have in the code shown and from the second the literal (repetitive).

    
answered by 30.01.2016 в 02:46
0

If the images are in the db you will have to create a handler that returns in the Response the byte array of the file you have in the field of the table.

here

[ASP.NET] - Save Database Image

I explain how you could do it, if you analyze the article you will see that the handler program 

Imagenes imagen = ImagenesDAL.GetImagenById(id);

context.Response.Clear();
context.Response.AddHeader("content-disposition", string.Format("attachment;filename={0}", imagen.Nombre));

context.Response.ContentType = "image/jpg";
context.Response.BinaryWrite(imagen.Imagen);
context.Response.End();

That is the key part where you put in the request the file that you get from a query

In the carousel you would use 

<img src="~/Download.ashx?id=1" />

Of course what matters is the .ashx extension and define what is the id or code of the image in the table to be able to recover it

    
answered by 30.01.2016 в 01:34
Performing migrations in Django - django.db.utils.IntegrityError: null values Error: "Can not set headers after they are sent"