Carousel on VB.net

Question

Carousel on VB.net

Navigation

#1 by (1 votes)

0

I am trying to make a slider or carousel by recovering the routes of the images from my database to my vb.net application.

I can not show the images, besides I can not access my variables that are in the HTML code. Both Response.Write(Indicators) and Response.Write(slides) appear underlined in green.

I am working with a master page and my code is as follows:

@Code
    PageData("Title") = "Escriba el título aquí"
    Layout = "_Layout.vbhtml"
    @Imports System.Data
    @Imports System.Data.SqlClient
    @Imports System.Data.Sql


    ' variables para carosuel ' 
    Dim slides As String
    Dim indicators As String
    Dim counter As Integer

    counter = 0

    Try

        Dim cn = ConfigurationManager.ConnectionStrings("portal").ConnectionString

        Dim conexion As New SqlConnection(cn)
        Dim cmd As New SqlCommand()
        cmd.Connection = conexion
        cmd.CommandText = "SELECT * FROM imagenes WHERE status='1' ORDER BY datecreate "
        conexion.Open()       

        Dim dr As SqlDataReader
        dr = cmd.ExecuteReader()

        If dr.HasRows Then
            Do While dr.Read()
                If counter = 0 Then
                    indicators="<li data-target='#carousel-example-generic' data-slide-to='"& counter &"' class='active'></li>"
                    slides = "<div class='item active'><img src='" & dr.GetString(1) & "' /><div class='carousel-caption'><h3>" & dr.GetString(3) & "</h3></div></div>"
                Else
                    indicators = "<li data-target='#carousel-example-generic' data-slide-to='" & counter & "'></li>"
                    slides = "<div class='item active'><img src='" & dr.GetString(1) & "' /><div class='carousel-caption'><h3>" & dr.GetString(3) & "</h3></div></div>"
                End If
                counter += 1
            Loop
        Else
            MsgBox(":::error ::: ", MsgBoxStyle.Information, "Portal Fónix")
        End If
        dr.Close()
        conexion.Close()
    Catch exc As Exception
        MsgBox(":::Hay una excepción::: " & exc.ToString, MsgBoxStyle.Critical, "Portal")
    End Try
End Code

<div> 
    <div id="page-wrapper">
        <div id="page-inner">
            <section class="section-white">
                <div class="container">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicadores -->
                        <ol class="carousel-indicators">
                            @code
                                Response.Write(indicators)
                            End Code
                        </ol>
                        <div class="carousel-inner">
                        <!-- Wrapper for slides -->
                            @code
                                Response.Write(slides)
                            End Code
                        </div>
                        <!-- Controles -->
                        <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>
        </div>
    </div>
</div>

html5 bootstrap sql-server vb.net

asked by Drago25 02.02.2016 в 20:16

source

1 answer

Laravel autocompletion does not work in Sublime Text on Windows 10 Can you use the Visual Studio toolbox controls, such as GridView, UpdatePanel, AjaxControl Toolkit, etc. working with MVC and Razor?

score 1 · Answer 1

You should not access the data from the view , it is by means of the controller and the action that you query the db and return a model to the view

You could define a class model as being

Public Class CarouselViewModel
    Public Property Images As List(Of Imagen)
End Class

Public Class Imagen
    Public Property Nombre As String
    Public Property Url As String
    Public Property Counter As Integer
End Class

Then from the action of the controller you return the model to the view

Public Class xxController

   Public Function Index() As ActionResult

        Dim model As New CarouselViewModel()
        model.Images = new List(Of Imagen)

        Dim cn = ConfigurationManager.ConnectionStrings("portal").ConnectionString

        Dim conexion As New SqlConnection(cn)
        Dim cmd As New SqlCommand()
        cmd.Connection = conexion
        cmd.CommandText = "SELECT * FROM imagenes WHERE status='1' ORDER BY datecreate "
        conexion.Open()       

        Dim dr As SqlDataReader = cmd.ExecuteReader()

        Dim i As Integer = 0
        Do While dr.Read()
            Dim img As New Imagen()
            img.Nombre = dr.GetString(3)
            img.Url = dr.GetString(1)
            img.Counter = i
            model.Images.Add(img)
            i= i + 1
        Loop

        dr.Close()
        conexion.Close()

        Return View(model)

   End Function

End Class

In the view you define the model class and you scroll it

@Model CarouselViewModel
@Code
   PageData("Title") = "Escriba el título aquí"
   Layout = "_Layout.vbhtml"

End Code
<div> 
    <div id="page-wrapper">
        <div id="page-inner">
            <section class="section-white">
                <div class="container">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicadores -->
                        <ol class="carousel-indicators">
                            @For Each item In Model.Imagenes
                                <li data-target='#carousel-example-generic' data-slide-to='@item.Counter'></li>"
                                <div class='item active'><img src='@item.Url' /><div class='carousel-caption'><h3>@item.Nombre</h3></div></div>"
                            End If
                        </ol>
                        <div class="carousel-inner">
                        <!-- Wrapper for slides -->

                        </div>
                        <!-- Controles -->
                        <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>
        </div>
    </div>
</div>

Analyze how the For Each of the list of images contained in the model is made, use the properties to create the html tag. It is an Url that you must assign the src of the image.