[RESOLVED]SQL Server CE with Razor & C# how put the data for each rows inside jquery slider content

Have a SQL Server CE database in Webmatrix, how can I put my news data for each row in a content jquery slider (jflow), HTML tags: div, span,p in each slider. The top(3) rows using Razor Thank you

@{
var db = Database.Open("StarterSite");
var news = db.Query("SELECT TOP(3) * FROM NewsItems ORDER BY NewsDate DESC");
}

HTML

Slide 1
<div class="img-bg"><a href="Row1,Col_1"><img src="path"alt=""/></a></div>
<span class="widget-heading">Row1,Col_2</span>
<p class="space">Row1,Col_3</p>

Slide 2
<div class="img-bg"><a href="Row2,Col_1"><img src="path"alt=""/></a></div>
<span class="widget-heading">Row2,Col_2</span>
<p class="space">Row2,Col_3</p>

Slide 3
<div class="img-bg"><a href="Row3,Col_1"><img src="path"alt=""/></a></div>
<span class="widget-heading">Row3,Col_2</span>
<p class="space">Row3,Col_3</p>

Hi Praexor,

at first, create a cshtml page called ListImages.cshtml which will query the database for the image path and description, and then return them as JSON.  have a look at the example
here:
http://www.mikesdotnetting.com/Article/160/WebMatrix-Working-With-The-JSON-Helper

the jflow plugin looks like: 

<script type="text/javascript">

    $(function() {

        $("div#controller").jFlow({

            slides: "#slides",

            width: "980px",

            height: "313px"

        });

    });

    </script>

</head>

<body>

<div id="wrap">



    <div id="controller" class="hidden">

        <span class="jFlowControl">No 1</span>

        <span class="jFlowControl">No 2</span>

        <span class="jFlowControl">No 3</span>

    </div>

    

    <div id="prevNext">

        <img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" />

        <img src="images/next.png" alt="Next Tab" class="jFlowNext" />

    </div>

    

    <div id="slides">

        <div><img src="images/1.jpg" alt="photo" /><p>This is photo number one. Neato!</p></div>

        <div><img src="images/2.jpg" alt="photo" /><p>This is photo number two. Neato!</p></div>

        <div><img src="images/3.jpg" alt="photo" /><p>This is photo number three. Neato!</p></div>

    </div>


so in your javascript you need get each record and then manipulate the html like above

$.getJSON('/ListImages', function(data) {
        $.each(data, function(index, customer) {
           for (var i = 0; i < data.length; i++) {
                var imagePath = data.Path;
                var imageDescription= data.Description;
                $('#slides').append("<img alt='' src='" + imagePath + "'/></a><br>"); 
                $('#controller').append("<span class="jFlowControl">No "+i+"</span>");
            }
        });


Hope this helps, thanks.

Hi,

Welcome to asp.net forum.

You can use for loop or foreach loop to generate HTML. The plugin part will work as it is. You can check the following post to check using for loop to create repeating HTML generation.

http://growingtech.blogspot.in/2012/03/posting-and-binding-generic-list-or.html

Leave a Reply