Question

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

使用Razor C＃hooks

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位： 这里我不确定，但我想我需要为动态指定的#id范围设置此选项为true。

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

我刚刚开始使用webmatrix＆amp; 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>
    }

但是如果你只想动态获取carousal-each under list，你可以在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}
    });
});

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

cshtml代码：

1 个答案: