C# 在cshtml页面上动态添加多个carousel jquery滑块

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

带Razor C钩子的cshtml代码： 我认为这一点需要关注： 除此之外，其余代码都是动态的。我不知道如何根据数据库列中的项数为每个未排序的列表（例如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位： 这里我不确定，但是我想我需要为动态指定的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，请耐心听我说。谢谢

如果您只想获得每个无序列表的唯一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>
    }

---

谢谢，我已经设法为每个ul生成了唯一的id，但是jquery位不起作用，它只是将它们一起忽略。有什么想法吗？你有没有试过让其中一个在没有每个滑块的情况下工作，但是通过实际的idYeah，它只在第一个滑块上工作，但完全忽略了其他滑块。我甚至尝试过使用选择器[id^=foo_]开始仍然是一样的故事。尝试向ul添加一个类并通过类调用它真的很奇怪，现在属性被应用到类中，但是除了第一张幻灯片，所有幻灯片的属性都为null或零。

 @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>
    }

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