在 cshtml 页面上动态添加多个轮播 jquery 滑块

Question

我想使用数据库中的数据在 cshtml 页面上添加多个 jquery 滑块。基本上，我有一组选项卡，当它们处于活动状态时，它们会动态填充包含数据库中的数据的滑块。

带有 Razor C# 钩子的 cshtml 代码：

<div class="tabbable">
    <ul id="myTab" class="nav nav-tabs">
        @foreach(var row in db.Query(queryCategory))
        {
            <li><a href="#@row.Food_Category" data-toggle="tab">@row.Food_Category</a></li>
        }
    </ul>
    <div class="tab-content">
        @{bool first = true;}
        @foreach(var row in db.Query(queryCategory))
        {
            var ids= @row.Food_Category;
            <div class="@{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=@ids>
                <p>I'm in @row.Food_Category.</p>
                <div class="list_carousel">
                <ul id="foo">
                    @foreach(var row1 in db.Query("SELECT * FROM Food WHERE Food_Category = @0", ids))
                    {
                        <li>@row1.Food_ID</li>
                    }  
                </ul>
                <div class="clearfix"></div>
                <a id="prev2" class="prev" href="#">&lt;</a>
                <a id="next2" class="next" href="#">&gt;</a>
                <div id="pager2" class="pager"></div>
                </div>
            </div>
        }
    </div>
</div><!--tabbable-->

我认为需要重点关注的部分： 除了这一位之外，其余代码都是动态的。我不确定如何根据数据库列中的项目数为每个无序列表（例如 foo1、foo2、foo3 动态）获取唯一 ID。

<ul id="foo">
    @foreach(var row1 in db.Query("SELECT * FROM Food WHERE Food_Category = @0", ids))
    {
        <li>@row1.Food_ID</li>
    }  
</ul>

Jquery 位： 这里我不确定，但我认为我需要将此选项设置为 true 以动态指定的#id 范围。

<script>
//Carousel
    $('#foo').carouFredSel({
        width: '100%',
        scroll: 2,          
        auto: false,
        prev: '#prev2',
        next: '#next2',
        pagination: "#pager2",
        mousewheel: true,
        swipe: {onTouch: true}
    });
</script>

我刚开始使用 webmatrix 和 jquery，请多多包涵。谢谢

Answer 1

如果您只想获取每个无序列表的唯一 ID，您可以这样做

 @int inc=0;
 @foreach(var row in db.Query(queryCategory))
    {
        var ids= @row.Food_Category;
        <div class="@{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=@ids>
            <p>I'm in @row.Food_Category.</p>
            <div class="list_carousel">
            <ul id="foo@inc++">
                @foreach(var row1 in db.Query("SELECT * FROM Food WHERE Food_Category = @0", ids))
                {
                    <li>@row1.Food_ID</li>
                }  
            </ul>
            <div class="clearfix"></div>
            <a id="prev2" class="prev" href="#">&lt;</a>
            <a id="next2" class="next" href="#">&gt;</a>
            <div id="pager2" class="pager"></div>
            </div>
        </div>
    }

但是如果你只是想在列表下动态地获得轮播，你可以为 jquery foreach 中的每个函数使用

$('ul').each(function(index) {
     $('this').carouFredSel({
        width: '100%',
        scroll: 2,          
        auto: false,
        prev: '#prev2',
        next: '#next2',
        pagination: "#pager2",
        mousewheel: true,
        swipe: {onTouch: true}
    });
});