0

データベースのデータを使用して、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 ビット: ここではわかりませんが、動的に指定された #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とjqueryを使い始めたばかりですが、ご容赦ください。ありがとう

4

1 に答える 1

0

各順不同リストの一意の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>
    }

ただし、カルーサルを動的に取得したい場合は、リストの下で for-each を 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}
    });
});
于 2012-11-18T22:19:55.343 に答える